MỤC LỤC

CHƯƠNG I: TỔNG QUAN VỀ ANGULAR JS FRAMEWORK 1
1.1. Ngôn ngữ lập trình web JavaScript 1
1.1.1. Lịch sử phát triển 1
1.1.2. Javascript là gì? 1
1.1.3. Javascript có thể làm được những gì? 1
1.2. Tng quan v AngularJs framework 1
1.2.1 Lịch sử phát triển 1
1.2.2. Angular JS là gì? 3
1.2.3. Các tính năng chính 3
1.2.4. Đặc trưng 4
1.2.5. Mô hình MVC 4
1.2.6. SPA – Single Page Application 5
CHƯƠNG II: ANGULAR JS FRAMEWORK 6
2.1. Tại sao phải sử dụng AngularJs? 6
2.2. AngularJs được lập trình như thế nào? 6
2.2.1. Ci đặt AngularJs 6
2.2.2. Ví d đơn gin 7
2.2. Cc thnh phn ca 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 (Biểu thc) 14
2.2.7. Filters (B lc) 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. Lập trình AngularJS pha server với Node.js 23
2.3.1.Node.js là gì? 23
2.3.2.Node.js có thể lm được những gì? 23
2.3.3. Block code và Non-block code 23
2.3.4.Ứng dng đầu tiên 24
2.4. Công cụ lập trình với AngularJS 25
2.4.1 Yeoman 25
2.4.2. WebStorm 26
2.5. Khởi chạy ứng dụng 27
2.6. Testing and Debug 27
2.6.1. Karma 27
2.6.2. Ci đặt Karma 27
2.6.3. Test với Karma 27
TÀI LIỆU THAM KHẢO 29



Tm hiểu v AngularJS



Nguyễn Minh Sang 1

CHƯƠNG I: TỔNG QUAN VỀ ANGULAR JS FRAMEWORK
1.1. Ngôn ngữ lập trình web JavaScript
1.1.1. Lịch sử phát triển
- Được phát triển bởi Brendan Eich tại Hãng truyn thông Netscape với cái tên đầu tiên
Mocha, rồi sau đó đổi tên thành LiveScript, và cuối cùng thành JavaScript.
- JavaScript được bổ sung vào trình duyệt Netscape bắt đầu từ phiên bn 2.0b3 của trình
duyệt ny vo tháng 12 năm 1995. JavaScript được bổ sung vào trình duyệt Internet

Explorer bắt đầu từ Internet Explorer phiên bn 3.0 được phát hnh tháng 8 năm 1996.
1.1.2. Javascript là gì?
- JavaScript là mt ngôn ngữ lập trình kịch bn dựa trên đối tượng được phát triển từ các ý
niệm nguyên mẫu. Ngôn ngữ ny được dùng rng rãi cho các trang web, nhưng cũng được
dùng để tạo kh năng viết script sử dng các đối tượng nằm sẵn trong các ng dng.
1.1.3. Javascript có thể lm được những gì?
- Trên trình duyệt, rất nhiu trang web sử dng JavaScript để thiết kế trang web đng và
mt số hiệu ng hình nh thông qua DOM. JavaScript được dùng để thực hiện mt số tác
v không thể thực hiện được với chỉ HTML như kiểm tra thông tin nhập vào, tự đng thay
đổi hình nh
- Bên ngoài trình duyệt, JavaScript có thể được sử dng trong tập tin PDF của Adobe
Acrobat v Adobe Reader. Điu khiển Dashboard trên hệ điu hành Mac OS X phiên bn
10.4 cũng có sử dng JavaScript.
1.2. Tng quan v AngularJs framework
1.2.1 Lịch sử phát triển
- Dự án AngularJS được bắt đầu từ năm 2009, do lập trình viên Misko Hevery tại Google
viết ra. Misko v nhóm lúc ny đang tham gia vo 1 dự án của Google tên là Google
Feedback. Với AngularJS, Misko đã rút ngắn số dòng code front-end từ 17000 dòng còn
chỉ khong 1500. Với sự thành công đó, đi ngũ của dự án Google Feedback quyết định
Tm hiểu v AngularJS



Nguyễn Minh Sang 2

