JS - AngularJS

AngularJS
SPA
Single Page Applications

)5.-
)5.-

)5.-
41"
"+"9
+40/

7JFX

AngularJS - SPA
IUUQMPDBMIPTUWJFX
<div>
VIEW 1
</div>

7JFX

AngularJS - SPA
IUUQMPDBMIPTUWJFX
7*&8
<div>
VIEW 2
</div>

41" 4JOHMF1BHF"QQMJDBUJPOT

%0..BOJQVMBUJPO

)JTUPSZ

3PVUJOH

"KBY

%BUB#JOEJOH
AngularJS
about SPA Framework
AngularJS
"OHVMBS+441"
AngularJS - SPA
IUUQTBOHVMBSKTPSH
AngularJS - Full Featured SPA Framework
Model
Directives
Data Binding
View
Expression
Validation
Controller
Services
Testing
Template
Factories
Views
History
Routing
jqLite
Depedency
Injection
AngularJS - Zero
.JLP)FWFSZ"OHVMBS+4
)5.-

(PPHMF'FFECBDL
GWT
Y

AngularJS
Y

AngularJS - Growth
(PPHMF
https://goo.gl/SCnUeh
AngularJS - WHY
"OHVMBS+4
.BJOUBJO$PEJOH4UZMF$POTJTUFODZ

.7$ .7$4USVDUVSF1BUUFSO

-FTT$PEF

3F6TFBCMF1BUUFSO

5XPXBZ%BUB#JOEJOH

.PEVMFT&YUFOTJPO
AngularJS
Getting Started
AngularJS - STEP 1
"OHVMBS+4 $%/
Local
<script src=js/vender/angular-1.5.1.min.js></script>
Hosted Version (CDN)

<script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.5.1/angular.min.js"></script>
Bower Management
AngularJS - STEP 2-1

)5.- IUNM
OH"QQ %JSFDUJWF

EBUB
Web Non-Standard
<html lang="ko-KR" ng-app>
Web Standard
<html lang="ko-KR" data-ng-app>

"OHVMBS+4 #PPUTUSBQ

)5.-"OHVMBS+4
BOHVMBS+4
DOMContentLoaded Event
document.readystate === "complete"

docs.angularjs.org/guide/bootstrap
OH"QQ
auto-bootstrap
.PEVMF

*OKFDUPS

$PNQJMFSPPU4DPQF
%0. 7JFX

OH.PEFM OH#JOE
5XP8BZ%BUB#JOEJOH

Directive
<input type="text" data-ng-model="two_way_binding">
<p data-ng-bind="two_way_binding"></p>
Expression
<input type="text" data-ng-model="two_way_binding">
OH#JOE
<p>{{two_way_binding}}</p>

%BUB#JOEJOH&YQSFTTJPO
&YQSFTTJPO

"OHVMBS+45XP8BZ#JOEJOH.PEFM7JFX
One-Way Data Binding
Two-Way Data Binding
7JFX
5FNQMBUF
7JFX
5FNQMBUF
.PEFM
.PEFM
AngularJS - Start!
DEMO
AngularJS vs jQuery
jQuery DEMO
<!DOCTYPE html>
<html lang="ko-KR">
<head>
<meta http-equiv="X-UA-Compatible" content="IE=Edge">
<meta charset="UTF-8">
<title>AngularJS Start</title>
<script src="//code.jquery.com/jquery.min.js"></script>
<script>
function init($) {
var $twb
= $('#twb'),
$twb_binding = $('#twb-binding');
$twb.on('keyup', function(event) {
$twb_binding.text( event.target.value );
});
}
jQuery.noConflict(true)(init);
</script>
</head>
<body>
<input type="text" id="twb">

<p id="twb-binding"></p>
</body>
</html>
AngularJS vs jQuery
AngularJS DEMO
<!DOCTYPE html>
<html lang="ko-KR" data-ng-app>
<head>
<meta http-equiv="X-UA-Compatible" content="IE=Edge">
<meta charset="UTF-8">
<title>AngularJS Start</title>
<script src="//ajax.googleapis.com/ajax/libs/angularjs/1.4.8/angular.min.js"></script>
</head>
<body>
<input type="text" data-ng-model="twb">

<p data-ng-bind="twb"></p>
<p>{{twb}}</p>
</body>
</html>
AngularJS
Big Picture
AngularJS - Key Players

"OHVMBS+4
.PEVMF
3PVUFT
6*
7JFX
-PHJD%BUB
TDPQF
$POUSPMMFS
%JSFDUJWFT
'BDUPSZ
'JMUFST
4FSWJDF
AngularJS - Big Picture

"OHVMBS+4
.PEVMF
$POGJH
3PVUFT
7JFX
%JSFDUJWF
TDPQF
$POUSPMMFS
'BDUPSZ
AngularJS - Module
.PEVMF
$POUBJOFS
.PEVMF
$POUSPMMFST

3PVUFT

'BDUPSJFT
4FSWJDFT

%JSFDUJWFT

'JMUFST
AngularJS - Factory / Service

'BDUPSJFT
4FSWJDFT
'BDUPSJFT4FSWJDFT
3&45GVM
$POUSPMMFS

