MC LC

CHNG I: TNG QUAN V ANGULAR JS FRAMEWORK ......................1

1.1. Ngn ng lp trnh web JavaScript ............................................................1
1.1.1. Lch s pht trin .....................................................................................1
1.1.2. Javascript l g? ........................................................................................1
1.1.3. Javascript c th lm c nhng g?......................................................1
1.2. Tng quan v AngularJs framework ..........................................................1
1.2.1 Lch s pht trin ......................................................................................1
1.2.2. Angular JS l g? ......................................................................................3
1.2.3. Cc tnh nng chnh .................................................................................3
1.2.4. c trng..................................................................................................4
1.2.5. M hnh MVC ..........................................................................................4
1.2.6. SPA Single Page Application ...............................................................5
CHNG II: ANGULAR JS FRAMEWORK ....................................................6
2.1. Ti sao phi s dng AngularJs? ................................................................6
2.2. AngularJs c lp trnh nh th no?......................................................6
2.2.1. Cai t AngularJs .....................................................................................6
2.2.2. V du n gian..........................................................................................7
2.2. Cac thanh phn cua AngularJs ...................................................................8
2.2.1 Angular Template .....................................................................................8
2.2.2. Modules ....................................................................................................9
2.2.3. Scope ......................................................................................................13
2.2.4. Model .....................................................................................................13
2.2.5. Controller ...............................................................................................13
2.2.6.Expression (Biu thc) ...........................................................................14
2.2.7. Filters (B loc) .......................................................................................15
2.2.8. Directives ...............................................................................................16
2.2.9. Services ..................................................................................................18
2.2.10. Multiple Views and Routing ................................................................19
2.2.11. Form validation ....................................................................................22

2.3. Lp trnh AngularJS phia server vi Node.js ..........................................23

2.3.1.Node.js l g?...........................................................................................23
2.3.2.Node.js c th lam c nhng g? ........................................................23
2.3.3. Block code v Non-block code ..............................................................23
2.3.4.ng dung u tin ...................................................................................24
2.4. Cng c lp trnh vi AngularJS...............................................................25
2.4.1 Yeoman ...................................................................................................25
2.4.2. WebStorm ..............................................................................................26
2.5. Khi chy ng dng....................................................................................27
2.6. Testing and Debug ......................................................................................27
2.6.1. Karma .....................................................................................................27
2.6.2. Cai t Karma ........................................................................................27
2.6.3. Test vi Karma.......................................................................................27
TI LIU THAM KHO .....................................................................................29

Tim hiu v AngularJS

CHNG I: TNG QUAN V ANGULAR JS FRAMEWORK

1.1. Ngn ng lp trnh web JavaScript
1.1.1. Lch s pht trin
- c pht trin bi Brendan Eich ti Hng truyn thng Netscape vi ci tn u tin
Mocha, ri sau i tn thnh LiveScript, v cui cng thnh JavaScript.
- JavaScript c b sung vo trnh duyt Netscape bt u t phin ban 2.0b3 ca trnh
duyt nay vao thng 12 nm 1995. JavaScript c b sung vo trnh duyt Internet
Explorer bt u t Internet Explorer phin ban 3.0 c pht hanh thng 8 nm 1996.
1.1.2. Javascript l g?
- JavaScript l mt ngn ng lp trnh kch ban da trn i tng c pht trin t cc
nim nguyn mu. Ngn ng nay c dng rng ri cho cc trang web, nhng cng c
dng to kha nng vit script s dung cc i tng nm sn trong cc ng dung.
1.1.3. Javascript c th lam c nhng g?
- Trn trnh duyt, rt nhiu trang web s dung JavaScript thit k trang web ng v
mt s hiu ng hnh anh thng qua DOM. JavaScript c dng thc hin mt s tc
vu khng th thc hin c vi ch HTML nh kim tra thng tin nhp vo, t ng thay
i hnh anh ...
- Bn ngoi trnh duyt, JavaScript c th c s dung trong tp tin PDF ca Adobe
Acrobat va Adobe Reader. iu khin Dashboard trn h iu hnh Mac OS X phin ban
10.4 cng c s dung JavaScript.

1.2. Tng quan v AngularJs framework

1.2.1 Lch s pht trin
- D n AngularJS c bt u t nm 2009, do lp trnh vin Misko Hevery ti Google
vit ra. Misko va nhm lc nay ang tham gia vao 1 d n ca Google tn l Google
Feedback. Vi AngularJS, Misko rt ngn s dng code front-end t 17000 dng cn
ch khoang 1500. Vi s thnh cng , i ng ca d n Google Feedback quyt nh

Nguyn Minh Sang

Tim hiu v AngularJS