phát triển AngularJS theo hướng mã nguồn mở. Theo thông số từ Github mà mình thấy,
hiện tại dự án AngularJS đang có gần 11000 người theo dõi v hơn 2000 lượt fork.
- Công nghệ HTML hỗ trợ tốt cho các trang web tĩnh, kiểu như trước năm 2000 vậy. Khi
bạn xây dựng 1 trang web với PHP, Node/Express, hay Ruby th nó cũng chỉ là mt trang
web tĩnh với ni dung được thay đổi khi bạn gửi request v máy chủ, máy chủ sẽ render 1

trang với ni dung tương ng. Tuy nhiên mi th đã thay đổi nhiu từ sự phát triển của
HTML5, nhất là khi có sự chống lưng từ những ông lớn như Google, Yahoo, Facebook, v
sự tập hợp đông đo của cng đồng mã nguồn mở.
- Douglas Crockford, người được biết đến nhiu qua JSON v JSLint đã dùng sự chênh
lệch v đ dày giữa 2 cuốn sách "Javascript: The definitive guide" và "Javascript: The good
parts" để châm biếm 1 cách hi hước v JavaScript.

- Tuy nhiên, sự thành công của jQuery đã khiến JavaScript được nhiu người yêu thích vì
tính đơn gin và dễ sử dng. Việc phát triển 1 website sử dng AJAX thì không khó, bạn
có thể dùng jQuery để làm việc này với $.ajax tuy nhiên làm thế no để xây dựng mt phần
mm có thể mở rng, dễ test, nâng cấp và bo trì thì không h đơn gin vì bn thân
JavaScript không được thiết kế ngay từ đầu để làm những việc ny. Do đó sự ra đời của
những framework hỗ trợ lập trình viên xây dựng ng dng web 1 cách có hệ thống đã ra
đời như Sencha, Ember, Knockout, Backbone, v AngularJS.
Tm hiểu v AngularJS



Nguyễn Minh Sang 3

1.2.2. Angular JS là gì?
- Angular là framework javascript mạnh mẽ. Angular tăng cường HTML cho các ng dng
web. Nó có chc năng để gim bớt quá trình phát triển ng dng web. Từ nhiu năm trước,
khi HTML mới bắt đầu, nó được dự định để xây dựng trang web hoặc có thể nói đó l mt
cách để hiển thị tài liệu tĩnh, không để xây dựng mt ng dng web đng. Bây giờ, hãy
tưởng tượng nếu HTML lần đầu tiên được dùng để xây dựng các ng dng web đng, đó
là Angular. Angular là những gì HTML sẽ có được nếu nó được thiết kế để xây dựng các
ng dng web . Lời gii thích này có thể khó hiểu nhưng khi đc tiếp v sau bạn sẽ ngạc
nhiên với những gì Angular có thể làm và sẽ hiểu ý nghĩa ny.
1.2.3. Cc tnh năng chnh

- Hai cách liên kết dữ liệu trong Angular là kh năng thay đổi giá trị thuc tính của đối
tượng, đồng thời giao diện người dùng đưa ra sự thay đổi đó ngay tại thời điểm đó, v
ngược lại. Ví d, nếu bạn có thuc tính của mt đối tượng gi là "Page.Title ', mỗi lần thay
đổi giá trị' Page.Title, giao diện người dùng tự đng cập nhật và hiển thị giá trị mới của
'Page.Title. Và nếu bạn nhập vào trong giao diện ng dng người dùng của bạn, nó có thể
cập nhật giao diện người dùng v cũng cập nhật thuc tính của đối tượng. Tất c đu được
xử lý bởi Angular do đó không cần phi viết giống như trong mt số framework javascript
khác. Những gì cần làm chỉ đơn gin l xác định model của chúng ta, và bây giờ bất c khi
nào mt model được thay đổi, nó sẽ thay đổi bất c nơi no nó được đặt, có thể là trong
đối tượng c thể hoặc trong các lớp đại diện. Model trong Angular chỉ là cấu trúc javascript
cũ rõ rng, không có g lạ mắt nhưng nó lại rất hữu ích.
- Tính năng mới thực sự l đặc điểm tạo nên mt khong cách khác nhau lớn giữa Angular
và bất kỳ framework javascript khác. Directives l đ cập đến mt tính năng để mở rng
nghĩa của từ HTML, đồng thời cũng có thể được xem như l mt cách để chỉ cho trình
duyệt mẹo mới của bạn. Chúng ta biết v header trong HTML5, đó l đại diện cho mt tiêu
đ nhưng nó chỉ là phần tử tĩnh. Mặc dù HTML có thể có nhiu thẻ , nhưng nó không đủ
mạnh để tạo ra mt ng dng web đẹp. Với đặc điểm chỉ dẫn , chúng ta có thể tạo ra từ
vựng HTML mới để trình duyệt hiểu nó có nghĩa l g v nó nên lm g. Ví d với Angular
chúng ta có thể tạo ra thẻ như sau <draggable> drag me </ draggable > . Các văn bn bên
Tm hiểu v AngularJS