4JOHMFUPO0CKFDU
AngularJS - Controller
$POUSPMMFS
.PEFM
7JFX
$POUSPMMFS
$POUSPMMFS
7JFX #SBJO

'BDUPSZ4FSWJDF

7JFX&WFOU

7JFXTDPQF
'BDUPSZ
4FSWJDF
TDPQF
7JFX
AngularJS - Scope
4DPQF
$POUSPMMFS
7JFX.PEFM
AA
$POUSPMMFS
TDPQF
7JFX
AngularJS - View
7JFX
6*
7JFX
$POUSPMMFS
TDPQF
7JFX
)5.-$44
%JSFDUJWFT
'JMUFST
TDPQF

)5.-
AngularJS - Routes
3PVUFT

3PVUFT
$POUSPMMFST
7JFX

3PVUF1BSBNFUFS

DVTUPNFSTDVTUPNFS*E
3PVUF
7JFX
DVTUPNFST
DVTUPNFSTIUNM
$POUSPMMFS
DVTUPNFST$POUSPMMFSKT
AngularJS - Big Picture

"OHVMBS+4
.PEVMF
$POGJH
3PVUFT
7JFX
%JSFDUJWF
TDPQF
$POUSPMMFS
'BDUPSZ
AngularJS
Documentation & Summary
AngularJS - Documentation
"OHVMBS+4"1*%PDT
AngularJS - SPA
IUUQTEPDTBOHVMBSKTPSHBQJ
AngularJS - Summary
"OHVMBS+441"
41" 4JOHMF1BHF"QQMJDBUJPO

.PEVMFT

$POUSPMMFST
'BDUPSJFT4FSWJDFT
7JFX
%JSFDUJWFT
'JMUFST
View
Point
7JFX
%JSFDUJWFT&YQSFTTJPOT'JMUFST
.PEVMF
$POGJH
3PVUFT
7JFX
%JSFDUJWF
TDPQF
$POUSPMMFS
'BDUPSZ
Data Binding
Control-Oriented vs Data-Oriented
Data Binding
+BWBTDSJQU /BUJWF4VQQPSU

"OHVMBS+4
5FNQMBUF
7JFX
.PEFM
Control-Oriented vs Data-Oriented
WT
*%
ZBNPP ]
JOQVU
document.querySelector('#user-id').value ='yamoo9';
JOQVU
<input data-ng-model='u_id'>

''

JOQVU
var u_id = document.querySelector('#user-id').value;
Directives &
Expressions
Directives
%JSFDUJWFT
)5.-

%0..BOJQVMBUJPO

%BUB#JOEJOH

$POUSPMMFST.PEVMFT

WJFX-PBEJOH

$44

&WFOUT
Directives
%0.
.PEVMFT
$POUSPMMFST
ngShow
ngApp
ngHide
ngControler
ngView
...
ngRepeat
...
%BUB#JOEJOH
&WFOUT
ngInit
ngClick
ngModel
ngMouseenter
ngBind
ngKeydown
...
...
Directives
%JSFDUJWFT

EBUB
<div ng-hide="is_hidden"></div>
<div data-ng-hide="is_hidden"></div>
<ng-view></ng-view>
Expressions
&YQSFTTJPO
\\^^

$PEF4OJQQFU

&YQSFTTJPO
{{'yamoo9'+9}}

#JOEJOH.BSLVQ
Directives & Expressions
DEMO

OH*OJUOH.PEFMOH$MJDLOH4IPXOH)JEF
\\^^

JOQVU UFYUBSFB TFMFDU
https://gist.github.com/yamoo9/a7d9e95e47453696cd89

OH$MPBLOH4XJUDIOH$MBTT
\\^^
'06$ 'MBTI0G6OTUZMFE$POUFOU
<body data-ng-init="member={name: 'yamoo9', log_in: true, is_visible: true, status: 'failed'}">
<!- Directives & Expressions

ng-cloak [FOUC(Flash Of Unstyled Content)]
ng-switch
ng-class
ng-show
-->
<div class="header-bar" data-ng-clock data-ng-switch="member.log_in">
<div class="notice" data-ng-show="member.is_visible">
.
</div>
<div class="log_in_success" data-ng-switch-when="true" data-ng-class="{
'success': member.log_in,
'failed': !member.log_in
}">
<p>. {{member.name}}. . :-)</p>
</div>
<div class="log_in_failed" data-ng-switch-when="false" data-ng-class="member.status">
<p> . :-( .</p>
</div>
<div class="sign_up" data-ng-switch-default>
<p> . :-)</p>
</div>
</div>
https://gist.github.com/82bc2abf21c6b88b83d1
</body>
Data &
Repetition
ngRepeat
Repetition - ngRepeat

OH3FQFBU
https://gist.github.com/yamoo9/6b6ed02603d4444a139f
Filters
Sorting &
Formatting &
Filtering Data
Filters & Pipe | Formatting Data

1JQF ]
'JMUFSJOH

'PSNBUUJOH
4PSUJOH