pht trin AngularJS theo hng m ngun m. Theo thng s t Github m mnh thy,
hin ti d n AngularJS ang c gn 11000 ngi theo di va hn 2000 lt fork.
- Cng ngh HTML h tr tt cho cc trang web tnh, kiu nh trc nm 2000 vy. Khi
bn xy dng 1 trang web vi PHP, Node/Express, hay Ruby thi n cng ch l mt trang
web tnh vi ni dung c thay i khi bn gi request v my ch, my ch s render 1
trang vi ni dung tng ng. Tuy nhin moi th thay i nhiu t s pht trin ca
HTML5, nht l khi c s chng lng t nhng ng ln nh Google, Yahoo, Facebook, va
s tp hp ng ao ca cng ng m ngun m.
- Douglas Crockford, ngi c bit n nhiu qua JSON va JSLint dng s chnh
lch v dy gia 2 cun sch "Javascript: The definitive guide" v "Javascript: The good
parts" chm bim 1 cch hai hc v JavaScript.

- Tuy nhin, s thnh cng ca jQuery khin JavaScript c nhiu ngi yu thch v
tnh n gian v d s dung. Vic pht trin 1 website s dung AJAX th khng kh, bn
c th dng jQuery lm vic ny vi $.ajax tuy nhin lm th nao xy dng mt phn
mm c th m rng, d test, nng cp v bao tr th khng h n gian v ban thn
JavaScript khng c thit k ngay t u lm nhng vic nay. Do s ra i ca
nhng framework h tr lp trnh vin xy dng ng dung web 1 cch c h thng ra
i nh Sencha, Ember, Knockout, Backbone, va AngularJS.

Nguyn Minh Sang

Tim hiu v AngularJS

1.2.2. Angular JS l g?
- Angular l framework javascript mnh m. Angular tng cng HTML cho cc ng dung
web. N c chc nng giam bt qu trnh pht trin ng dung web. T nhiu nm trc,
khi HTML mi bt u, n c d nh xy dng trang web hoc c th ni la mt
cch hin th ti liu tnh, khng xy dng mt ng dung web ng. By gi, hy
tng tng nu HTML ln u tin c dng xy dng cc ng dung web ng,
l Angular. Angular l nhng g HTML s c c nu n c thit k xy dng cc
ng dung web . Li giai thch ny c th kh hiu nhng khi oc tip v sau bn s ngc
nhin vi nhng g Angular c th lm v s hiu ngha nay.
1.2.3. Cac tinh nng chinh
- Hai cch lin kt d liu trong Angular l kha nng thay i gi tr thuc tnh ca i
tng, ng thi giao din ngi dng a ra s thay i ngay ti thi im , va
ngc li. V du, nu bn c thuc tnh ca mt i tng goi l "Page.Title ', mi ln thay
i gi tr' Page.Title, giao din ngi dng t ng cp nht v hin th gi tr mi ca
'Page.Title. V nu bn nhp vo trong giao din ng dung ngi dng ca bn, n c th
cp nht giao din ngi dng va cng cp nht thuc tnh ca i tng. Tt ca u c
x l bi Angular do khng cn phai vit ging nh trong mt s framework javascript
khc. Nhng g cn lm ch n gian la xc nh model ca chng ta, v by gi bt c khi
no mt model c thay i, n s thay i bt c ni nao n c t, c th l trong
i tng cu th hoc trong cc lp i din. Model trong Angular ch l cu trc javascript
c r rang, khng c gi l mt nhng n li rt hu ch.
- Tnh nng mi thc s la c im to nn mt khoang cch khc nhau ln gia Angular
v bt k framework javascript khc. Directives la cp n mt tnh nng m rng
ngha ca t HTML, ng thi cng c th c xem nh la mt cch ch cho trnh
duyt mo mi ca bn. Chng ta bit v header trong HTML5, la i din cho mt tiu
nhng n ch l phn t tnh. Mc d HTML c th c nhiu th , nhng n khng
mnh to ra mt ng dung web p. Vi c im ch dn , chng ta c th to ra t
vng HTML mi trnh duyt hiu n c ngha la gi va n nn lam gi. V du vi Angular
chng ta c th to ra th nh sau <draggable> drag me </ draggable > . Cc vn ban bn
Nguyn Minh Sang

Tim hiu v AngularJS

trong tag draggable by gi s tr thnh draggable trong trnh duyt, sau ch cn vit
mt nh ngha ch dn draggable trong ng dung Angular ca chng ta la xong.y la mt
v du n gian ca Angular, n c th lm rt nhiu th hu ch hn. Va n khng ch gii
hn mt phn t html m c sn thc thi cc thuc tnh, cc lp hoc cc ch thch html.
Directives trong Angular khc vi directtives to bi html ch chng c th thc hin
nhiu hanh vi ng hn.
- Nhiu framework cn c template nhng Angular template li ch l html.
- Dependency injection lm cho ng dung Angular d dang hn pht trin, chng ta c
th sp xp m (code) thnh cc module. Bng cch ny, chng ta c th to ra cc thnh
phn ti s dung m c th c goi v sau, bt c khi no cn thit. tng nay la c
bit tt l khi ng dung m rng ln hn va cn phai c m rng, d dng bao tr v
kim chng. Dependency injection l mt cch ghp cc on m code vi nhau, iu
nay i hi phai phn chia m code theo cc chc nng ring bit nh service, controller,
hoc provider nhng khng gii hn chng.
1.2.4. c trng
- Kin trc MVC, Two-way binding, Dynamic templates, Expressions, Modules, Scopes,
Dependency injection, Directives, Routing, Services, Filters, Form validation, Testing in
mind.
1.2.5. M hnh MVC