Nguyễn Minh Sang 4

trong tag draggable bây giờ sẽ trở thành draggable trong trình duyệt, sau đó chỉ cần viết
mt định nghĩa chỉ dẫn draggable trong ng dng Angular của chúng ta l xong.Đây l mt
ví d đơn gin của Angular, nó có thể làm rất nhiu th hữu ích hơn. V nó không chỉ giới
hạn mt phần tử html mà có sẵn để thực thi các thuc tính, các lớp hoặc các chú thích html.
Directives trong Angular khác với directtives tạo bởi html ở chỗ chúng có thể thực hiện

nhiu hnh vi đng hơn.
- Nhiu framework cần có template nhưng Angular template lại chỉ là html.
- Dependency injection làm cho ng dng Angular dễ dng hơn để phát triển, chúng ta có
thể sắp xếp mã (code) thành các module. Bằng cách này, chúng ta có thể tạo ra các thành
phần tái sử dng mà có thể được gi v sau, bất c khi nào cần thiết. Ý tưởng ny l đặc
biệt tốt là khi ng dng mở rng lớn hơn v cần phi được mở rng, dễ dàng bo trì và
kiểm chng. Dependency injection là mt cách để ghép các đoạn mã code với nhau, điu
ny đòi hỏi phi phân chia mã code theo các chc năng riêng biệt như service, controller,
hoặc provider nhưng không giới hạn chúng.
1.2.4. Đặc trưng
- Kiến trúc MVC, Two-way binding, Dynamic templates, Expressions, Modules, Scopes,
Dependency injection, Directives, Routing, Services, Filters, Form validation, Testing in
mind.
1.2.5. Mô hình MVC


Tm hiểu v AngularJS



Nguyễn Minh Sang 5

- Mô hình MVC (Model - View - Controller) là mt kiến trúc phần mm hay mô hình
thiết kế được sử dng trong kỹ thuật phần mm. Nó giúp cho các developer tách ng dng
của h ra 3 thành phần khác nhau Model, View và Controller. Mỗi thành phần có mt
nhiệm v riêng biệt v đc lập với các thành phần khác.
- Mô hnh MVC được giới thiệu từ những năm 70 như mt phần của Smalltalk, nhưng đối
với nn tng web, thì nó mới được thịnh hành gần đây.
- Ý tưởng đằng sau MVC l để chia rõ 3 thành phần chính là model(xử lý, truy xuất
database), view(giao diện), và controller(điu hướng yêu cầu từ người dùng).

- MVC thể hiện tính chuyên nghiệp trong lập trình, phân tích thiết kế. Do được chia thành
các thành phần đc lập nên giúp phát triển ng dng nhanh, đơn gin, dễ nâng cấp, bo trì.
Đối với Angular, View sẽ là DOM, Controller là các lớp JavaScript, còn Model sẽ là dữ
liệu được lưu ở thuc tính của các đối tượng trong JS.
- Sau khi chng kiến nhiu tranh luận v MV*, mt tác gi của Angular đã tuyên bố
AngularJS là mt MVW framework (Model – View – Whatever, trong đó Whatever l viết
tắt của whatever works for you).
1.2.6. SPA – Single Page Application
- Mt single page application hay còn được gi l single page interface, l mt web app
hay website hiển thị vừa vặn trên mt mặt của trang web với mc đích giúp người dùng có
tri nghiệm giống như đang dùng ng dng trên desktop.
- L ng dng chạy bên trong trnh duyệt, không yêu cầu phi ti lại ton b trang web mỗi
lần sử dng.

Tm hiểu v AngularJS



Nguyễn Minh Sang 6