'2015-12-08'
'PSNBUUJOH
currency
filter
date
json
orderBy
limitTo
number
lowercase
uppercase
{{ 10900 | currency:'\\' }}
{{ '2015-12-08' | date:'yyyy MM dd' }}
'PSNBUUJOH
2015 12 8
Sorting Data
PSEFS#Z
{{ Expression | orderBy:key':true }}
KTPO
{{ Expression | json }}
<div class="container" data-ng-init="categories=[

{
'name' : 'DOM',
'description' : ''
},
{
'name' : 'Javascript',
'description' : ''
},
{
'name' : 'Node.js',
'description' : ' '
},
{
'name' : 'AngularJS',
'description' : ' SPA '
}
]">
<h2 class="headline">AngularJS <code>ngRepeat</code> </h2>
<ul class="ngRepeat-demo">
<li data-ng-repeat="category in categories | orderBy:'name'">

<h4>{{category.name}}</h4>
<p data-ng-bind="category.description"></p>
</li>
4PSUJOH
</ul>
Filtering Data
MJNJU5P
{{ Expression | limitTo:3 }}
GJMUFS
{{ Expression | filter:model }}
TFBSDIOBNF
TFBSDIEFTDSJQUJPO
'JMUFSJOH
<input type="search" data-ng-model="search">

<ul class="ngRepeat-demo">
<li data-ng-repeat="category in categories | filter:search | limitTo:2 | orderBy:'-name'">
<h4>{{category.name}}</h4>
<p data-ng-bind="category.description"></p>
</li>
</ul>
Dynamic Sorting with orderBy Filter

PSEFS#Z 4PSUJOH

TPSU#Z SFWFSTF
<table class="ngRepeat-demo" data-ng-init="sortBy='name'">

<caption class="a11y-hidden"> </caption>
<tr>
<th>

<button type="button" data-ng-click="sortBy='name'; reverse=!reverse; name_r=!name_r">
<span data-ng-show="name_r"></span>
<span data-ng-hide="name_r"></span>
</button>
</th>
<th>

<button type="button" data-ng-click="sortBy='description'; reverse=!reverse; desc_r=!desc_r">
<span data-ng-show="desc_r"></span>
<span data-ng-hide="desc_r"></span>
</button>
</th>
</tr>
<tr data-ng-repeat="category in categories | orderBy:sortBy:reverse">
<td>{{category.name || uppercase}}</td>
<td>{{category.description}}</td>
</tr>
</table>
Summary
7JFX
%JSFDUJWFT&YQSFTTJPOT'JMUFST
.PEVMF
$POGJH
3PVUFT
7JFX
6*

%JSFDUJWF
)5.-
7JFX
%0.
TDPQF
.PEFM
$POUSPMMFS
%BUB
)5.-
%JSFDUJWF
'JMUFST

'BDUPSZ
Controller / Scope / Module
Point
.PEVMF$POUSPMMFS4DPQF
.PEVMF
$POGJH
3PVUFT
7JFX
%JSFDUJWF
TDPQF
$POUSPMMFS
'BDUPSZ
Architecture
Patterns
Architecture Patterns
"OHVMBS+4 .7$ .77.

.PEVMBSJUZ
'MFYJCJMJUZ
5FTUBCJMJUZ
.BJOUBJOBCMF