Nguyn Minh Sang

Tim hiu v AngularJS

- M hnh MVC (Model - View - Controller) l mt kin trc phn mm hay m hnh
thit k c s dung trong k thut phn mm. N gip cho cc developer tch ng dung
ca ho ra 3 thnh phn khc nhau Model, View v Controller. Mi thnh phn c mt
nhim vu ring bit va c lp vi cc thnh phn khc.
- M hinh MVC c gii thiu t nhng nm 70 nh mt phn ca Smalltalk, nhng i
vi nn tang web, th n mi c thnh hnh gn y.
- tng ng sau MVC la chia r 3 thnh phn chnh l model(x l, truy xut
database), view(giao din), v controller(iu hng yu cu t ngi dng).
- MVC th hin tnh chuyn nghip trong lp trnh, phn tch thit k. Do c chia thnh
cc thnh phn c lp nn gip pht trin ng dung nhanh, n gian, d nng cp, bao tr.
i vi Angular, View s l DOM, Controller l cc lp JavaScript, cn Model s l d
liu c lu thuc tnh ca cc i tng trong JS.
- Sau khi chng kin nhiu tranh lun v MV*, mt tc gia ca Angular tuyn b
AngularJS l mt MVW framework (Model View Whatever, trong Whatever la vit
tt ca whatever works for you).
1.2.6. SPA Single Page Application
- Mt single page application hay cn c goi la single page interface, la mt web app
hay website hin th va vn trn mt mt ca trang web vi muc ch gip ngi dng c
trai nghim ging nh ang dng ng dung trn desktop.
- La ng dung chy bn trong trinh duyt, khng yu cu phai tai li toan b trang web mi
ln s dung.

Nguyn Minh Sang

Tim hiu v AngularJS

CHNG II: ANGULAR JS FRAMEWORK

2.1. Ti sao phi s dng AngularJs?
- Angular c a ra bi Google. Ti sao iu ny quan trong bit ? Nh bn c th
on, Google pht trin cc tai nng va thin tai nh i bng ca ho . Ho thc s bit
nhng tinh t ca trang web v nhng s pht trin ng dung web . t nht l thc t ny
c th cung cp cho ngi dng am bao Angular xut pht t ngi chng ta c th tin
tng . Ngoi ra, nu bn tng s dung san phm ca Google nh Gmail hay Google
Plus, bn s khng ngc nhin vi s tng tc ca chng v ca ajax gi lin tuc moi ni
m khng phai lm mi ton b trang web va s dung Angular kin thc ch yu cn
phai bit trc l Javascript.

2.2. AngularJs c lp trnh nh th nao?

2.2.1. Cai t AngularJs
2.2.1.1. Ti AngularJS

- Truy cp vao trang web https://angularjs.org hoc https://github.com/angular/angular.js

va tai v ban angularjs mi nht. Ban hin mi nht hin ti la 1.2.16.
2.2.1.2. Chen Angular vao ng dng.
* T host AngularJS
<script src="angular.min.js"></script>

- Theo cch nay thi cn phai download angularjs v my va nhng trc tip vao ng dung.
* Dng phin bn c sn trn server cua Google
- Ngoi cch trn ra bn cng c th s dung phin ban nn ca AngularJS c sn trn
server ca Google. S dung cch nay c 2 iu li l tit kim bng thng cho trang web
ca bn v AngularJS s c load nhanh hn nu my ca ngi dng cache
AngularJS.
- Nhng cch nay khng hot ng nu khng c kt ni mng.
<script
src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.0/angular.min
.js"></script>

Nguyn Minh Sang

Tim hiu v AngularJS

2.2.2. Vi d n gin
<!doctype html>
<html lang="en" ng-app>
<head>
<meta charset="utf-8">
<title>Vi du AngularJS </title>
<script src="js/angular.js"></script>
</head>
<body>
<p>Hello {{'World' + '!'}}</p>

</body>
</html>

Phn tich vi d:
ng-app directive:
Directives la cc ty bin gn vao cc DOM (attribute, element name, CSS class )
HTML compiler ca AngularJS c th thm vao hoc bin i DOM element.
<html ng-app>

Ng-app cho bit phm vi hot ng ca AngularJS. Ch th nay cho bit v tr bt u

s dung cc phn t ca AngularJS.
<script src="js/angular.js">

- Chen AngularJs vao ng dung.

<p> Hello {{'World' + '!'}} </p>

Mt c im quan trong ca AngularJs la kha nng binding d liu s dung cp du ngoc

nhon {{}}. on m nay s xut ra d liu la chui Hello World ! ra trinh duyt.

Nguyn Minh Sang

Tim hiu v AngularJS