CHƯƠNG II: ANGULAR JS FRAMEWORK
2.1. Tại sao phải sử dụng AngularJs?
- Angular được đưa ra bởi Google. Tại sao điu này quan trng để biết ? Như bạn có thể
đoán, Google đã phát triển các ti năng v thiên ti như đi bóng của h . H thực sự biết
những tinh tế của trang web và những sự phát triển ng dng web . Ít nhất là thực tế này
có thể cung cấp cho người dùng đm bo Angular xuất phát từ người chúng ta có thể tin
tưởng . Ngoài ra, nếu bạn đã từng sử dng sn phẩm của Google như Gmail hay Google
Plus, bạn sẽ không ngạc nhiên với sự tương tác của chúng và c ajax gửi liên tc mi nơi
mà không phi làm mới toàn b trang web v để sử dng Angular kiến thc chủ yếu cần
phi biết trước là Javascript.

2.2. AngularJs được lập trình như thế no?
2.2.1. Ci đặt AngularJs
2.2.1.1. Tải AngularJS
- Truy cập vo trang web hoặc
v ti v bn angularjs mới nhất. Bn hiện mới nhất hiện tại l 1.2.16.
2.2.1.2. Chn Angular vo ứng dụng.
* T host AngularJS
<script src="angular.min.js"></script>
- Theo cách ny th cần phi download angularjs v máy v nhúng trực tiếp vo ng dng.
* Dùng phiên bản có sẵn trên server ca Google
- Ngoài cách trên ra bạn cũng có thể sử dng phiên bn nén của AngularJS có sẵn trên
server của Google. Sử dng cách ny có 2 điu lợi là tiết kiệm băng thông cho trang web
của bạn và AngularJS sẽ được load nhanh hơn nếu máy của người dùng đã cache
AngularJS.
- Nhưng cách ny không hoạt đng nếu không được kết nối mạng.
<script
src=" />.js"></script>
Tm hiểu v AngularJS



Nguyễn Minh Sang 7


2.2.2. V dụ đơn giản
<!doctype html>
<html lang="en" ng-app>
<head>
<meta charset="utf-8">
<title>V d AngularJS </title>

<script src="js/angular.js"></script>
</head>
<body>
<p>Hello {{'World' + '!'}}</p>

</body>
</html>
Phân tch v dụ:
ng-app directive:
Directives l các tùy biến gắn vo các DOM (attribute, element name, CSS class …) để
HTML compiler của AngularJS có thể thêm vo hoặc biến đổi DOM element.
<html ng-app>
Ng-app cho biết phạm vi hoạt đng của AngularJS. Chỉ thị ny cho biết vị trí bắt đầu để
sử dng các phần tử của AngularJS.
<script src="js/angular.js">
- Chn AngularJs vo ng dng.
<p> Hello {{'World' + '!'}} </p>
Mt đặc điểm quan trng của AngularJs l kh năng binding dữ liệu sử dng cặp dấu ngoặc
nhn {{}}. Đoạn mã ny sẽ xuất ra dữ liệu l chuỗi “Hello World !” ra trnh duyệt.

Tm hiểu v AngularJS



Nguyễn Minh Sang 8

Trong dấu ngoặc nhn có thể cha biến v các biểu thc toán hc.
<p>1 + 2 = {{ 1 + 2 }}</p>
Đoạn mã ny sẽ in lên trnh duyệt chuỗi “1 + 2 = 3”
2.2. Cc thnh phn ca AngularJs

2.2.1 Angular Template
Đôi lúc trong quá trnh xây dựng hệ thống, file HTML trở nên phc tạp để gii quyết vấn
đ này ta cần chia thành nhiu phần khác nhau, AngularJS cung cấp cho chúng ta mt gii
pháp hữu ích đó l template.
- Angular template l 1 đặc t dạng declarative (khai báo), cùng với thông tin từ Model &
Controller, trở thành rendered View mà User thấy trên trình duyệt. Nó là static DOM, cha
HTML, CSS, và các thành phần, thuc tính riêng của Angular. Các thành phần Angular và
các thuc tính giúp Angular thêm các hành vi và biến đổi template DOM thành dynamic
view DOM.
- Nói 1 cách đơn gin nhất th template trong AngularJS l “HTML voi81 additional
markup”.
Trong Angular, chúng ta có 2 cách để tạo mt template.
Dùng file ngoài:
Chúng ta có thể dùng thêm mt file html bên ngoi để làm template cho file chính, ví d:
message.html
<h3>Hello, {{name}}!</h3>
Dùng script
Chúng ta có thể tích hợp thẳng template vo file hiện hnh thông qua thẻ script với type l
text/ng-template
<script type="text/ng-template" id="message.html">
<h3>Hello, {{name}}!</h3>
</script>
Tm hiểu v AngularJS