.PEFM
7JFX(6*
$POUSPMMFS7JFX.PEFM.PEFM7JFX
"OHVMBS+4 .7$ .77.

.PEVMBSJUZ
'MFYJCJMJUZ
5FTUBCJMJUZ
.BJOUBJOBCMF

https://www.youtube.com/watch?v=ElHslw5wMWg

.PEFM
7JFX(6*
$POUSPMMFS7JFX.PEFM.PEFM7JFX
MVC + MVVM = MV*
.PEFM
4FSWJDFT
$POUSPMMFS
*OQVU3FRVFTU
VM
TDPQF

%JSFDUJWFT
7JFX3FTQPOTF
7JFX
Controller
Role of Controllers
Controller
7JFX
#SBJO

7JFX

7JFX

TDPQF 7.
7JFX
*OUFSBDUJPO
$scope
TDPQF7JFX$POUSPMMFS .FEJBUPS
7JFX
TDPQF
$POUSPMMFS
*OKFDUFE

7JFX.PEFM

7JFX
TDPQF
$POUSPMMFS
Define Controller
$POUSPMMFS
TDPQF
TDPQF 7JFX

// AngularJS - (Controller)
function myController( $scope ) {
// $scope -
$scope.data = [
{
'name' :
'description' :
},
{
'name' :
'description' :
}
];

TDPQF
'DOM',
'DOM = '
'Javascript',
''
// $scope -
$scope.saveData = function( data ) {
$scope.data.push( data );
}
}

AngularJS 1.2.x !
ngController - Directive
$POUSPMMFS
TDPQF
TDPQF 7JFX

<div class="container" data-ng-controller=myController"> ... </div>
<script>
// AngularJS - (Controller)

function myController( $scope ) {
// $scope -
$scope.sortBy = 'name';
$scope.reverse = false;
$scope.categories=[
{
'name' : 'DOM',
'description' : 'DOM = '
},
{
'name' : 'Javascript',
'description' : ''
},
{
'name' : 'Node.js',
'description' : ' Javascript '
},
{
'name' : 'AngularJS',
'description' : 'Javascript SPA '
}
];
// $scope -
$scope.doSort = function(prop) {
$scope.sortBy = prop;
$scope.reverse = !$scope.reverse;
if (prop === 'name') {
$scope.name_reverse = !$scope.name_reverse;
} else {
$scope.desc_reverse = !$scope.desc_reverse;
}
}
}
</script>
AngularJS 1.3.x
.
Controller with as
$POUSPMMFS
TDPQF WJFX

UIJTBTUIJT
Module
Role of Modules
Module
.PEVMF
$POUBJOFS
$POUSPMMFST

3PVUFT

'BDUPSJFT
4FSWJDFT

%JSFDUJWFT

'JMUFST
Module
.PEVMF
$POUBJOFS
<html lang="ko-KR" data-ng-app="moduleName">
.PEVMF
$POGJH
'JMUFS
%JSFDUJWF
'BDUPSZ
4FSWJDF
3PVUF
1SPWJEFS
$POUSPMMFS
Create a Module
BOHVMBSNPEVMF

<> *OKFDUJOH%FQFOEFODJFT
// AngularJS -
var myApp = angular.module('myApp', []);
"OHVMBS+4
// AngularJS - ( )
var myApp = angular.module('myApp', ['modele1', 'module2']);
Adding a Controller - 1
$POUPSMMFS
.PEVMF

myApp.controller('myController', function($scope) {...});
$POUPSMMFS
.PEVMF

BOHVMBSNPEVMF

angular.module('myApp', []);
angular.module(myApp')
BOHVMBSNPEVMF
.myApp.controller(myController', function($scope) {...});
$POUPSMMFS
.PEVMF

angular.module('myApp', []);
function myController($scope) {...}

angular.module('myApp').controller('myController', myController);
Avoiding String Compress on Build Process

#VJME

<>

myApp.controller('myController', ['$scope', function($scope) {...}]);
<>

(function(){
function myController($scope) {...}
angular.module('myApp').controller('myController', myController);
myController.$inject = ['$scope'];
})();
<>
Summary
.PEVMF$POUSPMMFS4DPQF
.PEVMF
$POGJH
"OHVMBS+4.7$.77..7
3PVUFT
$POUSPMMFS
7JFX

7JFX
TDPQF 7JFX
TDPQF
$POUSPMMFS
%BUB
)5.-
"OHVMBS+4
%JSFDUJWF
'BDUPSZ
Factories / Services
Point
'BDUPSZ4FSWJDF
.PEVMF
$POGJH
3PVUFT
7JFX
%JSFDUJWF
TDPQF
$POUSPMMFS
'BDUPSZ
Factory/Service
Overview Factory/Service
Factory / Services
"OHVMBS+4 'BDUPSZ
TFSWJDF

#VJMUJO

"KBY$BMMT

#VTJOFTT3VMFT

$BMDVMBUJPOT

4IBSF%BUBCFUXFFO$POUSPMMFST
Factory vs Services
"OHVMBS+4
1SPWJEFS
$POUBOU
"OHVMBS+4
<1SPWJEFS 'BDUPSZ 4FSWJDF $POTUBOU 7BMVF>

'BDUPSZ
SFUVSO

4FSWJDF
UIJT'BDUPSZ 1SPUPUZQF

$POTUBOU

7BMVF
Factory / Services
'BDUPSZ
4FSWJDF
.PEVMF
$POGJH
'JMUFS
%JSFDUJWF
'BDUPSZ
4FSWJDF
3PVUFT
$POTUBOU
7BMVF
1SPWJEFS
$POUSPMMFS
Built-in Services
"OHVMBS+4 #VJMUJO4FSWJDFT
IUUQ
XJOEPX
R
UJNFPVU
MPDBUJPO
GJMUFS
JOUFSWBM
SPPU4DPQF
MPH
Factory
Creating & Injecting a Factory
About Factory
'BDUPSZ

BOHVMBSNPEVMFGBDUPSZ

'BDUPSZ

3FVTBCMF5BTLT

4IBSF$PEF4UBUF
Creating a Factory
'BDUPSZ

(function(angular){
'use strict';
//
var customFactory = function() {
// ...
//
return {
// ...

};
};
//

angular
.module('app')
.factory('customFactory', customFactory);
})(window.angular);
Injecting a Factory
'BDUPSZ

(function(angular){

'use strict';
var customController = function($scope, customFactory) {

// customFactory
$scope.customers = customFactory.getCustomers();
// ...
};
customController.$inject(['$scope', 'customFactory']);
angular.module('app').controller('customController', customController);
})(window.angular);
Service
Creating a Service
About Service
4FSWJDF
SFUVSOUIJT

BOHVMBSNPEVMFTFSWJDF

Creating a Service
TFSWJDF

(function(angular){
'use strict';
//
var customService = function() {
var customers = [];
// this
this.getCustomers = function() {
UIJT
// ...
};
};
//

angular
.module('app')
.service('customService', customService);
})(window.angular);
UIJT'BDUPSZ

Injecting a Service
4FSWJDF

(function(angular){

'use strict';
var customController = function($scope, customService) {

// customService
$scope.customers = customService.getCustomers();
// ...
};
customController.$inject(['$scope', 'customService']);
})(window.angular);
Values
Application Values
Values
7BMVFT
.PEVMF
$POGJH
'JMUFS
%JSFDUJWF
'BDUPSZ
4FSWJDF
3PVUFT
$POTUBOU
7BMVF
1SPWJEFS
$POUSPMMFS
Value vs Constant
WBMVFDPTOUBOU $POGJH
*OKFDU

(function(angular){
'use strict';
// angular.module
var app = angular.module('app', []);
// angular.module.value(key, value)
BOHVMBSNPEVMFDPOGJH
*OKFDU

app.value(app_settings', {...});

// angular.module.contant(key, value)
app.constant('version', '1.1.2');
})(window.angular);
BOHVMBSNPEVMFDPOGJH

*OKFDU

Ajax Calls
Ajax calls from a Factory/Service
Ajax & AngularJS Service

IUUQ "KBY

IUUQ
IUUQ "KBY

9.-)UUQ3FRVFTU
"TZODISPOPVT3FRVFTU

)551 4IPSUDVUNFUIPET

IUUQIFBE
IUUQHFU
IUUQQPTU
IUUQQVU
IUUQEFMFUF
IUUQKTPOQ
using $http Service

IUUQ *OKFDU

IUUQ
(function(angular){
'use strict';
IUUQ

//
var customFactory = function( $http ) {
var factory = {};
factory.getCustomers = function() {
IUUQ
return $http.get(api/customers);
};
returnfactory;
};
angular
.module('app')
.factory('customFactory', customFactory);
})(window.angular);
Accessing $http Response Data

IUUQ
REFGFSSFEQSPNJTF"1*T
UIFO
TVDDFTT
FSSPS

(function(angular){
'use strict';
var customController = function($scope, customFactory) {

customFactory.getCustomers()
.success(function( customers ){
$scope.customers = customers; IUUQ
})
.error(function( data, status, headers, config ){
// error
})
};
customController.$inject(['$scope', 'customFactory']);
})(window.angular);
Summary
'BDUPSZ4FSWJDF
.PEVMF
$POGJH
'BDUPSZ
4FSWJDF

3PVUFT
"KBY$BMMT

#VTJOFTT3VMFT
7JFX
$BMDVMBUJPOT
TDPQF
$POUSPMMFS
4IBSF%BUBCFUXFFO$POUSPMMFST
BOHVMBSNPEVMFGBDUPSZ
TFSWJDF

%JSFDUJWF
*OKFDU

'BDUPSZ
Routing
Point
3PVUFT$POGJHVSBUJPO
.PEVMF
$POGJH
3PVUFT
7JFX
%JSFDUJWF
TDPQF
$POUSPMMFS
'BDUPSZ
Routes
Navigation Each Page
Routes
3PVUFT
AngularJS - SPA
VIEW 1
VIEW 2
/view2
/view3
/view1
VIEW 4
VIEW 3
/view4
Routes
3PVUFT$POUSPMMFS7JFX5FNQMBUF
3PVUF
7JFX5FNQMBUF
WJFX
WJFXIUNM
/VIEW 1
$POUSPMMFS
WJFX$POUSPMMFSKT
3PVUF
7JFX5FNQMBUF
WJFX
WJFXIUNM
/VIEW 3
$POUSPMMFS
WJFX$POUSPMMFSKT
Routes
3PVUFT
OH3PVUF NPEVMF

3PVUFT $POGJHVSBUJPO
SPVUF1SPWJEFS
Routes & Module

3PVUFTBOHVMBSNPEVMFDPOGJH

SPVUF1SPWJEFS
angular.module.config()
3PVUF
when
7JFX
WJFX
WJFXIUNM
/VIEW 2
$POUSPMMFS
WJFX$POUSPMMFSKT
$routeProvider
3PVUF
7JFX
WJFX
when
WJFXIUNM
/VIEW 4
$POUSPMMFS
WJFX$POUSPMMFSKT
ngRoute
angular Route Module
ngRoute Module
OH3PVUFBOHVMBSSPVUFKT
angular-route.js
angular.js
var myApp = angular.module('myApp', ['ngRoute']);
Route = View + Controller

7JFX $POUSPMMFS
angular-route.js
ordersController.js
angular.js
app.js
DPOGJH
orders.html
app/
app.js
controllers/
customersController.js
ordersController.js
views/
customers.html
orders.html
index.html
js/
vender/
angular-route.js
angular.js
Routes Config
Configuration Routes
Configuring Routes
BOHVMBSNPEVMFDPOGJH

var myApp = angular.module('myApp', [ngRoute']);
.
app
myApp.config(function( $routeProvider ) {
// Routes
});
SPVUF1SPWJEFS
app.js
controllers
view1Controller.js
views
view1.html
css
app.css
index.html


$routeProvider
.when('/', {
'templateUrl' : 'app/views/view1.html',
'controller' : 'view1Controller'
});
});
NZ"QQDPOUSPMMFS
js
vender
angular-route.js
angular.min.js
sass
style.sass
Configuring Routes

XIFO

PUIFSXJTF
SFEJSFDU5P

var myApp = angular.module('myApp', ['ngRoute']);
// $routeProvider .
// Routes
$routeProvider
.when('/', {
'templateUrl' : '/app/views/view1.html',
})
.when(/view2', {
'templateUrl' : '/app/views/view2.html',
})
.otherwise({
redirectTo: '/'
});
});
Route Parameters
1BSBNFUFS