Trong du ngoc nhon c th cha bin va cc biu thc ton hoc.

<p>1 + 2 = {{ 1 + 2 }}</p>

on m nay s in ln trinh duyt chui 1 + 2 = 3

2.2. Cac thanh phn cua AngularJs

2.2.1 Angular Template
i lc trong qu trinh xy dng h thng, file HTML tr nn phc tp giai quyt vn
ny ta cn chia thnh nhiu phn khc nhau, AngularJS cung cp cho chng ta mt giai
php hu ch la template.
- Angular template la 1 c ta dng declarative (khai bo), cng vi thng tin t Model &
Controller, tr thnh rendered View m User thy trn trnh duyt. N l static DOM, cha
HTML, CSS, v cc thnh phn, thuc tnh ring ca Angular. Cc thnh phn Angular v
cc thuc tnh gip Angular thm cc hnh vi v bin i template DOM thnh dynamic
view DOM.
- Ni 1 cch n gian nht thi template trong AngularJS la HTML voi81 additional
markup.
Trong Angular, chng ta c 2 cch to mt template.
Dng file ngoi:
Chng ta c th dng thm mt file html bn ngoai lm template cho file chnh, v du:
message.html
<h3>Hello, {{name}}!</h3>

Dng script
Chng ta c th tch hp thng template vao file hin hanh thng qua th script vi type la
text/ng-template
<script type="text/ng-template" id="message.html">
<h3>Hello, {{name}}!</h3>
</script>

Nguyn Minh Sang

Tim hiu v AngularJS

Cach s dng template

C nhiu cch s dung template, tuy nhin trong AngularJS c 2 cch thng dung nht
dng template la ng-include va ngRoute (s ni phn sau), v du:
index.html
<!doctype html>
<html ng-app="ExampleModule">
<head>
<script
src="http://code.angularjs.org/1.2.12/angular.min.js"></script>
<script src="script.js"></script>
</head>
<body>
<div ng-controller="ExampleCtrl">
<input type="text" ng-model="name">
<div ng-include src="template_name"></div>
</div>
<script type="text/ng-template" id="message.html">
<h3>Hello, {{name}}!</h3>
</script>
</body>
</html>

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

app.controller('ExampleCtrl', function($scope) { $scope.template_name = 'message.html';
$scope.name = 'World'; });
2.2.2. Modules
Trong cc ng dung thc t, vic phn chia ng dung thnh cc thnh phn khc nhau l
iu cn thit. Di y la li ch ca vic chia nh ng dung:
D dang hn cho vic quan l v khai bo ng dung cng nh kim tra li sau ny
Kha nng ti s dung cng nh tn dung cc 3rd modules
Np tng phn ng dung s nhanh hn la buc phai np ton b ng dung vo ri
mi chy.

Nguyn Minh Sang

Tim hiu v AngularJS

Trong AngularJS, module c h tr trong khai bo ng-app bn cnh khai bo n trong

m ngun script, di y la mt template chun ca angular s dung modules:
<!doctype html>
<html ng-app="myModule">
<head>
<title>Module trong AngularJS </title>
<script src="js/angular.js"></script>
<script src="js/app.js"></script>
</head>
<body>

<p>Vi du n gian v module p>

</body>
</html>

Trong v du nay module c khai bo ngay trong th <html> vi tn la myModule.

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

ng-app="myModule": Khai bo mt angular app l myModule, s dung myModule

c khai bo trong script.
Trong script, angular.module() l hm khai bo cho module.
cp du ngoc [] chnh l mang cc module s c np chung vao chy chung vi
ng dung (module chnh c khai bo trong ng-app).V du:
var app = angular.module('myModule', ['ngRoute', 'ngBootstrap']);

Controller trong module.

Nguyn Minh Sang

10

Tim hiu v AngularJS

Trong v du trn chng ta thy vic khai bo module nh th nao, vy controller khi ng
dung s c khai bo nh th nao. Hy xem v du dui y
index.html
<!doctype html>
<html ng-app="ExampleModule">
<head>
<script
src="http://code.angularjs.org/1.2.12/angular.min.js"></script>
<script src="script.js"></script>
</head>
<body>
<div ng-controller="ExampleCtrl">
Hello, {{ name }}!
</div>
</body>
</html>

script.js
var app = angular.module('ExampleModule', []);
app.controller('ExampleController', function($scope) {
$scope.name = 'World';
});

Method .controller ca module s ng vai tr khai bo thm mt controller cho module.

Function i din cho controller c khai bo binh thng ging nh controller khai
bo bn ngoi module.
- AngularJS s dung Dependence Injection tch bit gia cc modules.
- Cc dependency c a vao t ng bi framework

Nguyn Minh Sang

11

Tim hiu v AngularJS

T chc cua mt ng dng thc t

Thng thng thi t chc mt ng dung thc t s c khi to nh sau

index.html
css
style.css
scripts
module_1.js
module_2.js
module_3.js
main.js

index.html chnh l html documents