Nguyễn Minh Sang 9

Cch sử dụng template
Có nhiu cách để sử dng template, tuy nhiên trong AngularJS có 2 cách thông dng nhất

để dùng template đó l ng-include v ngRoute (sẽ nói ở phần sau), ví d:
index.html
<!doctype html>
<html ng-app="ExampleModule">
<head>
<script
src="
<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 các ng dng thực tế, việc phân chia ng dng thành các thành phần khác nhau là
điu cần thiết. Dưới đây l lợi ích của việc chia nhỏ ng dng:
 Dễ dng hơn cho việc qun lý và khai báo ng dng cũng như kiểm tra lại sau này
 Kh năng tái sử dng cũng như tận dng các 3rd modules
 Nạp từng phần ng dng sẽ nhanh hơn l buc phi nạp toàn b ng dng vào rồi
mới chạy.


Tm hiểu v AngularJS



Nguyễn Minh Sang 10

Trong AngularJS, module được hỗ trợ trong khai báo ng-app bên cạnh khai báo nó trong
mã nguồn script, dưới đây l mt template chuẩn của angular sử dng 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>V d đơn gin v module p>
</body>
</html>
Trong ví d ny module được khai báo ngay trong thẻ <html> với tên l myModule.
var app = angular.module('myModule',[]);
 ng-app="myModule": Khai báo mt angular app là myModule, sử dng myModule
được khai báo trong script.
 Trong script, angular.module() là hàm khai báo cho module.
 cặp dấu ngoặc [] chính là mng các module sẽ được nạp chung vo để chạy chung với
ng dng (module chính được khai báo trong ng-app).Ví d:
var app = angular.module('myModule', ['ngRoute', 'ngBootstrap']);
Controller trong module.
Tm hiểu v AngularJS




Nguyễn Minh Sang 11

Trong ví d trên chúng ta đã thấy việc khai báo module như thế no, vậy controller khi ng
dng sẽ được khai báo như thế no. Hãy xem ví d duới đây
index.html
<!doctype html>
<html ng-app="ExampleModule">
<head>
<script
src="
<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 của module sẽ đóng vai trò khai báo thêm mt controller cho module.
• Function đại diện cho controller được khai báo bnh thường giống như controller khai
báo bên ngoài module.
- AngularJS sử dng Dependence Injection để tách biệt giữa các modules.

- Các dependency được đưa vo tự đng bởi framework

Tm hiểu v AngularJS



Nguyễn Minh Sang 12

T chức ca một ứng dụng thc tế
Thông thường th tổ chc mt ng dng thực tế sẽ được khởi tạo như sau
├── index.html
├── css
│ └── style.css
└── scripts
├── module_1.js
├── module_2.js
├── module_3.js
└── main.js
 index.html chính là html documents
 style.css chính l mã nguồn css cho document
 main.js chính l mã nguồn cho module chính
 các files js khác l các modules được module chính sử dng, như vậy template của chúng
ta sẽ được khai báo lại như sau
index.html
<!doctype html>
<html ng-app="ExampleModule">
<head>
<link rel="stylesheet" href="css/style.css">
<script
src="

<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>

Tm hiểu v AngularJS



Nguyễn Minh Sang 13

main.js
var app = angular.module('ExampleModule', ['Module1', 'Module2',
'Module3']);

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

2.2.3. Scope
'$scope' l đối tượng tham chiếu tới model được sử dng trong controller. L thnh phần
gắn kết giữa View v Controller. Scope cung cấp các APIs để theo dõi các thay đổi của
Model : $watch

Scope cung cấp các APIs để truyn bất kỳ thay đổi no của Model tới View : $apply
Tự đng đồng b dữ liệu giữa Model v View