3PVUF1BSBNFUFS
.when('/editView/:layoutId', {
'templateUrl' : '/app/views/edit-view-layout.html',
'controller' : 'viewEditController'
})
/editView/94
1BSBNFUFS
SPVUF1BSBNT
var myApp = angular.module('myApp');

myApp.controller('view1Controller', function($scope, $routeParams) {
$scope.layoutId = $routeParams.layoutId;
});
ngView
angular View Directive
ngView Directive
)5.-5FNQMBUF
OH7JFX
AngularJS - SPA
<div data-ng-view></div>
VIEW 1
*&
DMBTT
<ng-view></ng-view>
Location Config
Configuration Location
Configuring Location
)BTI#BOH
63-
MPDBUJPO1SPWJEFSIUNM.PEF USVF


myApp.config(function( $routeProvider, $locationProvider ) {
// Routes
$routeProvider.when( ... );
// Location
$locationProvider.html5Mode(true);
});
Summary
3PVUFT$POGJHVSBUJPO
.PEVMF
$POGJH
3PVUFT
"OHVMBS+4 3PVUF
)JTUPSZ

TDPQF
7JFX
$POUSPMMFS
7JFX
$POUSPMMFS

OH3PVUF %FQFOEFODZ.PEVMF

SPVUF1SPWJEFSBOHVMBSNPEVMFDPOGJH