style.css chnh la m ngun css cho document
main.js chnh la m ngun cho module chnh
cc files js khc la cc modules c module chnh s dung, nh vy template ca chng
ta s c khai bo li nh sau
index.html
<!doctype html>
<html ng-app="ExampleModule">
<head>
<link rel="stylesheet" href="css/style.css">
<script
src="http://code.angularjs.org/1.2.12/angular.min.js"></script>
<script src="scripts/module_01.js"></script>
<script src="scripts/module_02.js"></script>
<script src="scripts/module_03.js"></script>
<script src="main.js"></script>
</head>
<body>
<div ng-controller="ExampleCtrl">
Hello, Angular's Module!
</div>
</body>
</html>

Nguyn Minh Sang

12

Tim hiu v AngularJS

main.js
var app =
'Module3']);

angular.module('ExampleModule',

['Module1',

'Module2',

app.controller('ExampleController', function($scope) {
$scope.name = 'World';
});

2.2.3. Scope
'$scope' la i tng tham chiu ti model c s dung trong controller. La thanh phn
gn kt gia View va Controller. Scope cung cp cc APIs theo di cc thay i ca
Model : $watch
Scope cung cp cc APIs truyn bt k thay i nao ca Model ti View : $apply
T ng ng b d liu gia Model va View

2.2.4. Model
<input type="text" ng-model="greeting">
{{ greeting }}

Ng-model cho bit i tng nhn gi tr ca input. {{greeting}} s in ra gi tr c nhp

vao input.
2.2.5. Controller
<script>
var demo = angular.module('myApp',[]);

demo.controller('GreetingController', ['$scope', function($scope) {

$scope.greeting = 'Hello World!';
}]);
</script>

Nguyn Minh Sang

13

Tim hiu v AngularJS

To mt module cho ng dung:

<html ng-app="myApp">

- t bin demo cha module myApp ca ng dung.

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

- To mt controller mi cho module nay

demo.controller('GreetingController', ['$scope', function($scope) {
$scope.greeting = 'Hello World!';
}]);

'GreetingController' la tn ca controller, cch t tn nn cha tn va ui Controller

d nhn bit.
['$scope', function($scope)

Vit ham s dung vi bin $scope.

$scope.greeting = 'Hello World!';

Gn gi tr cho bin greeting. in c gi tr ca greeting ra trinh duyt.

<div ng-controller="GreetingController">
{{ greeting}}
</div>

Ng-controller cho bit controller ang hot ng. on m nay s in ra trinh duyt chui
Hello World! c khai bo trong GreetingController.
2.2.6.Expression (Biu thc)
Expression c s dung trong tt ca cc phn ca AngularJs, vi vy cn phai nm vng
v expression va cch ma Angular s dung, tnh ton. N c bao bi k hiu {{ }}. Mt
bin c khi to t controller thng qua $scope cng c coi la mt expression.
- Expression cc snippets ging JS c t trong bindings, kiu nh {{expression}}.
- c x l bi $parse service.

Nguyn Minh Sang

14

Tim hiu v AngularJS

V du: <body> 2 + 2 = {{2 + 2}} </body>

Angular s tnh ton gi tr trong biu thc va xut ra man hinh kt qua 2 + 2 = 4.
2.2.7. Filters (B loc)
Trong Angular, mt filter cung cp mt nh dng d liu hin th ti ngi dng.
Theo tinh thn ca UNIX filters v s dung cc c php tng t | (pipe).
Angular cung cp mt s filter c xy dng sn nh: lowercase, date, number, currency,
limitTo, orderBy
V du:
<input ng-model="userInput"> Uppercased: {{ userInput | uppercase }}

Khi ngi dng nhp d liu vao input thi gi tr s c chuyn thanh ch vit thng.

Mt s filter khc:
{{ "chui ki t vit thng" | uppercase }}
{{ {name: "Sang", age: 21} | json }}
{{ 1304375948024 | date }}
{{ 1304375948024 | date:"MM/dd/yyyy @ h:mma" }}

Kt qu:
CHUI KI T VIT THNG
{ "name": "Sang", "age": 21 }
May 3, 2011
05/03/2011 @ 5:39AM

Nguyn Minh Sang

15

Tim hiu v AngularJS

2.2.8. Directives
Nhng th nh thuc tnh, class, tn ... ca 1 DOM element goi chung l directive.
AngularJS s da vao chng attach cc ch th hoc cc s kin ti DOM element .
Ban thn AngularJS c rt nhiu cc directive : ng-bind, ng-model, ng-click, ngcontroller...
Vic dng directive s giam thiu c s lng th HTML , code HTML nhn s gon
gng v sng sa hn.
AngularJS cung cp cho chng ta 3 loi directive la :
- Directive dng element ( l 1 th HTML ) vit tt l E.
<my-directive></my-directive>

- Directive dng attribute ( thuc tnh ca 1 th HTML ) vit tt l A, dng ny l mc nh.

<div my-directive></div>

- Directive dng class( class CSS ) vit tt l C.

<div class="my-directive"></div>

V du:
Chun b tai liu HTML vi 3 3 loi directive:
<!doctype html>
<html ng-app>
<head>
<title>Vi du AngularJS </title>
<script src="js/angular.js"></script>
</head>
<body>
<div ng-controller="myController">
<my-directive></my-directive>
<div my-directive></div>
<div class="my-directive"></div>
Nguyn Minh Sang

16

Tim hiu v AngularJS

</div>
</body>
</html>

AngularJS
var app = angular.module('demoApp', []);

app.controller('myController', function($scope) {
$scope.customer = {
name: 'Sang',
address: 'Quang Trung, Go Vap'
};
})
.directive('myDirective', function() {
return {
restrict : 'C',
template: 'Name: {{customer.name}}
Address: {{customer.address}}'
// templateUrl: 'directive_template.html'
};
});

Trong myCtrl khai bo thng tin customer vi name va a ch.

Trong myDirective s return ra 1 object cn vic hin th hay d liu vao directive nh
no l vic ca Angular chng ta khng cn quan tm.
Lu : Tn directive phai khai bo dng camelCase cn khi goi th c th dng du -
ngn cch gia cc t hoc nguyn nh khi khai bo cng c
restrict : loi directive mc nh l E(element), C l class, A l attribute
template: Ni dung ca directive

Nguyn Minh Sang

17

Tim hiu v AngularJS

templateUrl: Lin kt ti 1 file template bn ngoi. Template ny cha ni dung ca

directive.
Name: {{customer.name}} Address: {{customer.address}}

Nu restrict:"A" th <my-directive></my-directive> s c d liu

Nu restrict:"C" th <div class="my-directive"></div> s c d liu
Nu restrict:"E" th <div my-directive></div> s c d liu
Khi thay i restrict cn lu infect element xem n d liu vo th no.
2.2.9. Services
AngularJS service l mt object hoc mt function phu trch mt tc vu nao . Vic vit
service ch l vic gom cc on x l logic vo object hoc function d quan l hn.
Cng ging nh m hinh MVC tch phn x l, iu hng v hin th ring bit.
Trong AngularJS service s cha tt ca cc phn x l, Controller nhn yu cu v goi cc
service cn thit x l, Model handle d liu t cc control, View hin th d liu, Route
iu hng request ti controller.
Ban thn AngularJS cng cha nhng service nh: $http, $scope, $window,
$RouteProvider ...
C 2 cach to service trong Angularjs.
Cch 1:
C php:
module.service( 'serviceName', function );

V du:
var module = angular.module('myapp', []);

module.service('userService', function(){
this.users = ['Sang', 'Nguyen', 'Minh'];
});

Nguyn Minh Sang

18

Tim hiu v AngularJS

Cch 2:
C php:
module.factory('userService', function(){

V du:

var fac = {};

fac.users = ['John', 'James', 'Jake'];
return fac;
});

Ca 2 cch u to ra c service.
Vi cch 1 sau khi ng k tn service xong bn s c cung cp 1 th hin ca function
m bn truyn vo module.service.
Vi cch 2 sau khi ng k tn factory, trong function truyn vo trong module.factory cn
return th hin ca i tng to bn trong n.
2.2.10. Multiple Views and Routing
i khi trong mt trang, nhiu khi chng ta ch mun hin th mt phn HTML ng vi
mi chc nng cu th m ta khng cn chuyn i trang, Angular l mt full-stack
framework hiu qua gip chng ta c th lam c vic ny nhanh chng v d dng.
Route l b iu hng cc yu cu t pha ngi dng ti cc controller tng ng x
l da theo cc i s truyn trn thanh url. Route trong AngularJS la thanh phn quan
trong gip AngularJs to c ng dung SPA, chuyn trang ma khng cn tai li trinh
duyt.
Trong AngularJs chng ta s s dung $routeProvider bt cc yu cu. Biu thc route
c tnh t sau du #.

Nguyn Minh Sang

19

Tim hiu v AngularJS

Xt v du
<!doctype html>
<html lang="en" ng-app="demoApp" >
<head>
<meta charset="utf-8">
<title>Vi du AngularJS </title>
<script src="js/angular.min.js"></script>
<script src="js/angular-route.min.js"></script>
</head>
<body>
<div ng-view></div>
</body>
</html>

T phin ban AngularJs 1.0.7 thi Route c tch thanh mt file js ring bit, va s
dung c n ta phai nhng file angular-route.min.js vao ng dung.
Directive ng-view c s dung hin th d liu.
<div ng-view></div>

ng k bin app thanh mt module trong AngularJS va thit lp route c ban. lm

vic vi Route thi bn cn goi v s dung mt extends module ca angular l ngRoute.
var app = angular.module('demoApp', ['ngRoute']);
app.config(['$routeProvider', function($routeProvider){
$routeProvider
.when('/, {
templateUrl : index.html',
controller : 'homeController'
})
.when('/post/:id', {
templateUrl : 'detail.html',

Nguyn Minh Sang

20

Tim hiu v AngularJS

controller : 'postController'
})
.otherwise({
redirect: '/'
})
}]);

app.config la method cho php khai bo cc Controller, View tng ng vi url

Vi route th nay thi khi truy cp vao ng dn chnh ca trang web thi trinh duyt s
load file index.html va bind n vao <div ng-view></div>.
.when('/post/:id', {

Trong route ti chi tit bai ng c s dung $routeParams service dng nhn cc i s
la id ca bai vit, gip xc nh c chnh xc bai vit cn hin th. ng dn truy cp
ti chi tit bai ng s c dng #/post/id. Trong id la id ca bai ng. Khi cu hinh route
khng cn phai ghi du #.
Khi gp ng dn c dng #/post/id th route s goi ti controller l postController v s
dung template t file detail.html.
.when('/post/:id', {
templateUrl : 'detail.html',
controller : 'postController'
})

$routeProvider.otherwise x l cho route mc nh. Khi ng dn khng khp vi nhng

route c thit lp thi s c ti iu hng v trang ch.
.otherwise({
redirect: '/'
});

Nguyn Minh Sang

21

Tim hiu v AngularJS

2.2.11. Form validation

- Controls (input, select, textarea) l cc cch m ngi dng nhp d liu.
- Form l mt tp cc controls vi muc ch nhm cc controls lin quan vi nhau.
- Form v controls cung cp cc validation services, ngi dng c bo cc li lin
quan n nhp d liu.
- Server side validation cng cn thit am bao an ton ca ng dung.
- S dung thuc tnh novalidate tt chc nng validation mc nh ca trnh duyt.
- CSS Classes:

ng-valid: class c thm vo phn t nu kim tra.

ng-invalid: class c thm vo phn t nu khng kim tra.

ng-pristine: class c thm vo phn t lc ban u, trc khi AngularJS x l

kim tra.

ng-dirty: class c thm vo phn t khi AngularJS x l kim tra.

- Custom Validation

Angular cung cp cc x l c ban cho hu ht cc kiu input HTML5: (text,

number, url, email, radio, checkbox) kem directives kim tra (required, pattern,
minlength, maxlength, min, max).

C th t a ra validate ring bng cch t to directive a ham validate ca

mnh vo ngModel controller.

- Validation c th xut hin 2 ch

Model to View update: khi Model thay i, tt ca cc hm trong

NgModelController#$formatters array c pipe lined, mi hm ny c th nh

dng c gi tr va thay i trng thi valid ca form control thng qua
NgModelController#$setValidity.

View to Model update: tng t nh vy, khi ngi dng tng tc vi 1 control,

n goi NgModelController#$setViewValue. N s pipe line tt ca cc hm trong

Nguyn Minh Sang

22

Tim hiu v AngularJS

NgModelController#$parsers array, mi hm ny ln lt chuyn i gi tr v trng

thi thay i ca form control thng qua NGModelController#$setValidity.

2.3. Lp trnh AngularJS phia server vi Node.js

2.3.1.Node.js l g?

Node.js l 1 nn tang (platform) chy trn mi trng V8 Javascript runtime. Node.js

cho php lp trnh vin xy dng cc ng dung c tnh m rng cao s dung
Javascript trn server. Va vi c porting t C nn v mt tc x l th kh nhanh.
2.3.2.Node.js c th lam c nhng g?

- Xy dng websocket server (Chat server)

- ng dung upload file rt nhanh trn client
- Ad server
- Hoc bt k ng dung d liu thi gian thc no.
Nodejs khng phai l mt web framework.N khng danh cho ngi mi bt u,
khng phai l mt nn tang thc thi cc tc vu a lung.
2.3.3. Block code v Non-block code

V du xy dng chc nng oc file v in ra d liu ca file.

Logic
oc file t Filesystem, gn d liu tng ng vi bin "contents"
In d liu bin "content"
Thc hin cng vic khc tip theo.
Non-block code:
oc file t Filesystem
Sau khi oc xong th in d liu (callback)
Thc hin cng vic khc tip theo.
Code

Nguyn Minh Sang

23

Tim hiu v AngularJS

Block code
var contents = fs.readFileSync('hello.txt'); // Dng cho n khi c
xong file.
console.log(contents);
console.log('Thc hin cng vic khc');

Non-block code
fs.readFile('hello.txt', function(contents){
console.log(contents);
});
console.log('Thc hin cng vic khc');

Ta c th thy y, tc x l ca non-block code la cao hn so vi block code.

Gia s bn thc hin cng vic trn 2 file tr ln th tc d x l ca Non-block
code s nhanh hn Block code rt nhiu.
2.3.4.ng dng u tin
hello.js
var http = require('http'); // y l cch chng ta require cc modules
http.createServer(function(request, response){
response.writeHead(200, {'Content-Type':'text/plain'}); // Status
code v content type
response.write("Xin cho lp trnh vin!"); // Thng ip c gi
xung client.
response.end(); // ng kt ni
}).listen(3000); // Ch kt ni cng 3000.
console.log("Server ang ch kt ni ti cng 3000");
Chy server: node hello hoc node hello.js --> Server ang ch kt ni ti cng 3000
M trnh duyt v truy cp ti a ch

http://localhost:3000

hoc dng terminal:

curl

http://localhost:3000 --> Xin cho lp trnh vin

Nguyn Minh Sang

24

Tim hiu v AngularJS

2.4. Cng c lp trnh vi AngularJS

2.4.1 Yeoman
- Gm 3 ng dung:

Yo

Grunt

Bower

- Yeoman khng ch la tool ma cn c s dung nh la mt Workflow, tp hp cc best

practices gip cho vic pht trin Web d dang hn.
- Lightning fast scaffolding

D dng to khung cho nhng d n mi vi cc template ty bin c

(vd:HTML5 Boilerplate, Bootstrap), Angular JS...

Great buil process

Minification and concatenation (thu nh v c kt?)

Ti u tt ca image files, HTML

Compile CoffeScript and Compass files

- Automatically lint your script

Tt ca Script c t ng chy qua JSHint am bao n tun theo nhng best-

practices
- Built-in preview server
- Ti u anh cc tt

Dng OptiPNG v JPEGTran

- Package management cc tt

D dang search c package mi thng qua command-line, cai t v update chng

m khng cn m trnh duyt

- PhantomJS Unit Testing
Nguyn Minh Sang

25

Tim hiu v AngularJS

D dng chy unit test trong WebKit thng qua PhantomJS

- Cc cng cu h tr tt cho vic lp trnh Angular JS: Sublime Text, WebStorm, Emacs..
2.4.2. WebStorm
- Trang ch: http://www.jetbrains.com/webstorm/
- Download: http://download-cf.jetbrains.com/webstorm/WebStorm-8.0.2.exe
- Feature: http://www.jetbrains.com/webstorm/features/
- Phin ban mi nht l 8.0.2
- L phn mm c ph.
- L IDEs duy nht c h tr plug-in Angular JS.
- WebStorm bn ch cn g: ngdc [TAB].
directive('$directiveName$', function factory($injectables$) {
var directiveDefinitionObject = {
$directiveAttrs$
compile: function compile(tElement, tAttrs, transclude) {
$END$
return function (scope, element, attrs) {
}
}
};
return directiveDefinitionObject;
});

Nguyn Minh Sang

26

Tim hiu v AngularJS

2.5. Khi chy ng dng

- S dung Yeoman:

Yeoman cung cp mt cch n gian chy mt Web Server va p ng tt ca cc

yu cu ca cc tp tin lin quan n Angular JS.

Bn ch cn g vo command-line: yeoman server

Web Server s t ng c cai t v m trnh duyt vi trang ch Angular JS ca

bn. Va chng trinh s t ng c cp nht khi thay i code trong Angular JS.
- Khng s dung Yeoman:

Bn cn mt Web Server khi ng trnh duyt (Xampp, Wamp, AppServ...)

Bn cn lu la phai Refresh li trnh duyt xem nhng thay i khi c bt k

iu chnh no v code trong Angular JS, khng ging nh khi s dung Yeoman.

2.6. Testing and Debug

- Vic Testing l thc s cn thit vi mi ng dung cng nh mi Website.
- Angular JS cung cp cc cng cu test thc s mnh m, trong s la Karma.
2.6.1. Karma
- Thc hin nhng bi test TDD (test-driven development).
- Karma s dung NodeJSand SocketIO thc thi ng dung ca bn v test trn nhiu trnh
duyt mt cch nhanh chng.
- Trang ch: https://github.com/vojtajina/karma/
2.6.2. Cai t Karma
- Cn cai t NodeJS v NPM, vo command-line v g: sudo npm install -g karma
2.6.3. Test vi Karma
- Gm 3 bc:

nh dng cu hnh ca Angular JS:

Nguyn Minh Sang

27

Tim hiu v AngularJS

Nu bn s dung Yeoman, Karma s t ng nhn c cu hnh ca

Angular JS.
o

Nu khng s dung Yeoman, bn ch cn g vo command-line: karma init

Kt ni server cho Karma

o

Nhp vo command-line: karma start [optionalPathToConfigFile]

Karma s t ng chy server port 9876 (y la port mc nh, nu bn

mun i th ch cn thay i trong file karma.conf.js)

Test
o

Nhp vo command-line: karma run

Nguyn Minh Sang

28

Tim hiu v AngularJS

TI LIU THAM KHO

[1]. AngularJS Cheat Sheet (2013) tc gi ProLoser 5 trang.

[2]. Professional Node.js(2012) tc gi Pedro Teixeira 412 trang.
[3]. Ng-book The Complete Book on AngularJS (2013) tc gi Ari Lerner 608 trang.
[4]. AngularJS (2013) tc gi Brad Green, Shyam Seshadri 196 trang.
[5]. Single page web applications JavaScript end-to-end

(2013) tc gi Michael

Mikowski, Josh Powell 433 trang.

Nguyn Minh Sang

29