2.2.4. Model
<input type="text" ng-model="greeting">
{{ greeting }}
Ng-model cho biết đối tượng nhận giá trị của input. {{greeting}} sẽ in ra giá trị được nhập
vo input.
2.2.5. Controller
<script>
var demo = angular.module('myApp',[]);

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

Tm hiểu v AngularJS



Nguyễn Minh Sang 14

Tạo mt module cho ng dng:
<html ng-app="myApp">
- Đặt biến “demo” cha module “myApp” của ng dng.
var demo = angular.module('myApp',[]);
- Tạo mt controller mới cho module ny
demo.controller('GreetingController', ['$scope', function($scope) {
$scope.greeting = 'Hello World!';

}]);
'GreetingController' l tên của controller, cách đặt tên nên cha tên v đuôi “Controller”
để dễ nhận biết.
['$scope', function($scope)
Viết hm sử dng với biến $scope.
$scope.greeting = 'Hello World!';
Gán giá trị cho biến greeting. Để in được giá trị của greeting ra trnh duyệt.
<div ng-controller="GreetingController">
{{ greeting}}
</div>
Ng-controller cho biết controller đang hoạt đng. Đoạn mã ny sẽ in ra trnh duyệt chuỗi
“Hello World! ” được khai báo trong “GreetingController”.
2.2.6.Expression (Biểu thức)
Expression được sử dng trong tất c các phần của AngularJs, v vậy cần phi nắm vững
v expression v cách m Angular sử dng, tính toán. Nó được bao bởi kí hiệu {{ }}. Mt
biến được khởi tạo từ controller thông qua $scope cũng được coi l mt expression.
- Expression các snippets giống JS được đặt trong bindings, kiểu như {{expression}}.
- Được xử lý bởi $parse service.
Tm hiểu v AngularJS



Nguyễn Minh Sang 15

Ví d: <body> 2 + 2 = {{2 + 2}} </body>
Angular sẽ tính toán giá trị trong biểu thc v xuất ra mn hnh kết qu “2 + 2 = 4”.
2.2.7. Filters (Bộ lc)
Trong Angular, mt filter cung cấp mt định dạng dữ liệu để hiển thị tới người dùng.
Theo tinh thần của UNIX filters và sử dng các cú pháp tương tự | (pipe).
Angular cung cấp mt số filter được xây dựng sẵn như: lowercase, date, number, currency,

limitTo, orderBy…
Ví d:
<input ng-model="userInput"> Uppercased: {{ userInput | uppercase }}
Khi người dùng nhập dữ liệu vo input th giá trị đó sẽ được chuyển thnh chữ viết thường.

Mt số filter khác:
{{ "chui k t vit thưng" | uppercase }}
{{ {name: "Sang", age: 21} | json }}
{{ 1304375948024 | date }}
{{ 1304375948024 | date:"MM/dd/yyyy @ h:mma" }}
Kết quả:
CHUI K T VIT THƯNG
{ "name": "Sang", "age": 21 }
May 3, 2011
05/03/2011 @ 5:39AM
Tm hiểu v AngularJS



Nguyễn Minh Sang 16

2.2.8. Directives
Những th như thuc tính, class, tên của 1 DOM element gi chung là directive.
AngularJS sẽ dựa vo chúng để attach các chỉ thị hoặc các sự kiện tới DOM element đó.
Bn thân AngularJS đã có rất nhiu các directive : ng-bind, ng-model, ng-click, ng-
controller
Việc dùng directive sẽ gim thiểu được số lượng thẻ HTML , code HTML nhìn sẽ gn
gàng và sáng sủa hơn.
AngularJS cung cấp cho chúng ta 3 loại directive đó l :
- Directive dạng element ( là 1 thẻ HTML ) viết tắt là E.

<my-directive></my-directive>
- Directive dạng attribute ( thuc tính của 1 thẻ HTML ) viết tắt là A, dạng này là mặc định.
<div my-directive></div>
- Directive dạng class( class CSS ) viết tắt là C.
<div class="my-directive"></div>
Ví d:
Chuẩn bị ti liệu HTML với 3 đủ 3 loại directive:
<!doctype html>
<html ng-app>
<head>
<title>V d 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>
Tm hiểu v AngularJS



Nguyễn Minh Sang 17

</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 báo thông tin customer với name v địa chỉ.
Trong myDirective sẽ return ra 1 object còn việc hiển thị hay đổ dữ liệu vo directive như
nào là việc của Angular chúng ta không cần quan tâm.
Lưu ý: Tên directive phi khai báo dạng camelCase còn khi gi thì có thể dùng dấu - để
ngăn cách giữa các từ hoặc để nguyên như khi khai báo cũng được
 restrict : loại directive mặc định là E(element), C là class, A là attribute
 template: Ni dung của directive
Tm hiểu v AngularJS



Nguyễn Minh Sang 18

 templateUrl: Liên kết tới 1 file template bên ngoài. Template này cha ni dung của
directive.
Name: {{customer.name}} Address: {{customer.address}}

 Nếu restrict:"A" thì <my-directive></my-directive> sẽ có dữ liệu
 Nếu restrict:"C" thì <div class="my-directive"></div> sẽ có dữ liệu
 Nếu restrict:"E" thì <div my-directive></div> sẽ có dữ liệu
Khi thay đổi restrict cần lưu ý infect element để xem nó đổ dữ liệu vào thẻ nào.
2.2.9. Services
AngularJS service là mt object hoặc mt function ph trách mt tác v no đó. Việc viết
service chỉ là việc gom các đoạn xử lý logic vào object hoặc function để dễ qun lý hơn.
Cũng giống như mô hnh MVC tách phần xử lý, điu hướng và hiển thị riêng biệt.
Trong AngularJS service sẽ cha tất c các phần xử lý, Controller nhận yêu cầu và gi các
service cần thiết để xử lý, Model handle dữ liệu từ các control, View hiển thị dữ liệu, Route
điu hướng request tới controller.
Bn thân AngularJS cũng cha những service như: $http, $scope, $window,
$RouteProvider
Có 2 cch để tạo service trong Angularjs.
Cách 1:
Cú pháp:
module.service( 'serviceName', function );
Ví d:
var module = angular.module('myapp', []);

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

Tm hiểu v AngularJS



Nguyễn Minh Sang 19


Cách 2:
Cú pháp:
module.factory('userService', function(){
Ví d:

var fac = {};
fac.users = ['John', 'James', 'Jake'];
return fac;
});
C 2 cách đu tạo ra được service.
Với cách 1 sau khi đăng ký tên service xong bạn sẽ được cung cấp 1 thể hiện của function
mà bạn truyn vào module.service.
Với cách 2 sau khi đăng ký tên factory, trong function truyn vào trong module.factory cần
return thể hiện của đối tượng tạo bên trong nó.
2.2.10. Multiple Views and Routing
Đôi khi trong mt trang, nhiu khi chúng ta chỉ muốn hiển thị mt phần HTML ng với
mỗi chc năng c thể mà ta không cần chuyển đổi trang, Angular là mt full-stack
framework hiệu qu giúp chúng ta có thể lm được việc này nhanh chóng và dễ dàng.
Route là b điu hướng các yêu cầu từ phía người dùng tới các controller tương ng để xử
lý dựa theo các đối số truyn trên thanh url. Route trong AngularJS l thnh phần quan
trng giúp AngularJs tạo được ng dng SPA, chuyển trang m không cần ti lại trnh
duyệt.
Trong AngularJs chúng ta sẽ sử dng $routeProvider để bắt các yêu cầu. Biểu thc route
được tính từ sau dấu #.

Tm hiểu v AngularJS



Nguyễn Minh Sang 20


Xét ví d
<!doctype html>
<html lang="en" ng-app="demoApp" >
<head>
<meta charset="utf-8">
<title>V d 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ừ phiên bn AngularJs 1.0.7 th Route đã được tách thnh mt file js riêng biệt, v để sử
dng được nó ta phi nhúng file angular-route.min.js vo ng dng.
Directive ng-view được sử dng để hiển thị dữ liệu.
<div ng-view></div>
Đăng ký biến app thnh mt module trong AngularJS v thiết lập route cơ bn. Để làm
việc với Route th bạn cần gi và sử dng mt extends module của 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',
Tm hiểu v AngularJS




Nguyễn Minh Sang 21

controller : 'postController'
})
.otherwise({
redirect: '/'
})
}]);
 app.config l method cho phép khai báo các Controller, View tương ng với url