%JSFDUJWF
'BDUPSZ
SPVUF1BSBNT
Animation
Animation
Animation in AngularJS
Animation in AngularJS
ngAnimate ()
(Hook)
(Directive)
Directives & Animations

OH"OJNBUF %JSFDUJWF

$PNNPO%JSFDUJWF
$VTUPN%JSFDUJWF
OH$MBTT
BOJNBUF 4FSWJDF
OH4IPXOH)JEF
OH*ODMVEF
OH3FQFBU
OH4XJUDI
OH7JFX
Directives & Supported Animations

$PNNPO%JSFDUJWF
4VQQPSUFE"OJNBUJPOT
OH$MBTT
"EE3FNPWF
OH4IPXOH)JEF
"EE3FNPWF
OH*ODMVEF
&OUFS-FBWF
OH3FQFBU
&OUFS-FBWF.PWF
OH4XJUDI
&OUFS-FBWF
OH7JFX
&OUFS-FBWF
DEMO &
Resources
Animation Example
"OHVMBS+4"OHVMBS+4OH"OJNBUJPOCZ"VHVT
AngularJS - SPA
IUUQBVHVTHJUIVCJPOH"OJNBUF
Animation Example
"OHVMBS+4"OJNBUFDTT
AngularJS - SPA
IUUQEBOFEFOHJUIVCJPBOJNBUFDTT
Animation Example
"OHVMBS+4"OJNBUJPOJO"OHVMBS+4
AngularJS - SPA
IUUQXXXZFBSPGNPPDPNBOJNBUJPOJOBOHVMBSKTIUNM
ngAnimate
angular Animation Module
ngAnimate Module
OH"OJNBUFBOHVMBSBOJNBUFKT
angular-animate.js
angular.js
var myApp = angular.module('myApp', ['ngAnimate']);
Define Anim
Define Animation in CSS
Animation Techniques
"OHVMBS+4$44 +BWBTDSJQU
CSS
Transitions
CSS
Animations
Javascript
Animations
Defining Animations with CSS

$44 5SBOTJUJPO "OJNBUJPO

CSS
Transitions
.trans {
transition: color 0.345s cubic-bezier(0.550, 0.085, 0.680, 0.530);
}
CSS
Animations
.anim {
animation: slide-up 0.29s cubic-bezier(0.175, 0.885, 0.320, 1.275);
}
CSS Transition Example

$445SBOTJUJPO#FGPSF "GUFS

CSS
Transitions
.fade-in.ng-enter,
.fade-in.ng-leave {
transition: all 0.35s ease;
position: relative;
left: 0;
top: 0;
height: 400px;
}
.fade-in.ng-enter {
z-index: 100;
top: 0;
opacity: 1;
}
.fade-in.ng-leave {
z-index: 101;
top: -400px;
opacity: 0;
}
CSS Animation Example

$44"OJNBUJPO _

CSS
Animations
.fade-in.ng-enter {
animation: fade-in 0.45s ease;
}
@keyframes fade-in {
from {
z-index: 100;
top: -400px;
opacity: 0;
}
to {
top: 0px;
opacity: 1;
}
}
.fade-in.ng-leave {
animation: fade-out 0.45s ease;
}
@keyframes fade-out {
from {
z-index: 101;
top: 0px;
opacity: 1;
}
to {
top: -400px;
opacity: 0;
}
}
Define Animation class style module

"OHVMBS+4OH"OJNBUFDMBTT
AngularJS - SPA
IUUQTHJTUHJUIVCDPNZBNPPGFGC
class Attribute
Referencing by Class Attribute
Animations Referenced by class Attribute

DMBTT
<div data-ng-view class="fade-in"></div>
$44
<div data-ng-show="list_view_enabled" class="toggle-anim"></div>
<ul data-ng-repeat="item in list" class="repeat-anim"></ul>
Summary
"OHVMBS+4$44 +BWBTDSJQU

ngAnimate ()
(Hook)
(Directive)
OH"OJNBUF

OH7JFX OH3FQFBU OH*ODMVEF

$445SBOTJUJPO "OJNBUJPO

Advanced Directives
Directives
Built-in & 3rd Party
Role of Directives
%JSFDUJWFT

%0. .BSLFS
%0.%0.&MFNFOU
"OHVMBS+4)5.- DPNQJMFS
"UUBDI4QFDJGJFE#FIBWJPS

AngularJS - SPA
)5.-
<div data-my-directive> </div>

docs.angularjs.org/guide/bootstrap
Role of Directives
%JSFDUJWFT

%0..BOJQVMBUJPO

&WFOUT)BOEMJOH

$44 .PEJGZ$44

%0.*UFSBUFUISPVHI%BUB

7BMJEBUF%BUB

#JOEJOH%BUB
Role of Directives
"OHVMBS+4 /BUJWF%JSFDUJWFT
"QQMJDBUJPO
%BUB#JOEJOH
%0.
#FIBWJPS
ngApp
ngInit
ngCloak
ngClick
ngController
ngModel
ngRepeat
ngMouse*
ngBind
ngView
ngKey*
ngHref
ngIf
ngChecked
ngSrc
ngSwitch
ngChange
ngMaxlength
ngStyle
ngShow
ngBlur
ngMinlength
...
ngHide
...
'PSNT
ngPattern
ngDisabled
ngRequired
...
ngSubmit
...
3rd Party Directives

SE SE1BSUZ%JSFDUJWFT
Custom Directive
User Define Directive
Directive Categories
%0.%SJWFO%JSFDUJWFT
%0.
#FIBWJPS%SJWFO%JSFDUJWFT
%0.
%BUB%SJWFO%JSFDUJWFT

Custom Directives
6TFS%FGJOF%JSFDUJWF

EJSFDUJWF
%%0

)5.-

var app = angular.module('app');
// (Custom Directive)
app.directive('customDirective', function() {
return {
'template': '<p>Angular JS Custom Directive</p>'
};
});

<custom-directive></custom-directive>
<div custom-directive></div>

<div data-custom-directive></div>
DDO
Directive Types

&
MFNFOU "
UUSJCVUF $
MBTTDP .
NFOU

-->
-->
-->
-->
Template Scope
5FNQMBUF
)5.-
.FSHF
4DPQF
%"5"
Directive Building Blocks

DPNQJMF%%05FNQMBUF4DPQF
4DPQF
5FNQMBUF
TDPQF$POUSPMMFS
)5.-
%JSFDUJWF%FGJOJUJPO0CKFDU
DPNQJMF
$compile
DPNQJMF 1SPWJEFS

)5.-%0.

https://docs.angularjs.org/api/ng/service/$compile
$compile
DPNQJMF 1SPDFTT
5FNQMBUF
)5.-
DPNQJMF
5FNQMBUF
'VODUJPO
)5.-
4DPQF
TDPQF$POUSPMMFS
$compile DDO
DPNQJMF%%0 %JSFDUJWF%FGJOJUJPO0CKFDU
DPNQJMF %%0

%%0

%0.

DDO Properties
SFTUSJDU
TDPQF
UFNQMBUF
UFNQMBUF6SM
DPOUSPMMFS
MJOL
aunglar.module('app')
.directive('customDirective', function() {
return {
'restrict': 'EA',
&
"
'scope': {},
'template': '<div> </div>'
'controller': controller,
'link': function(scope, element, attrs) {}
};
});
Summary

"OHVMBS+4
)5.-
%0.

%%0

Isolate Scope
Share Scope vs Isolate Scope
Scope Inheritance
4DPQF*OIFSJUBODF
SPPU4DPQF
Parent Controller ($scope)
Child Controller ($scope)

Directive
Scope Type
4IBSFE4DPQF
WT *TPMBUF4DPQF
4IBSFE4DPQF
*TPMBUF4DPQF
Controller
Controller
$scope.customers = [];
Directive

VS
9
Directive
$scope.isolated = true;

Shared Scope
4IBSFE4DPQF
var app = angular.module('ScopeApp', []);
app.controller('Controller', ['$scope', function($scope){

$scope.customer = [
'name': 'yamoo9',
'job': 'Instructor'
];
}]);
// ()
app.directive('sharedScope', function() {
return {
'replace': true,
'template': '<div> : {{customer.name}}, : {{customer.job}} </div>'
};
});
<div data-shared-scope> : yamoo9, : Instructor </div>
Isolate Scope
4IBSFE4DPQF
var app = angular.module('ScopeApp', []);
app.controller('Controller', ['$scope', function($scope){

$scope.customer = [
'name': 'yamoo9',
'job': 'Instructor'
];
}]);
9
// ( )
app.directive('isolateScope', function() {
return {
'replace': true,
'scope': {},
'template': '<div> : {{customer.name}}, : {{customer.job}} </div>'
};
});
<div data-isolate-scope> : , : </div>

Local Scope
-PDBM4DPQF!
8BZ#JOEJOH
Controller ($scope)
Directive (scope)
Captain
America
Captain
America
Local Scope
8BZ%BUB#JOEJOH