Với route thế ny th khi truy cập vo đường dẫn chính của trang web th trnh duyệt sẽ
load file index.html v bind nó vo <div ng-view></div>.
.when('/post/:id', {
Trong route tới chi tiết bi đăng có sử dng $routeParams service dùng để nhận các đối số
l id của bi viết, giúp xác định được chính xác bi viết cần hiển thị. Đường dẫn truy cập
tới chi tiết bi đăng sẽ có dạng #/post/id. Trong đó id l id của bi đăng. Khi cấu hnh route
không cần phi ghi dấu “#”.
Khi gặp đường dẫn có dạng #/post/id thì route sẽ gi tới controller là postController và sử
dng template từ file detail.html.
.when('/post/:id', {
templateUrl : 'detail.html',
controller : 'postController'
})
$routeProvider.otherwise xử lý cho route mặc định. Khi đường dẫn không khớp với những
route đã được thiết lập th sẽ được tái điu hướng v trang chủ.
.otherwise({
redirect: '/'
});


Tm hiểu v AngularJS



Nguyễn Minh Sang 22

2.2.11. Form validation
- Controls (input, select, textarea) là các cách mà người dùng nhập dữ liệu.
- Form là mt tập các controls với mc đích nhóm các controls liên quan với nhau.
- Form và controls cung cấp các validation services, để người dùng được báo các lỗi liên
quan đến nhập dữ liệu.
- Server – side validation cũng cần thiết để đm bo đ an toàn của ng dng.
- Sử dng thuc tính “novalidate” để tắt chc năng validation mặc định của trình duyệt.
- CSS Classes:
 ng-valid: class được thêm vào phần tử nếu kiểm tra.
 ng-invalid: class được thêm vào phần tử nếu không kiểm tra.
 ng-pristine: class được thêm vào phần tử lúc ban đầu, trước khi AngularJS xử lý
kiểm tra.
 ng-dirty: class được thêm vào phần tử khi AngularJS xử lý kiểm tra.
- Custom Validation
 Angular cung cấp các xử lý cơ bn cho hầu hết các kiểu input HTML5: (text,
number, url, email, radio, checkbox) km directives để kiểm tra (required, pattern,
minlength, maxlength, min, max).
 Có thể tự đưa ra validate riêng bằng cách tự tạo directive để đưa hm validate của
mình vào ngModel controller.
- Validation có thể xuất hiện ở 2 chỗ
 Model to View update: khi Model thay đổi, tất c các hàm trong
NgModelController#$formatters array được pipe – lined, để mỗi hàm này có thể định
dạng được giá trị v thay đổi trạng thái valid của form control thông qua

NgModelController#$setValidity.
 View to Model update: tương tự như vậy, khi người dùng tương tác với 1 control,
nó gi NgModelController#$setViewValue. Nó sẽ pipe – line tất c các hàm trong
Tm hiểu v AngularJS



Nguyễn Minh Sang 23

NgModelController#$parsers array, để mỗi hàm này lần lượt chuyển đổi giá trị và trạng
thái thay đổi của form control thông qua NGModelController#$setValidity.
2.3. Lập trình AngularJS pha server với Node.js
2.3.1.Node.js là gì?
Node.js là 1 nn tng (platform) chạy trên môi trường V8 Javascript runtime. Node.js
cho phép lập trình viên xây dựng các ng dng có tính mở rng cao sử dng
Javascript trên server. V v được porting từ C nên v mặt tốc đ xử lý thì khá nhanh.
2.3.2.Node.js có thể lm được những gì?
- Xây dựng websocket server (Chat server)
- Ứng dng upload file rất nhanh trên client
- Ad server
- Hoặc bất kỳ ng dng dữ liệu thời gian thực nào.
Nodejs không phi là mt web framework.Nó không dnh cho người mới bắt đầu,
không phi là mt nn tng thực thi các tác v đa luồng.
2.3.3. Block code và Non-block code
Ví d xây dựng chc năng đc file và in ra dữ liệu của file.
Logic
Đc file từ Filesystem, gán dữ liệu tương ng với biến "contents"
In dữ liệu biến "content"
Thực hiện công việc khác tiếp theo.
Non-block code:

Đc file từ Filesystem
Sau khi đc xong thì in dữ liệu (callback)
Thực hiện công việc khác tiếp theo.
Code