!-PDBM4DPQF
Controller
$scope.name = yamoo9;
<div data-custom-directive name="{{name}}"></div>
Directive
scope:{ name: @ }
8BZ#JOEJOH$SFBUFE
Local Scope

-PDBM4DPQF
8BZ#JOEJOH
Controller ($scope)
Directive (scope)
Ironman
Captain
America
Ironman
Captain
America
Local Scope
8BZ%BUB#JOEJOH
-PDBM4DPQF
Controller
$scope.person = {...};
<div data-custom-directive customer="person"></div>
Directive
scope:{ customer: = }
8BZ#JOEJOH$SFBUFE
Local Scope

-PDBM4DPQF

Controller ($scope)
Directive (scope)
Ironman
Laser Beam
$BMMCDBL
Local Scope

-PDBM4DPQF
Controller
$scope.click = function(){};
<div data-custom-directive action="click()"></div>
Directive
scope:{ action: & }
DMJDL
Summary
*TPMBUF4DPQF
!%0.

scope: {name: @} | <div data-custom-directive name="{{name}}"></div>

scope: {customer: =} | <div data-custom-directive costumer="person"></div>

scope: {action: &} | <div data-custom-directive action=click()></div>
link Function
AngularJS Directive
Directive Categories
%0.%SJWFO%JSFDUJWFT
%0.
#FIBWJPS%SJWFO%JSFDUJWFT
%0.
%BUB%SJWFO%JSFDUJWFT

DDO Properties
SFTUSJDU
UFNQMBUF
UFNQMBUF6SM
TDPQF
DPOUSPMMFS
MJOL
aunglar.module('app')
.directive('customDirective', function() {
return {
'restrict': 'EA',
'scope': {},
'template': '<div> {{ custom_var }} </div>'
'controller': controller,
'link': function(scope, element, attrs, controller) {}
};
});
Link Function Parameters

MJOL
MJOL%0.
angular.module('app')
.directive('linkFunctionDirective', function() {
// link
KR-JUF

var linkFunction = function(scope, element, attritubes, controller) {

// element .
// attributes .
};
// DDO
return {
'link': linkFunction
};
});
jqLite

QY

jqLite or jQuery
K2VFSZBOHVMBS+4 KR-JUFK2VFSZ
BOHVMBSFMFNFOUK2VFSZ FMFNFOUK2VFSZ
BOHVMBSFMFNFOU
K2VFSZ

URL: https://github.com/angular/angular.js/blob/master/src/Angular.js#L1717

JS - AngularJS

Uploaded by

Document Information

Copyright

Available Formats

Share this document

Share or Embed Document

Sharing Options

Did you find this document useful?

Is this content inappropriate?

Copyright:

Available Formats

JS - AngularJS

Uploaded by

Copyright:

Available Formats

AngularJS

Single Page Applications

Single Page Applications

Single Page Applications

Single Page Applications

AngularJS - Full Featured SPA Framework

Hosted Version (CDN)

AngularJS - STEP 2-1

AngularJS - STEP 2-2

AngularJS - STEP 3-1

AngularJS - STEP 3-2

One-Way Data Binding

Two-Way Data Binding

<input type="text" id="twb">

<input type="text" data-ng-model="twb">

AngularJS - Key Players

AngularJS - Big Picture

AngularJS - Factory / Service

AngularJS - Big Picture

Directives & Expressions

Directives & Expressions

Directives & Expressions

<body data-ng-init="member={name: 'yamoo9', log_in: true, is_visible: true, status: 'failed'}">

<!- Directives & Expressions

Filters & Pipe | Formatting Data

{{ '2015-12-08' | date:'yyyy MM dd' }}

<div class="container" data-ng-init="categories=[

<input type="search" data-ng-model="search">

Dynamic Sorting with orderBy Filter

<table class="ngRepeat-demo" data-ng-init="sortBy='name'">

Controller / Scope / Module

<div class="container" data-ng-controller=myController"> ... </div>

<html lang="ko-KR" data-ng-app="moduleName">

var myApp = angular.module('myApp', []);

myApp.controller('myController', function($scope) {...});

.myApp.controller(myController', function($scope) {...});

function myController($scope) {...}

Avoiding String Compress on Build Process

var myApp = angular.module('myApp', []);

var myApp = angular.module('myApp', []);

"OHVMBS+4.7$ .77..7

var customController = function($scope, customFactory) {

var customController = function($scope, customService) {

Ajax & AngularJS Service

using $http Service

Accessing $http Response Data

var customController = function($scope, customFactory) {

Routes & Module

var myApp = angular.module('myApp', ['ngRoute']);

Route = View + Controller

var myApp = angular.module('myApp', [ngRoute']);

var myApp = angular.module('myApp', [ngRoute']);

var myApp = angular.module('myApp', ['ngRoute']);

var myApp = angular.module('myApp');

var myApp = angular.module('myApp', [ngRoute']);

Directives & Animations

Directives & Supported Animations

var myApp = angular.module('myApp', ['ngAnimate']);

Defining Animations with CSS

CSS Transition Example

CSS Animation Example

Define Animation class style module

Animations Referenced by class Attribute

<div data-ng-view class="fade-in"></div>

"OHVMBS+4.7$.77..7