Upload
nguyen-thanh-tuyen
View
163
Download
19
Embed Size (px)
DESCRIPTION
Tài Liệu AngularJS Tiếng Việt online từ cơ bản đến nâng cao
Citation preview
http://vietjack.com/angularjs/index.jsp Copyright © vietjack.com
http://vietjack.com/ Trang chia sẻ các bài học online miễn phí Page 1
Mục lục Giới thiệu chung về AngularJS .............................................................................................. 5
Đối với độc giả ...................................................................................................................... 5
Điều kiện tiền đề ................................................................................................................... 5
Tổng quan về AngularJS ...................................................................................................... 6
AngularJS là gì? ................................................................................................................ 6
Các tính năng chung ......................................................................................................... 6
Các tính năng cốt lõi .......................................................................................................... 6
Khái niệm.......................................................................................................................... 7
Ưu điểm của AngularJS ................................................................................................... 8
Nhược điểm của AngularJS ............................................................................................. 9
Các thành phần của AngularJS ........................................................................................ 9
Cài đặt môi trường AngularJS .............................................................................................. 9
Ví dụ ............................................................................................................................... 11
Khai báo AngularJS ................................................................................................ 12
Chỉ đến ứng dụng AngularJS ............................................................................... 12
View ........................................................................................................................... 12
Controller .................................................................................................................. 12
Thực hiện ................................................................................................................. 13
AngularJS - Cấu trúc MVC .................................................................................................. 13
Phần Model .................................................................................................................... 14
Phần View ...................................................................................................................... 14
Phần Controller ............................................................................................................... 15
AngularJS - Ứng dụng đầu tiên ........................................................................................... 15
Các bước tạo một ứng dụng AngularJS: ........................................................................ 15
Bước 1: Tải framework .......................................................................................... 15
Bước 2: Định nghĩa ứng dụng AngularJS sử dụng ng-app directive. ............ 15
Bước 3: Định nghĩa tên một model sử dụng ng-model directive. ................... 15
http://vietjack.com/angularjs/index.jsp Copyright © vietjack.com
http://vietjack.com/ Trang chia sẻ các bài học online miễn phí Page 2
Bước 4: Bind giá trị của model đã được định nghĩa ở trên sử dụng ng-bind
directive. ................................................................................................................... 16
Các bước để chạy một ứng dụng AngularJS .................................................................. 16
Kết quả ........................................................................................................................... 16
Cách AngularJS tích hợp với HTML ............................................................................... 17
Các Directive trong AngularJS ............................................................................................ 17
ng-app directive .............................................................................................................. 18
ng-init directive ................................................................................................................ 18
ng-model directive ........................................................................................................... 18
ng-repeat directive .......................................................................................................... 19
Ví dụ ............................................................................................................................... 19
Kết quả ........................................................................................................................... 20
Expression trong AngularJS ................................................................................................ 20
Sử dụng các số .............................................................................................................. 20
Sử dụng các chuỗi .......................................................................................................... 21
Sử dụng đối tượng ......................................................................................................... 21
Sử dụng mảng................................................................................................................ 21
Ví dụ ............................................................................................................................... 21
Kết quả ........................................................................................................................... 21
Thành phần Controller trong AngularJS .............................................................................. 22
Ví dụ ............................................................................................................................... 24
Kết quả ........................................................................................................................... 25
Các Filter (bộ lọc) trong AngularJS ...................................................................................... 25
Bộ lọc uppercase ............................................................................................................ 26
Bộ lọc lowercase ............................................................................................................. 26
Bộ lọc currency ............................................................................................................... 26
Bộ lọc filter ...................................................................................................................... 26
Bộ lọc orderby ................................................................................................................. 27
Ví dụ ............................................................................................................................... 27
http://vietjack.com/angularjs/index.jsp Copyright © vietjack.com
http://vietjack.com/ Trang chia sẻ các bài học online miễn phí Page 3
Kết quả ........................................................................................................................... 29
AngularJS - Bảng ................................................................................................................ 29
Ví dụ ............................................................................................................................... 30
Kết quả ........................................................................................................................... 32
Phần tử HTML DOM trong AngularJS ................................................................................ 33
ng-disabled directive ....................................................................................................... 34
ng-show directive ............................................................................................................ 34
ng-hide directive .............................................................................................................. 34
ng-click directive .............................................................................................................. 34
Ví dụ ............................................................................................................................... 34
Kết quả ........................................................................................................................... 35
Các Module trong AngularJS .............................................................................................. 36
Module ứng dụng ........................................................................................................... 36
Module điều khiển ........................................................................................................... 37
Sử dụng các Module ...................................................................................................... 37
Ví dụ ............................................................................................................................... 38
Kết quả ........................................................................................................................... 40
Form trong AngularJS ......................................................................................................... 40
Các sự biến .................................................................................................................... 41
ng-click ............................................................................................................................ 41
Validate dữ liệu ............................................................................................................... 42
Ví dụ ............................................................................................................................... 42
Kết quả ........................................................................................................................... 44
Include trong AngularJS ...................................................................................................... 45
Ví dụ ............................................................................................................................... 45
Kết quả ........................................................................................................................... 48
Ajax trong AngularJS .......................................................................................................... 48
Các ví dụ ........................................................................................................................ 49
data.txt ...................................................................................................................... 49
http://vietjack.com/angularjs/index.jsp Copyright © vietjack.com
http://vietjack.com/ Trang chia sẻ các bài học online miễn phí Page 4
testAngularJS.jsp .................................................................................................... 50
Kết quả ........................................................................................................................... 51
AngularJS - View ................................................................................................................ 52
ng-view ........................................................................................................................... 52
Cách sử dụng ................................................................................................................. 52
ng-template ..................................................................................................................... 52
Cách sử dụng ................................................................................................................. 52
$routeProvider ................................................................................................................ 53
Cách sử dụng ................................................................................................................. 53
Ví dụ ............................................................................................................................... 54
Kết quả ........................................................................................................................... 55
AngularJS - Scope .............................................................................................................. 56
Tính kế thừa của Scope .................................................................................................. 57
Ví dụ ............................................................................................................................... 57
Kết quả ........................................................................................................................... 59
Các Service trong AngularJS .............................................................................................. 59
Sử dụng phương thức factory ........................................................................................ 60
Sử dụng phương thức service ........................................................................................ 60
Ví dụ ............................................................................................................................... 60
Kết quả ........................................................................................................................... 62
Dependency Injection trong AngularJS ............................................................................... 62
value - giá trị .................................................................................................................... 63
factory ............................................................................................................................. 63
service ............................................................................................................................ 64
provider ........................................................................................................................... 65
constant .......................................................................................................................... 65
Ví dụ ............................................................................................................................... 66
Kết quả ........................................................................................................................... 67
Các Custom Directive trong AngularJS ............................................................................... 68
http://vietjack.com/angularjs/index.jsp Copyright © vietjack.com
http://vietjack.com/ Trang chia sẻ các bài học online miễn phí Page 5
Tìm hiểu Custom Directive .............................................................................................. 68
Ví dụ ............................................................................................................................... 70
Kết quả ........................................................................................................................... 71
AngularJS - Các chức năng quốc tế hóa ............................................................................ 72
Ví dụ cho ví trị Đan Mạch ................................................................................................ 72
Kết quả ........................................................................................................................... 73
Ví dụ sử dụng vị trí của Browser ..................................................................................... 73
Kết quả ........................................................................................................................... 74
AngularJS - Tài liệu tham khảo ........................................................................................... 75
Các đường link hữu ích về AngularJS ............................................................................ 75
Giới thiệu chung về AngularJS AngularJS là một thư viện JavaScript mạnh mẽ. Nó đươc sử dụng trong các dự án Ứng dụng
trang đơn – Single Page Application (SPA). Nó kế thừa HTML DOM với các thuộc tính bổ sung và
làm cho thao tác người dùng trở lên linh hoạt. AngularJS có mã nguồn mở, hoàn toàn miễn phí và
được sử dụng bởi hàng ngàn lập trình viên trên thế giới. Nó hoạt động dưới giấy phép mã nguồn
mở 2.0.
Loạt bài hướng dẫn của chúng tôi dựa trên nguồn tài liệu của: Tutorialspoint
Đối với độc giả Bài hướng dẫn này thiết kế cho những kỹ sư phần mềm chuyên nghiệp, những người muốn có
những hiểu biết cơ bản về AngularJS và có kiến thức lập trình căn bản. Bài hướng dẫn mô tả
những thành phần của AngularJS với những ví dụ phù hợp.
Điều kiện tiền đề Bạn phải có những hiểu biết cơ bản về JavaScript và bất kỳ chương trình soạn thảo văn bản nào
(text editor). Khi chúng ta bắt đầu tìm hiểu và phát triển các ứng dụng sử dụng AngularJS, tốt hơn
hết là bạn phải có kiến thức về công nghệ web như HTML, CSS, AJAX, etc.
http://vietjack.com/angularjs/index.jsp Copyright © vietjack.com
http://vietjack.com/ Trang chia sẻ các bài học online miễn phí Page 6
Tổng quan về AngularJS AngularJS là gì? AngularJS là một khung (framework) ứng dụng web mã nguồn mở. Nó được phát triển lần đầu
năm 2009 bởi Misko Hevery và Adam Abrons. Hiện tại nó được duy trì bởi Google. Phiên bản mới
nhất của nó hiện tại là 1.3.14
Định nghĩa về AngularJS được đưa ra chính thức như sau:
AngularJS là một khung cấu trúc cho các ứng dụng trang web động. Nó cho phép bạn sử dụng
HTML như là ngôn ngữ mẫu và cho phép bạn mở rộng cú pháp của HTML để diễn đạt các thành
phần ứng dụng của bạn một cách rõ ràng và súc tích. Hai tính năng cốt lõi: Data binding – Liên kết
dữ liệu vàDependency injection – Sự tiêm vật phụ thuộc của AngularJS loại bỏ phần lớn code
mà bạn thường phải viết. Nó xảy ra trong tất cả các trình duyệt, làm cho nó trở thành đối tác lý
tưởng của bất kỳ công nghệ Server nào.
Các tính năng chung AngularJS là một khung phát triển mạnh mẽ dựa trên JavaScript để tạo các ứng dụng RICH
Internet Application (RIA).
AngularJS cung cấp cho lập trình viên những tùy chọn để viết các ứng dụng client-side
trong mô hình MVC (Model View Controller) một cách rõ ràng.
Các ứng dụng được viết bởi AngularJS tương thích với nhiều phiên bản trình duyệt web.
AngularJS tự động xử lý mã JavaScript để phù hợp với mỗi trình duyệt.
AngularJS có mã nguồn mở, miễn phí hoàn toàn, được sử dụng bởi hàng ngàn lập trình
viên trên thế giới. Nó hoạt động dưới giấy phép Apache License version 2.0.
Nhìn chung, AngularJS là một framework để tạo các ứng dụng lớn, các hiệu năng cao trong khi giữ
cho chúng có thể dễ dàng bảo dưỡng (maintain).
Các tính năng cốt lõi Dưới đây là các tính năng cốt lõi của AngularJS:
Data-binding: Nó tự động đồng bộ hóa dữ liệu giữa thành phần model và view.
http://vietjack.com/angularjs/index.jsp Copyright © vietjack.com
http://vietjack.com/ Trang chia sẻ các bài học online miễn phí Page 7
Scope: Là những đối tượng hướng đến model, nó hoạt động như là cầu nối
giữacontroller và view.
Controller: Đây là những tính năng của AngularJS mà được giới hạn tới một scopecụ thể.
Services: AngularJS hoạt động với một vài dịch vụ (service) có sẵn , ví dụ $http để
tạo XMLHttpRequests. Nó là các singleton object mà được khởi tạo duy nhất một lần
trong ứng dụng.
Filters: Nó lựa chọn các tập con của item từ các mảng và trả về các mảng mới.
Directives: Directive là các marker trong các phần tử DOM (như các phần tử, thuộc tính,
css và nhiều hơn thế). Nó có thể dùng để tạo các thẻ HTML riêng phục vụ những mục đích
riêng. AngularJS có những directives có sẵn như ngBind,ngModel…
Templates:Là các rendered view với các thông tin từ controller và model. Nó có thể được
sử dụng trong các file riêng rẽ (ví dụ như index.jsp) hoặc nhiều view với một trang sử dụng
“partials”.
Routing: Là khái niệm của sự chuyển dịch qua lại các view.
Model View Whatever: MVC là một mô hình thiết kế để phân chia các ứng dụng thành
nhiều phần khác nhau (gọi là Model, View và Controller), một phần sử dụng với một nhiệm
vụ nhất định. AngularJS không triển khai MVC theo cách truyền thống, mà gắn liên hơn
với Model-View-ViewModel. Nhóm phát triển AngularJS đã đặt tên vui cho mô hình này
là Model View Whatever.
Deep Linking: Cho phép bạn mã hóa trạng thái các ứng dụng trên địa chỉ URL để nó có thể
được bookmark. Các ứng dụng có thể được phục hồi lại từ các địa chỉ URL với cùng một
trạng thái.
Dependency Injection: AngularJS có sẵn một hệ thống con dependency injectionđể giúp
các lập trình viên tạo ra các ứng dụng dễ phát triển, dễ hiểu và kiểm tra.
Khái niệm Biểu đồ dưới đây mô tả những thành phần quan trọng của AngularJS mà chúng ta sẽ đề cập cụ
thể ở các chương tiếp theo.
http://vietjack.com/angularjs/index.jsp Copyright © vietjack.com
http://vietjack.com/ Trang chia sẻ các bài học online miễn phí Page 8
Ưu điểm của AngularJS AngularJS cung cấp khả năng tạo ra các Single Page Application một các rất rõ ràng và
theo cách dễ bảo dưỡng (maintain).
AngularJS cung cấp khả năng Data binding tới HTML do đó đưa tới người dùng cảm giác
linh hoạt, thân thiện.
AngularJS code dễ dàng khi unit test.
AngularJS sử dụng dependency injection.
AngularJS cung cấp khả năng tái sử dụng các component.
Với AngularJS, lập trình viên sẽ viết ít code hơn, với nhiều chức năng hơn.
Với AngularJS, view là thành phần trong trang HTML thuần, trong khi controllerđược viết
bởi JavaScript với quá trình xử lý nghiệp vụ.
http://vietjack.com/angularjs/index.jsp Copyright © vietjack.com
http://vietjack.com/ Trang chia sẻ các bài học online miễn phí Page 9
Và trên tất cả, ứng dụng AngularJS có thể chạy trên hết các trình duyệt web, trên các nền tảng
Android và iOs.
Nhược điểm của AngularJS Mặc dù AngularJS có thể kể đến rất nhiều các ưu điểm, nhưng đến thời điểm này, nó vẫn có một
số điểm yếu sau:
Không an toàn : Là một JavaScript framework, ứng dụng được viết bởi AngularJS không
an toàn. Phải có các tính năng bảo mật và xác thực phía server sẽ giúp ứng dụng trở nên
an toàn hơn.
Nếu ứng dụng AngularJS bị vô hiệu hóa JavaScript phía người dùng thì bạn chỉ nhìn được
trang cơ bản, không thấy gì thêm.
Các thành phần của AngularJS AngularJS framework có thể được chia thành ba phần chính sau:
ng-app : directive này định nghĩa và liên kết một ứng dụng AngularJS tới HTML.
ng-model : directive này bind giá trị của dữ liệu ứng dụng AngularJS đến các điều khiển
đầu vào HTML.
ng-bind : directive này bind dữ liệu ứng dụng AngularJS đến các thẻ HTML.
Cài đặt môi trường AngularJS Ở trong chương này, chúng ta sẽ thảo luận về cách cài đặt thư viện AngularJS để được sử dụng
trong việc phát triển ứng dụng web. Chúng ta sẽ giới thiệu qua về cấu trúc thư mực và các nội
dụng của nó.
Khi bạn truy cập https://angularjs.org/, bạn sẽ thấy có 2 lựa chọn để bạn tải AngularJS:
http://vietjack.com/angularjs/index.jsp Copyright © vietjack.com
http://vietjack.com/ Trang chia sẻ các bài học online miễn phí Page 10
View on GitHub- Nhấn chuột vào nút này để truy cập vào GitHub, tại đây bạn sẽ có phiên
bản AngularJS mới nhất.
Download- Hoặc nhấn vào nút này và màn hình sau đây sẽ hiện lên:
Màn hình này cho có rất nhiều lựa chọn khi bạn sử dụng AngularJS như sau:
o Tải xuống và host các file trên máy cá nhân của bạn:
http://vietjack.com/angularjs/index.jsp Copyright © vietjack.com
http://vietjack.com/ Trang chia sẻ các bài học online miễn phí Page 11
Có 2 sự lựa chọn khác nhau là legacy và lastest. Lagacy dành cho các
phiên bản 1.2.x trở về trước, bản lastest là 1.3.x.
Bạn có thể sử dụng các bản thu nhỏ, không nén cũng như các phiên bản
nén.
o Truy cập CDN: Bạn cũng có thể truy cập AngularJS sử dụng CDN. Điều này có
nghĩa là bạn sử dụng AngularJS trên server của Google. Điều này có lợi thế là khi
một người sử dụng trang web đã tải một bản AngularJS trên CDN trên, nó sẽ không
phải tải lại nữa.
Chúng tôi sử dụng phiên bản CDN qua loạt bài hướng dẫn này.
Ví dụ Bây giờ chúng ta bắt đầu viết ví dụ đơn giản sử dụng thư viện AngularJS. Đầu tiên tôi tạo
trang myfirstexample.jspl như dưới đây:
<!doctype html>
<html>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.3.0-
beta.17/angular.min.js"></script>
</head>
<body ng-app="myapp">
<div ng-controller="HelloController" >
<h2>Welcome {{helloTo.title}} to the world of Tutorialspoint!</h2>
</div>
<script>
angular.module("myapp", [])
.controller("HelloController", function($scope) {
$scope.helloTo = {};
$scope.helloTo.title = "AngularJS";
});
</script>
</body>
</html>
http://vietjack.com/angularjs/index.jsp Copyright © vietjack.com
http://vietjack.com/ Trang chia sẻ các bài học online miễn phí Page 12
Dưới đây là những thành phần mô tả đoạn code bên trên 1 cách chi tiết:
Khai báo AngularJS
Để khai báo JavaScript trong đoạn code của bạn, bạn có thể khai báo như sau:
<head>
<script
src="http://ajax.googleapis.com/ajax/libs/angularjs/1.3.14/angular.min.js"></script>
</head>
Kiểm tra phiên bản AngularJS mới nhất trên trang web chính thức của họ.
Chỉ đến ứng dụng AngularJS
Phần tiếp theo là phần HTML chứa ứng dụng AngularJS. Cái này được thêm bởi thuộc tínhng-
app tại tại phần tử root của HTML trong ứng dụng AngularJS. Bạn có thể hoặc thêm vào phần
tử html hoặc trong phần tử body như sau:
<body ng-app="myapp">
</body>
View
View là thành phần sau:
<div ng-controller="HelloController" >
<h2>Welcome {{helloTo.title}} to the world of Tutorialspoint!</h2>
</div>
ng-controller thông báo cho AngularJS là controller nào được sử dụng trong phần
view.helloTo.title thông báo cho AngularJS viết giá trị của model với tên helloTo.title vào phần
HTML.
Controller
Controller là phần sau:
<script>
angular.module("myapp", [])
.controller("HelloController", function($scope) {
$scope.helloTo = {};
http://vietjack.com/angularjs/index.jsp Copyright © vietjack.com
http://vietjack.com/ Trang chia sẻ các bài học online miễn phí Page 13
$scope.helloTo.title = "AngularJS";
});
</script>
Đoạn code trên đăng ký một hàm controller với tên HelloController trong AngularJS module với
tên myapp .... Chúng ta sẽ tìm hiểu sâu hơn về Các module và Thành phần controllers trong
các chương tương ứng. Hàm controller được đăng ký với AngularJS qua cách gọi hàm
angular.module(...).controller(...).
Tham số $scope đã truyền tới hàm controller là một model. Hàm controller thêm 1 đối
tượng helloTo JavaScript , và thêm trường title vào trong đối tượng đó.
Thực hiện
Sau khi bạn lưu đoạn code dưới tên myfirstexample.jspl và mở dưới bất kỳ trình duyệt web nào.
Bạn sẽ thấy phần kết quả như sau:
Khi trang trên được tải trong trình duyệt đó, những điều sau sẽ xảy ra:
Tài liệu HTML sẽ được tải vào trình duyệt, được ước lượng bởi trình duyệt, AngularJS
JavaScript được tải, các đối tượng global của AngularJS được khởi tạo. Sau đó, JavaScript
sẽ đăng ký hàm controller cho việc thực thi.
Tiếp theo AngularJS duyệt qua các phần tử HTML để kiểm tra ứng dụng AngularJS và các
view. Khi view được tìm thấy, nó kết nối view với tính năng controller tương ứng.
Tiếp theo, AngularJS thực hiện các hàm controller, và trả về kết quả đến phần view với dữ
liệu là model được khởi tạo trong phần controller. Trang web được tải lên hoàn toàn.
AngularJS - Cấu trúc MVC Model View Controller hoặc MVC là cách gọi phổ biến, là một mô hình thiết kế phần mềm cho các
ứng dụng phát triển trên nền tảng web. Một Model View Controller được tạo thành bởi 3 thành
phần chính sau:
Model - Là thành phần thấp nhất của mô hình có nhiệm vụ duy trì dữ liệu.
http://vietjack.com/angularjs/index.jsp Copyright © vietjack.com
http://vietjack.com/ Trang chia sẻ các bài học online miễn phí Page 14
View - Có nhiệm vụ hiển thị các phần dữ liệu đến người sử dụng.
Controller - Là phần Code phần mềm mà điều khiển sự tương tác giữa Model và View
MVC trở lên phổ biến bởi nó phân tách ứng dụng một cách hợp lý giữa tầng giao diện người dùng
và hỗ trợ các phần có liên quan. Phần controller nhận tất cả các request cho ứng dụng và sau đó
làm việc với phần model để chuẩn bị dữ liệu cho phần view. Phần view sử dụng dữ liệu được
chuẩn bị bởi controller và sau đó tạo ra các dữ liệu được nhìn thấy phía người sử dụng. Phần mô
hình hóa MVC có thể được mô tả bằng hình vẽ dưới đây:
Phần Model Phần model cho nhiệm vụ quản lý dữ liệu. Nó phản hồi các yêu cầu từ phần view và thực hiện
những phần lệnh từ controller để cập nhật các giá trị cho bản thân nó.
Phần View Là phần hiển thị dữ liệu theo một định dạng cụ thể, được trigger bởi phần controller để hiển thị dữ
liệu.
http://vietjack.com/angularjs/index.jsp Copyright © vietjack.com
http://vietjack.com/ Trang chia sẻ các bài học online miễn phí Page 15
Phần Controller Phần controller tương tác với dữ liệu người dùng và thực hiện các sự thay đổi trên đối tượng
model. Phần controller nhận các tham số đầu vào, làm cho các tham số có hiệu lực, sau đó thực
hiện các hoạt động business mà trong đó có thể thay đổi trạng thái dữ liệu model.
AngularJS là một khung làm việc dựa trên mô hình MVC. Ở các chương tiếp theo, chúng ta sẽ thấy
cách AngularJS sử dụng phương thức MVC.
AngularJS - Ứng dụng đầu tiên Để mở đầu, chúng ta bắt đầu với việc tạo ứng dụng thực tế HelloWorld sử dụng AngularJS, chúng
tôi sẽ cho các bạn thấy các phần cụ thể của một ứng dụng AngularJS. Một ứng dụng AngularJS sẽ
bao gồm các thành phần sau:
ng-app : Directive này định nghĩa và liên kết một ứng dụng AngularJS đến trang HTML.
ng-model : Directive này bind các giá trị của dữ liệu ứng dụng AngularJS đến các điều
khiển đầu vào của HTML.
ng-bind : Directive này bind dữ liệu của ứng dụng AngularJS đến các thẻ HTML.
Các bước tạo một ứng dụng AngularJS: Bước 1: Tải framework
Là một khung JavaScript thuần, nó có thể được thêm vào bởi sử dụng thẻ <Script>.
<script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.3.14/angular.min.js">
</script>
Bước 2: Định nghĩa ứng dụng AngularJS sử dụng ng-app directive.
<div ng-app="">
...
</div>
Bước 3: Định nghĩa tên một model sử dụng ng-model directive.
<p>Enter your Name: <input type="text" ng-model="name"></p>
http://vietjack.com/angularjs/index.jsp Copyright © vietjack.com
http://vietjack.com/ Trang chia sẻ các bài học online miễn phí Page 16
Bước 4: Bind giá trị của model đã được định nghĩa ở trên sử dụng ng-bind directive.
<p>Hello <span ng-bind="name"></span>!</p>
Các bước để chạy một ứng dụng AngularJS Sử dụng các bước bên trên để tạo ra một trang HTML.
testAngularJS.jsp
<html>
<title>AngularJS First Application</title>
<body>
<h1>Sample Application</h1>
<div ng-app="">
<p>Enter your Name: <input type="text" ng-model="name"></p>
<p>Hello <span ng-bind="name"></span>!</p>
</div>
<script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.3.14/angular.min.js"></script>
</body>
</html>
Kết quả Mở trang textAngularJS.jsp trên trình duyệt, nhập tên của bạn và xem kết quả.
http://vietjack.com/angularjs/index.jsp Copyright © vietjack.com
http://vietjack.com/ Trang chia sẻ các bài học online miễn phí Page 17
Cách AngularJS tích hợp với HTML ng-app directive khai báo để bắt đầu một ứng dụng AngularJS.
ng-model directive sau đó tạo biến model tên “name” được sử dụng trong trang web HTML
và trong thẻ div với ng-app directive.
ng-bind sau đó sử dụng tên model để hiển thị trong thẻ span của HTML bất cứ khi nào
người dùng nhập một thứ gì đó vào hộp văn bản.
Thẻ đóng </div> để thông báo kết thúc một ứng dụng AngularJS.
Các Directive trong AngularJS AngularJS directive được sử dụng để kế thừa HTML. Có những thuộc tính đặc biệt bắt đầu với tiền
tố ng-. Chúng ta sẽ thảo luận những directive:
ng-app - Directive để bắt đầu một ứng dụng AngularJS.
ng-init - Directive để khởi tạo dữ liệu cho ứng dụng.
http://vietjack.com/angularjs/index.jsp Copyright © vietjack.com
http://vietjack.com/ Trang chia sẻ các bài học online miễn phí Page 18
ng-model - Directive định nghĩa model như là một biến có thể sử dụng trong AngularJS.
ng-repeat - Directive lặp lại các phần tử HTML cho mỗi item trong một tập hợp.
ng-app directive ng-app directive bắt đầu một ứng dụng AngularJS. Nó định nghĩa phần tử root. Nó tự động khởi tạo
ứng dụng và khởi tạo ứng dựng web sử dụng AngularJS. Nó cũng được sử dụng để tải các
module khác nhau của ứng dụng AngularJS. Ở các ví dụ tiếp theo, chúng ta định nghĩa một ứng
dụng AngularJS mặc định sử dụng thuộc tính ng-app của một phần tử div.
<div ng-app="">
...
</div>
ng-init directive ng-init khởi tạo các dữ liệu cho ứng dụng AngularJS. Nó được sử dụng để khởi tạo các giá trị cho
một biến được sử dụng trong ứng dụng. Ở ví dụ dưới đây, chúng ta định nghĩa một mảng các
Quốc gia. Chúng ta sử dụng cú pháp JSON để định nghĩa cho mảng các Quốc gia.
<div ng-app="" ng-init="countries=[{locale:'en-US',name:'United States'},
{locale:'en-GB',name:'United Kingdom'},
{locale:'en-FR',name:'France'}]">
...
</div>
ng-model directive ng-model directive định nghĩa các model/biến được sử dụng trong ứng dụng AngularJS. Ở trong ví
dụ sau, chúng ta sẽ định nghĩa một model dưới tên “name”.
<div ng-app="">
...
<p>Enter your Name: <input type="text" ng-model="name"></p>
</div>
http://vietjack.com/angularjs/index.jsp Copyright © vietjack.com
http://vietjack.com/ Trang chia sẻ các bài học online miễn phí Page 19
ng-repeat directive ng-repeat directive lặp lại các phần tử HTML cho mỗi item trong một tập hợp. Ở ví dụ dưới đây,
chúng ta sẽ duyệt qua một mảng các Quốc gia.
<div ng-app="">
...
<p>List of Countries with locale:</p>
<ol>
<li ng-repeat="country in countries">
{{ 'Country: ' + country.name + ', Locale: ' + country.locale }}
</li>
</ol>
</div>
Ví dụ Dưới đây là ví dụ bao gồm tất cả các directive mô tả bên trên:
testAngularJS.jsp
<html>
<title>AngularJS Directives</title>
<body>
<h1>Sample Application</h1>
<div ng-app="" ng-init="countries=[{locale:'en-US',name:'United States'},
{locale:'en-GB',name:'United Kingdom'},
{locale:'en-FR',name:'France'}]">
<p>Enter your Name: <input type="text" ng-model="name"></p>
<p>Hello <span ng-bind="name"></span>!</p>
<p>List of Countries with locale:</p>
<ol>
<li ng-repeat="country in countries">
{{ 'Country: ' + country.name + ', Locale: ' + country.locale }}
</li>
</ol>
http://vietjack.com/angularjs/index.jsp Copyright © vietjack.com
http://vietjack.com/ Trang chia sẻ các bài học online miễn phí Page 20
</div>
<script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.3.14/angular.min.js"></script>
</body>
</html>
Kết quả Mở trang textAngularJS.jsp trên trình duyệt, nhập tên của bạn và xem kết quả dưới đây.
Expression trong AngularJS Expression được sử dụng để bind các dữ liệu ứng dụng ra thẻ HTML. Expression được viết trong
dấu {{ expression}}. Expression có cách hoạt động tương đối giống ng-bind directive. Các
expression trong ứng dụng AngularJS là các JavaScript expression thuần túy và xuất kết quả là dữ
liệu mà chúng ta sử dụng.
Sử dụng các số <p>Expense on Books : {{cost * quantity}} Rs</p>
http://vietjack.com/angularjs/index.jsp Copyright © vietjack.com
http://vietjack.com/ Trang chia sẻ các bài học online miễn phí Page 21
Sử dụng các chuỗi <p>Hello {{student.firstname + " " + student.lastname}}!</p>
Sử dụng đối tượng <p>Roll No: {{student.rollno}}</p>
Sử dụng mảng <p>Marks(Math): {{marks[3]}}</p>
Ví dụ Dưới đây là ví dụ cho các expression mô tả bên trên:
testAngularJS.jsp
<html>
<title>AngularJS Expressions</title>
<body>
<h1>Sample Application</h1>
<div ng-app="" ng-init="quantity=1;cost=30;
student={firstname:'Mahesh',lastname:'Parashar',rollno:101};marks=[80,90,75,73,60]">
<p>Hello {{student.firstname + " " + student.lastname}}!</p>
<p>Expense on Books : {{cost * quantity}} Rs</p>
<p>Roll No: {{student.rollno}}</p>
<p>Marks(Math): {{marks[3]}}</p>
</div>
<script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.3.14/angular.min.js"></script>
</body>
</html>
Kết quả Mở trang textAngularJS.jsp trên trình duyệt web và xem kết quả dưới đây.
http://vietjack.com/angularjs/index.jsp Copyright © vietjack.com
http://vietjack.com/ Trang chia sẻ các bài học online miễn phí Page 22
Thành phần Controller trong AngularJS Một ứng dụng AngularJS hoạt động chính dựa vào phần controller để điều khiển luồng dữ liệu
trong ứng dụng. Một controller được định nghĩa bởi sử dụng directive là ng-controller. Một
controller là một đối tượng JavaScript bao gồm các thuộc tính và các hàm. Mỗi một controller chấp
nhận $scope là tham số để hướng đến ứng dụng/module mà phần controller này điều khiển.
<div ng-app="" ng-controller="studentController">
...
</div>
Ở đây là phần thông báo studentController sử dụng ng-controller directive. Những bước tiếp
theo, chúng ta sẽ định nghĩa studentController như sau:
<script>
function studentController($scope) {
$scope.student = {
firstName: "Mahesh",
http://vietjack.com/angularjs/index.jsp Copyright © vietjack.com
http://vietjack.com/ Trang chia sẻ các bài học online miễn phí Page 23
lastName: "Parashar",
fullName: function() {
var studentObject;
studentObject = $scope.student;
return studentObject.firstName + " " + studentObject.lastName;
}
};
}
</script>
studentController nghĩa như là một đối tượng JavaScript với $scope là tham số.
$scope hướng đến ứng dụng và được sử dụng bởi đối tượng studentController.
$scope.student là thuộc tính của đối tượng studentController.
firstName và lastName là hai thuộc tính của đối tượng $scope.student. Chúng ta khởi tạo
các giá trị cho chúng (firstName:Mahesh, lastName:Parashar).
fullName là hàm của đối tượng $scope.student có nhiệm vụ là trả về giá trị là tên đầy đủ của
student này.
Trong hàm fullname chúng ta nhận đối tượng student và sau đó trả lại tên đã kết nối.
Chú ý, chúng ta cũng có thể định nghĩa đối tượng controller ở các tệp JS riêng rẽ và khai
báo trong trang HTML.
Bây giờ chúng ta sử dụng thuộc tính studentController với ng-model hoặc expression như sau:
Enter first name: <input type="text" ng-model="student.firstName"><br>
Enter last name: <input type="text" ng-model="student.lastName"><br>
<br>
You are entering: {{student.fullName()}}
Chúng ta đã bind giá trị student.firstName và student.lastName vào 2 hộp input.
Chúng ta đã bind giá trị student.fullName() tới trang HTML.
http://vietjack.com/angularjs/index.jsp Copyright © vietjack.com
http://vietjack.com/ Trang chia sẻ các bài học online miễn phí Page 24
Bây giờ, mỗi khi chúng ta nhập một giá trị firstName hay lastName vào trong hộp input, tên
đầy đủ của sinh viên này sẽ được tự động cập nhật.
Ví dụ Dưới đây là ví dụ cho phần giải thích controller bên trên:
testAngularJS.jsp
<html>
<head>
<title>Angular JS Controller</title>
<script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.3.14/angular.min.js"></script>
</head>
<body>
<h2>AngularJS Sample Application</h2>
<div ng-app="mainApp" ng-controller="studentController">
Enter first name: <input type="text" ng-model="student.firstName"><br><br>
Enter last name: <input type="text" ng-model="student.lastName"><br>
<br>
You are entering: {{student.fullName()}}
</div>
<script>
var mainApp = angular.module("mainApp", []);
mainApp.controller('studentController', function($scope) {
$scope.student = {
firstName: "Mahesh",
lastName: "Parashar",
fullName: function() {
var studentObject;
studentObject = $scope.student;
return studentObject.firstName + " " + studentObject.lastName;
}
http://vietjack.com/angularjs/index.jsp Copyright © vietjack.com
http://vietjack.com/ Trang chia sẻ các bài học online miễn phí Page 25
};
});
</script>
</body>
</html>
Kết quả Mở trang textAngularJS.jsp trên trình duyệt web. Và xem kết quả.
Các Filter (bộ lọc) trong AngularJS Filter được sử dụng để thay đổi, lọc dữ liệu cho kết quả là một chuỗi khác. Dưới đây là danh sách
các filter thông dụng thường được sử dụng.
STT Tên Miêu tả
1 uppercase Chuyển đổi văn bản sang dạng chữ hoa
http://vietjack.com/angularjs/index.jsp Copyright © vietjack.com
http://vietjack.com/ Trang chia sẻ các bài học online miễn phí Page 26
2 lowercase Chuyển văn bản sang dạng chữ thường
3 currency Định dạng văn bản dạng tiền tệ
4 filter Lọc các mảng, kết quả là chuỗi con dựa trên các điều kiện cung
cấp
5 orderby Sắp xếp các mảng dựa vào các thông tin cung cấp
Bộ lọc uppercase Thêm uppercase filter vào một expression, theo cách sử dụng dưới đây, kết quả trường tên của
sinh viên sẽ được in hoa tất cả các ký tự.
Enter first name:<input type="text" ng-model="student.firstName">
Enter last name: <input type="text" ng-model="student.lastName">
Name in Upper Case: {{student.fullName() | uppercase}}
Bộ lọc lowercase Thêm lowercase filter vào một expression. Dưới đây là ví dụ cho bộ lọc với đầu ra là tất cả các ký
tự viết thường.
Enter first name:<input type="text" ng-model="student.firstName">
Enter last name: <input type="text" ng-model="student.lastName">
Name in Upper Case: {{student.fullName() | lowercase}}
Bộ lọc currency Thêm currency filter vào một expression. Dưới đây là ví dụ cho bộ lọc currency trả về kết quả dưới
định dạng tiền tệ.
Enter fees: <input type="text" ng-model="student.fees">
fees: {{student.fees | currency}}
Bộ lọc filter Để chỉ hiển thị các subject được yêu cầu, chúng ta sử dụng subjectName như là filter.
Enter subject: <input type="text" ng-model="subjectName">
Subject:
http://vietjack.com/angularjs/index.jsp Copyright © vietjack.com
http://vietjack.com/ Trang chia sẻ các bài học online miễn phí Page 27
<ul>
<li ng-repeat="subject in student.subjects | filter: subjectName">
{{ subject.name + ', marks:' + subject.marks }}
</li>
</ul>
Bộ lọc orderby Để sắp xếp các subject theo điểm số, chúng ta sử dụng orderBy marks.
Subject:
<ul>
<li ng-repeat="subject in student.subjects | orderBy:'marks'">
{{ subject.name + ', marks:' + subject.marks }}
</li>
</ul>
Ví dụ Dưới đây là một ví dụ hoàn chỉnh cho những gì được minh họa bên trên:
testAngularJS.jsp
<html>
<head>
<title>Angular JS Filters</title>
<script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.3.14/angular.min.js"></script>
</head>
<body>
<h2>AngularJS Sample Application</h2>
<div ng-app="mainApp" ng-controller="studentController">
<table border="0">
<tr><td>Enter first name:</td><td><input type="text" ng-model="student.firstName"></td></tr>
<tr><td>Enter last name: </td><td><input type="text" ng-model="student.lastName"></td></tr>
<tr><td>Enter fees: </td><td><input type="text" ng-model="student.fees"></td></tr>
<tr><td>Enter subject: </td><td><input type="text" ng-model="subjectName"></td></tr>
</table>
http://vietjack.com/angularjs/index.jsp Copyright © vietjack.com
http://vietjack.com/ Trang chia sẻ các bài học online miễn phí Page 28
<br/>
<table border="0">
<tr><td>Name in Upper Case: </td><td>{{student.fullName() | uppercase}}</td></tr>
<tr><td>Name in Lower Case: </td><td>{{student.fullName() | lowercase}}</td></tr>
<tr><td>fees: </td><td>{{student.fees | currency}}</td></tr>
<tr><td>Subject:</td><td>
<ul>
<li ng-repeat="subject in student.subjects | filter: subjectName |orderBy:'marks'">
{{ subject.name + ', marks:' + subject.marks }}
</li>
</ul>
</td></tr>
</table>
</div>
<script>
var mainApp = angular.module("mainApp", []);
mainApp.controller('studentController', function($scope) {
$scope.student = {
firstName: "Mahesh",
lastName: "Parashar",
fees:500,
subjects:[
{name:'Physics',marks:70},
{name:'Chemistry',marks:80},
{name:'Math',marks:65}
],
fullName: function() {
var studentObject;
studentObject = $scope.student;
return studentObject.firstName + " " + studentObject.lastName;
}
};
http://vietjack.com/angularjs/index.jsp Copyright © vietjack.com
http://vietjack.com/ Trang chia sẻ các bài học online miễn phí Page 29
});
</script>
</body>
</html>
Kết quả Mở trang textAngularJS.jsp trên trình duyệt web. Và xem kết quả dưới đây.
AngularJS - Bảng
Dữ liệu bảng thường được lặp lại theo thứ tự tự nhiên. Ng-repeat directive có thể được sử dụng để
vẽ các bảng một cách dễ dàng. Dưới đây là ví dụ về cách sử dụng ng-repeat để tạo ra các bảng.
<table>
<tr>
<th>Name</th>
http://vietjack.com/angularjs/index.jsp Copyright © vietjack.com
http://vietjack.com/ Trang chia sẻ các bài học online miễn phí Page 30
<th>Marks</th>
</tr>
<tr ng-repeat="subject in student.subjects">
<td>{{ subject.name }}</td>
<td>{{ subject.marks }}</td>
</tr>
</table>
Bảng có thể được sử dụng với CSS style.
<style>
table, th , td {
border: 1px solid grey;
border-collapse: collapse;
padding: 5px;
}
table tr:nth-child(odd) {
background-color: #f2f2f2;
}
table tr:nth-child(even) {
background-color: #ffffff;
}
</style>
Ví dụ Dưới đây là ví dụ cụ thể cho directive được giới thiệu bên trên.
testAngularJS.jsp
<html>
<head>
<title>Angular JS Table</title>
<script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.3.14/angular.min.js"></script>
<style>
table, th , td {
http://vietjack.com/angularjs/index.jsp Copyright © vietjack.com
http://vietjack.com/ Trang chia sẻ các bài học online miễn phí Page 31
border: 1px solid grey;
border-collapse: collapse;
padding: 5px;
}
table tr:nth-child(odd) {
background-color: #f2f2f2;
}
table tr:nth-child(even) {
background-color: #ffffff;
}
</style>
</head>
<body>
<h2>AngularJS Sample Application</h2>
<div ng-app="mainApp" ng-controller="studentController">
<table border="0">
<tr><td>Enter first name:</td><td><input type="text" ng-model="student.firstName"></td></tr>
<tr><td>Enter last name: </td><td><input type="text" ng-model="student.lastName"></td></tr>
<tr><td>Name: </td><td>{{student.fullName()}}</td></tr>
<tr><td>Subject:</td><td>
<table>
<tr>
<th>Name</th>
<th>Marks</th>
</tr>
<tr ng-repeat="subject in student.subjects">
<td>{{ subject.name }}</td>
<td>{{ subject.marks }}</td>
</tr>
</table>
</td></tr>
</table>
</div>
http://vietjack.com/angularjs/index.jsp Copyright © vietjack.com
http://vietjack.com/ Trang chia sẻ các bài học online miễn phí Page 32
<script>
var mainApp = angular.module("mainApp", []);
mainApp.controller('studentController', function($scope) {
$scope.student = {
firstName: "Mahesh",
lastName: "Parashar",
fees:500,
subjects:[
{name:'Physics',marks:70},
{name:'Chemistry',marks:80},
{name:'Math',marks:65},
{name:'English',marks:75},
{name:'Hindi',marks:67}
],
fullName: function() {
var studentObject;
studentObject = $scope.student;
return studentObject.firstName + " " + studentObject.lastName;
}
};
});
</script>
</body>
</html>
Kết quả Mở trang textAngularJS.jsp trên trình duyệt web. Và xem kết quả bên dưới.
http://vietjack.com/angularjs/index.jsp Copyright © vietjack.com
http://vietjack.com/ Trang chia sẻ các bài học online miễn phí Page 33
Phần tử HTML DOM trong AngularJS
Những directive dưới đây có thể được sử dụng để bind dữ liệu trong ứng dụng tới các thuộc tính
trong phần tử HTML DOM.
STT Tên Miêu tả
1 ng-disabled disables một điều khiển (control) đã cung cấp
2 ng-show Chỉ một điều khiển đã cung cấp
3 ng-hide Ẩn một điều khiển đã cung cấp
http://vietjack.com/angularjs/index.jsp Copyright © vietjack.com
http://vietjack.com/ Trang chia sẻ các bài học online miễn phí Page 34
4 ng-click Biểu diễn một sự biến AngularJS click
ng-disabled directive Thêm thuộc tính ng-disable vào một nút HTML và gắn dữ liệu này với model. Bind model tới một
hộp kiểm tra và xem kết quả.
<input type="checkbox" ng-model="enableDisableButton">Disable Button
<button ng-disabled="enableDisableButton">Click Me!</button>
ng-show directive Thêm thuộc tính ng-show vào nút HTML và gắn nó cho model. Bind model đến 1 hộp kiểm tra và
xem kết quả.
<input type="checkbox" ng-model="showHide1">Show Button
<button ng-show="showHide1">Click Me!</button>
ng-hide directive Thêm thuộc tính ng-hide vào nút HTML và gắn nó cho model. Bind model đến 1 hộp kiểm tra và
xem kết quả.
<input type="checkbox" ng-model="showHide2">Hide Button
<button ng-hide="showHide2">Click Me!</button>
ng-click directive Thêm thuộc tính ng-click vào Nút HTML và gắn nó cho model. Bind model đến hmtl và xem kết
quả.
<p>Total click: {{ clickCounter }}</p></td>
<button ng-click="clickCounter = clickCounter + 1">Click Me!</button>
Ví dụ Dưới đây là toàn bộ ví dụ cho phần mô tả đã đề cập phía trên.
testAngularJS.jsp
<html>
<head>
http://vietjack.com/angularjs/index.jsp Copyright © vietjack.com
http://vietjack.com/ Trang chia sẻ các bài học online miễn phí Page 35
<title>AngularJS HTML DOM</title>
</head>
<body>
<h2>AngularJS Sample Application</h2>
<div ng-app="">
<table border="0">
<tr>
<td><input type="checkbox" ng-model="enableDisableButton">Disable Button</td>
<td><button ng-disabled="enableDisableButton">Click Me!</button></td>
</tr>
<tr>
<td><input type="checkbox" ng-model="showHide1">Show Button</td>
<td><button ng-show="showHide1">Click Me!</button></td>
</tr>
<tr>
<td><input type="checkbox" ng-model="showHide2">Hide Button</td>
<td><button ng-hide="showHide2">Click Me!</button></td>
</tr>
<tr>
<td><p>Total click: {{ clickCounter }}</p></td>
<td><button ng-click="clickCounter = clickCounter + 1">Click Me!</button></td>
</tr>
</table>
</div>
<script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.3.14/angular.min.js"></script>
</body>
</html>
Kết quả Mở trang textAngularJS.jsp trên trình duyệt web và xem kết quả.
http://vietjack.com/angularjs/index.jsp Copyright © vietjack.com
http://vietjack.com/ Trang chia sẻ các bài học online miễn phí Page 36
Các Module trong AngularJS AngularJS hỗ trợ tiếp cận theo hướng module. Module được sử dụng để phân biệt phần xử lý logic
(service), controller và ứng dụng … và giúp code trở nên rõ ràng. Chúng ta định nghĩa module
thành các file JavaScript riêng rã và đặt tên chúng theo mỗi tệp module.js. Ở ví dụ này chúng ta sẽ
tạo ra 2 module:
Module ứng dụng - được sử dụng để khởi tạo ứng dụng với controller.
Module điều khiển - được sử dụng để định nghĩa controller.
Module ứng dụng mainApp.js
var mainApp = angular.module("mainApp", []);
Trên đây chúng ta khai báo module ứng dụng mainApp sử dụng chức năng module hóa của
AngularJS. Chúng ta khởi tạo một mảng rỗng cho nó. Mảng này thường chứa các thành phần độc
lập trong module.
http://vietjack.com/angularjs/index.jsp Copyright © vietjack.com
http://vietjack.com/ Trang chia sẻ các bài học online miễn phí Page 37
Module điều khiển studentController.js
mainApp.controller("studentController", function($scope) {
$scope.student = {
firstName: "Mahesh",
lastName: "Parashar",
fees:500,
subjects:[
{name:'Physics',marks:70},
{name:'Chemistry',marks:80},
{name:'Math',marks:65},
{name:'English',marks:75},
{name:'Hindi',marks:67}
],
fullName: function() {
var studentObject;
studentObject = $scope.student;
return studentObject.firstName + " " + studentObject.lastName;
}
};
});
Ở đây chúng ta khai báo một module là studentController sử dụng chức năngmainApp.controller.
Sử dụng các Module <div ng-app="mainApp" ng-controller="studentController">
..
<script src="mainApp.js"></script>
<script src="studentController.js"></script>
Ở đây chúng ta sử dụng module ứng dụng sử dụng ng-app directive và controller sử dụngng-
controller directive. Chúng ta gộp cả mainApp.js và studentController.js trong tệp HTML.
http://vietjack.com/angularjs/index.jsp Copyright © vietjack.com
http://vietjack.com/ Trang chia sẻ các bài học online miễn phí Page 38
Ví dụ Dưới đây là ví dụ cho phần mô tả bên trên:
testAngularJS.jsp
<html>
<head>
<title>Angular JS Modules</title>
<script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.3.14/angular.min.js"></script>
<script src="mainApp.js"></script>
<script src="studentController.js"></script>
<style>
table, th , td {
border: 1px solid grey;
border-collapse: collapse;
padding: 5px;
}
table tr:nth-child(odd) {
background-color: #f2f2f2;
}
table tr:nth-child(even) {
background-color: #ffffff;
}
</style>
</head>
<body>
<h2>AngularJS Sample Application</h2>
<div ng-app="mainApp" ng-controller="studentController">
<table border="0">
<tr><td>Enter first name:</td><td><input type="text" ng-model="student.firstName"></td></tr>
<tr><td>Enter last name: </td><td><input type="text" ng-model="student.lastName"></td></tr>
<tr><td>Name: </td><td>{{student.fullName()}}</td></tr>
<tr><td>Subject:</td><td>
<table>
http://vietjack.com/angularjs/index.jsp Copyright © vietjack.com
http://vietjack.com/ Trang chia sẻ các bài học online miễn phí Page 39
<tr>
<th>Name</th>
<th>Marks</th>
</tr>
<tr ng-repeat="subject in student.subjects">
<td>{{ subject.name }}</td>
<td>{{ subject.marks }}</td>
</tr>
</table>
</td></tr>
</table>
</div>
</body>
</html>
mainApp.js
var mainApp = angular.module("mainApp", []);
studentController.js
mainApp.controller("studentController", function($scope) {
$scope.student = {
firstName: "Mahesh",
lastName: "Parashar",
fees:500,
subjects:[
{name:'Physics',marks:70},
{name:'Chemistry',marks:80},
{name:'Math',marks:65},
{name:'English',marks:75},
{name:'Hindi',marks:67}
],
fullName: function() {
var studentObject;
http://vietjack.com/angularjs/index.jsp Copyright © vietjack.com
http://vietjack.com/ Trang chia sẻ các bài học online miễn phí Page 40
studentObject = $scope.student;
return studentObject.firstName + " " + studentObject.lastName;
}
};
});
Kết quả Mở trang textAngularJS.jsp trên trình duyệt. Dưới đây là kết quả.
Form trong AngularJS
AngularJS bổ sung cho form các tính năng về filling và validation. Bạn có thể dùng ng-click để xử
lý AngularJS click trên nút và sử dụng các cờ hiệu $dirty và $invalid để làm cho nó có hiệu lực. Sử
dụng novalidate với khai báo form để vô hiệu hóa tính năng valicate của form. Phần điều khiển
form sử dụng một các hiệu quả các sự biến của AngularJS.
http://vietjack.com/angularjs/index.jsp Copyright © vietjack.com
http://vietjack.com/ Trang chia sẻ các bài học online miễn phí Page 41
Các sự biến AngularJS cung cấp nhiều sự biến có thể được liên kết với phần điều khiển form của HTML. Ví dụ
ng-click thường gắn với nút (button). Dưới đây là các sự biến được hỗ trợ bởi AngularJS.
ng-click
ng-dbl-click
ng-mousedown
ng-mouseup
ng-mouseenter
ng-mouseleave
ng-mousemove
ng-mouseover
ng-keydown
ng-keyup
ng-keypress
ng-change
ng-click Reset dữ liệu trên form sử dụng ng-click directive của một button.
<input name="firstname" type="text" ng-model="firstName" required>
<input name="lastname" type="text" ng-model="lastName" required>
<input name="email" type="email" ng-model="email" required>
<button ng-click="reset()">Reset</button>
<script>
function studentController($scope) {
$scope.reset = function(){
$scope.firstName = "Mahesh";
http://vietjack.com/angularjs/index.jsp Copyright © vietjack.com
http://vietjack.com/ Trang chia sẻ các bài học online miễn phí Page 42
$scope.lastName = "Parashar";
$scope.email = "[email protected]";
}
$scope.reset();
}
</script>
Validate dữ liệu Dưới đây là các biến dùng để theo dõi lỗi.
$dirty - Thông báo rằng dữ liệu bị thay đổi.
$invalid- Thông báo rằng dữ liệu nhập vào không hợp lệ.
$error- Thông báo chính xác lỗi.
Ví dụ Dưới đây là ví dụ minh họa các directive bên trên:
testAngularJS.jsp
<html>
<head>
<title>Angular JS Forms</title>
<script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.3.14/angular.min.js"></script>
<style>
table, th , td {
border: 1px solid grey;
border-collapse: collapse;
padding: 5px;
}
table tr:nth-child(odd) {
background-color: #f2f2f2;
}
table tr:nth-child(even) {
background-color: #ffffff;
http://vietjack.com/angularjs/index.jsp Copyright © vietjack.com
http://vietjack.com/ Trang chia sẻ các bài học online miễn phí Page 43
}
</style>
</head>
<body>
<h2>AngularJS Sample Application</h2>
<div ng-app="mainApp" ng-controller="studentController">
<form name="studentForm" novalidate>
<table border="0">
<tr><td>Enter first name:</td><td><input name="firstname" type="text" ng-model="firstName"
required>
<span style="color:red" ng-show="studentForm.firstname.$dirty &&
studentForm.firstname.$invalid">
<span ng-show="studentForm.firstname.$error.required">First Name is required.</span>
</span>
</td></tr>
<tr><td>Enter last name: </td><td><input name="lastname" type="text" ng-model="lastName"
required>
<span style="color:red" ng-show="studentForm.lastname.$dirty &&
studentForm.lastname.$invalid">
<span ng-show="studentForm.lastname.$error.required">Last Name is required.</span>
</span>
</td></tr>
<tr><td>Email: </td><td><input name="email" type="email" ng-model="email" length="100"
required>
<span style="color:red" ng-show="studentForm.email.$dirty && studentForm.email.$invalid">
<span ng-show="studentForm.email.$error.required">Email is required.</span>
<span ng-show="studentForm.email.$error.email">Invalid email address.</span>
</span>
</td></tr>
<tr><td><button ng-click="reset()">Reset</button></td><td><button
ng-disabled="studentForm.firstname.$dirty && studentForm.firstname.$invalid ||
studentForm.lastname.$dirty && studentForm.lastname.$invalid ||
studentForm.email.$dirty && studentForm.email.$invalid"
ng-click="submit()">Submit</button></td></tr>
</table>
http://vietjack.com/angularjs/index.jsp Copyright © vietjack.com
http://vietjack.com/ Trang chia sẻ các bài học online miễn phí Page 44
</form>
</div>
<script>
var mainApp = angular.module("mainApp", []);
mainApp.controller('studentController', function($scope) {
$scope.reset = function(){
$scope.firstName = "Mahesh";
$scope.lastName = "Parashar";
$scope.email = "[email protected]";
}
$scope.reset();
});
</script>
</body>
</html>
Kết quả Mở trang textAngularJS.jsp trên trình duyệt và xem kết quả.
http://vietjack.com/angularjs/index.jsp Copyright © vietjack.com
http://vietjack.com/ Trang chia sẻ các bài học online miễn phí Page 45
Include trong AngularJS
HTML không hỗ trợ nhúng trang web HTML trong trang HTML. Để đạt được chức năng này có thể
sử dụng các phương thức sau:
Sử dụng Ajax - Tạo một server call để nhận trang HTML tương ứng và thiết lập nó trong
thành phần innerHTML của phần điều khiển HTML.
Sử dụng Server Side Includes - JSP,PHP và các công nghệ web server khác có thể
include HTML page trong một trang trang web động.
Với AngularJS, chúng ta có thể nhúng trang HTML sử dụng ng-include directive.
<div ng-app="" ng-controller="studentController">
<div ng-include="'main.jsp'"></div>
<div ng-include="'subjects.jsp'"></div>
</div>
Ví dụ tryAngularJS.jsp
http://vietjack.com/angularjs/index.jsp Copyright © vietjack.com
http://vietjack.com/ Trang chia sẻ các bài học online miễn phí Page 46
<html>
<head>
<title>Angular JS Includes</title>
<script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.3.14/angular.min.js"></script>
<style>
table, th , td {
border: 1px solid grey;
border-collapse: collapse;
padding: 5px;
}
table tr:nth-child(odd) {
background-color: #f2f2f2;
}
table tr:nth-child(even) {
background-color: #ffffff;
}
</style>
</head>
<body>
<h2>AngularJS Sample Application</h2>
<div ng-app="mainApp" ng-controller="studentController">
<div ng-include="'main.jsp'"></div>
<div ng-include="'subjects.jsp'"></div>
</div>
<script>
var mainApp = angular.module("mainApp", []);
mainApp.controller('studentController', function($scope) {
$scope.student = {
firstName: "Mahesh",
lastName: "Parashar",
fees:500,
subjects:[
http://vietjack.com/angularjs/index.jsp Copyright © vietjack.com
http://vietjack.com/ Trang chia sẻ các bài học online miễn phí Page 47
{name:'Physics',marks:70},
{name:'Chemistry',marks:80},
{name:'Math',marks:65},
{name:'English',marks:75},
{name:'Hindi',marks:67}
],
fullName: function() {
var studentObject;
studentObject = $scope.student;
return studentObject.firstName + " " + studentObject.lastName;
}
};
});
</script>
</body>
</html>
main.jsp
<table border="0">
<tr><td>Enter first name:</td><td><input type="text" ng-
model="student.firstName"></td></tr>
<tr><td>Enter last name: </td><td><input type="text" ng-model="student.lastName"></td></tr>
<tr><td>Name: </td><td>{{student.fullName()}}</td></tr>
</table>
subjects.jsp
<p>Subjects:</p>
<table>
<tr>
<th>Name</th>
<th>Marks</th>
</tr>
<tr ng-repeat="subject in student.subjects">
<td>{{ subject.name }}</td>
http://vietjack.com/angularjs/index.jsp Copyright © vietjack.com
http://vietjack.com/ Trang chia sẻ các bài học online miễn phí Page 48
<td>{{ subject.marks }}</td>
</tr>
</table>
Kết quả Để chạy ví dụ này, bạn cần phần tạo ra các tệp textAngularJS.jsp, main.jsp, subjects.jsp với
webserver. Mở trang textAngularJS.jsp sử dụng địa chỉ địa chỉ URL trên server và xem kết quả.
Ajax trong AngularJS
AngularJS cung cấp điều khiển $http mà làm như là service để đọc dữ liệu từ server. Server có thể
tạo database call để nhận các bản ghi. AngularJS cần dữ liệu dưới định dạng JSON. Khi dữ liệu
sẵn sàng, $http có thể được sử dụng để nhận dữ liệu từ server theo cách sau đây:
function studentController($scope,$http) {
http://vietjack.com/angularjs/index.jsp Copyright © vietjack.com
http://vietjack.com/ Trang chia sẻ các bài học online miễn phí Page 49
var url="data.txt";
$http.get(url).success( function(response) {
$scope.students = response;
});
}
Ở đây tệp data.txt chứa các bản ghi về student. $http service tạo một ajax call và lấy kết quả trả về
cho đối tượng student. “students” model có thể dùng để vẽ bảng với HTML.
Các ví dụ data.txt
[
{
"Name" : "Mahesh Parashar",
"RollNo" : 101,
"Percentage" : "80%"
},
{
"Name" : "Dinkar Kad",
"RollNo" : 201,
"Percentage" : "70%"
},
{
"Name" : "Robert",
"RollNo" : 191,
"Percentage" : "75%"
},
{
"Name" : "Julian Joe",
"RollNo" : 111,
"Percentage" : "77%"
}
]
http://vietjack.com/angularjs/index.jsp Copyright © vietjack.com
http://vietjack.com/ Trang chia sẻ các bài học online miễn phí Page 50
testAngularJS.jsp
<html>
<head>
<title>Angular JS Includes</title>
<style>
table, th , td {
border: 1px solid grey;
border-collapse: collapse;
padding: 5px;
}
table tr:nth-child(odd) {
background-color: #f2f2f2;
}
table tr:nth-child(even) {
background-color: #ffffff;
}
</style>
</head>
<body>
<h2>AngularJS Sample Application</h2>
<div ng-app="" ng-controller="studentController">
<table>
<tr>
<th>Name</th>
<th>Roll No</th>
<th>Percentage</th>
</tr>
<tr ng-repeat="student in students">
<td>{{ student.Name }}</td>
<td>{{ student.RollNo }}</td>
<td>{{ student.Percentage }}</td>
</tr>
</table>
http://vietjack.com/angularjs/index.jsp Copyright © vietjack.com
http://vietjack.com/ Trang chia sẻ các bài học online miễn phí Page 51
</div>
<script>
function studentController($scope,$http) {
var url="data.txt";
$http.get(url).success( function(response) {
$scope.students = response;
});
}
</script>
<script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.2.15/angular.min.js"></script>
</body>
</html>
Kết quả Để chạy ví dụ này, bạn cần tạo testAngularJS.jsp and data.txt tới một webserver. Mở
tệptestAngularJS.jsp với địa chỉ URL trên server trên một trình duyệt web và xem kết quả.
http://vietjack.com/angularjs/index.jsp Copyright © vietjack.com
http://vietjack.com/ Trang chia sẻ các bài học online miễn phí Page 52
AngularJS - View AngularJS hỗ trợ Single Page Application thông qua multiple view trên một trang đơn. Để làm
được điều này, AngularJS cung cấp ng-view và ng-template directive và $routeProvider service.
ng-view Thẻ ng-view đơn giản là tạo nơi giữ các màn hình view tương ứng có thể được đặt trong nó dựa
vào cấu hình.
Cách sử dụng Định nghĩa thẻ div với ng-view trong module chính.
<div ng-app="mainApp">
...
<div ng-view></div>
</div>
ng-template ng-template directive được sử dụng để tạo ra các HTML view sử dụng thẻ script. Nó chứa thuộc
tính “id” được sử dụng bởi $routeProvider để liên kết view và controller.
Cách sử dụng Định nghĩa một khối script với kiểu như ng-template trong module chính.
<div ng-app="mainApp">
...
<script type="text/ng-template" id="addStudent.jsp">
<h2> Add Student </h2>
{{message}}
</script>
</div>
http://vietjack.com/angularjs/index.jsp Copyright © vietjack.com
http://vietjack.com/ Trang chia sẻ các bài học online miễn phí Page 53
$routeProvider Là dịch vụ chính trong việc tạo các cấu hình cho địa chỉ URL, liên kết chúng với trang HTML tương
ứng hoặc ng-template và gắn controller với chúng.
Cách sử dụng Định nghĩa một khối script trong module chính và thiết lập cấu hình định tuyến.
var mainApp = angular.module("mainApp", ['ngRoute']);
mainApp.config(['$routeProvider',
function($routeProvider) {
$routeProvider.
when('/addStudent', {
templateUrl: 'addStudent.jsp',
controller: 'AddStudentController'
}).
when('/viewStudents', {
templateUrl: 'viewStudents.jsp',
controller: 'ViewStudentsController'
}).
otherwise({
redirectTo: '/addStudent'
});
}]);
Dưới đây là những điểm quan trọng cần xem xét từ ví dụ trên.
$routeProvider định nghĩa là một hàm dưới config của mainApp module sử dụng khóa là
“$routeProvider”.
$routeProvider.when định nghĩa một địa chỉ URL “/addStudent” được sử dụng để liên kết
đến trang “addStudent.jsp”, addStudent.jspl nên đặt chung thư mục đường dẫn với trang
HTML. Nếu trang HTML không được định nghĩa, ng-template sẽ sử dụng
id=”addStudent.jspl”. Chúng ta sử dụng ng-template.
http://vietjack.com/angularjs/index.jsp Copyright © vietjack.com
http://vietjack.com/ Trang chia sẻ các bài học online miễn phí Page 54
"otherwise" được sử dụng để thiết lập view mặc định.
"controller" được để thiết lập controller tương ứng với từng view.
Ví dụ Dưới đây là ví dụ minh họa cho những directive mô tả bên trên.
testAngularJS.jsp
<html>
<head>
<title>Angular JS Views</title>
<script
src="http://ajax.googleapis.com/ajax/libs/angularjs/1.3.14/angular.min.js"></script>
<script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.3.14/angular-
route.min.js"></script>
</head>
<body>
<h2>AngularJS Sample Application</h2>
<div ng-app="mainApp">
<p><a href="#addStudent">Add Student</a></p>
<p><a href="#viewStudents">View Students</a></p>
<div ng-view></div>
<script type="text/ng-template" id="addStudent.jsp">
<h2> Add Student </h2>
{{message}}
</script>
<script type="text/ng-template" id="viewStudents.jsp">
<h2> View Students </h2>
{{message}}
</script>
</div>
<script>
var mainApp = angular.module("mainApp", ['ngRoute']);
http://vietjack.com/angularjs/index.jsp Copyright © vietjack.com
http://vietjack.com/ Trang chia sẻ các bài học online miễn phí Page 55
mainApp.config(['$routeProvider',
function($routeProvider) {
$routeProvider.
when('/addStudent', {
templateUrl: 'addStudent.jsp',
controller: 'AddStudentController'
}).
when('/viewStudents', {
templateUrl: 'viewStudents.jsp',
controller: 'ViewStudentsController'
}).
otherwise({
redirectTo: '/addStudent'
});
}]);
mainApp.controller('AddStudentController', function($scope) {
$scope.message = "This page will be used to display add student form";
});
mainApp.controller('ViewStudentsController', function($scope) {
$scope.message = "This page will be used to display all the students";
});
</script>
</body>
</html>
Kết quả Mở trang textAngularJS.jsp trên trình duyệt web và bạn sẽ thấy kết quả sau.
http://vietjack.com/angularjs/index.jsp Copyright © vietjack.com
http://vietjack.com/ Trang chia sẻ các bài học online miễn phí Page 56
AngularJS - Scope Scope là đối tượng JavaScript đặc biệt có vai trò liên kết controller và view. Scope chứa thông tin
là các dữ liệu model. Trong controller, dữ liệu model có thể được truy cập qua đối tượng $scope.
<script>
var mainApp = angular.module("mainApp", []);
mainApp.controller("shapeController", function($scope) {
$scope.message = "In shape controller";
$scope.type = "Shape";
});
</script>
Dưới đây là những điểm quan trọng của ví dụ trên.
$scope được truyền như là tham số đầu tiên của controller trong hàm khởi tạo của nó.
http://vietjack.com/angularjs/index.jsp Copyright © vietjack.com
http://vietjack.com/ Trang chia sẻ các bài học online miễn phí Page 57
$scope.message và $scope.type là các model được sử dụng trong trang HTML.
Chúng ta thiết lập các giá trị cho model và tác động lên Module ứng dụng với controller và
shapeController.
Chúng ta có thể định nghĩa các hàm với $scope.
Tính kế thừa của Scope Scope là controller riêng biệt. Chúng ta định nghĩa nested controller (các controller lồng nhau) để
các controller con sẽ kế thừa từ các controller cha..
<script>
var mainApp = angular.module("mainApp", []);
mainApp.controller("shapeController", function($scope) {
$scope.message = "In shape controller";
$scope.type = "Shape";
});
mainApp.controller("circleController", function($scope) {
$scope.message = "In circle controller";
});
</script>
Dưới đây là những điểm chính qua ví dụ trên.
Chúng ta tạo giá trị biến model cho shapeController.
Chúng ta ghi đè thông báo của controller con circleController. Khi “message” được sử dụng
trong các module của circleController, giá trị message ghi đè sẽ được sử dụng.
Ví dụ Dưới đây là phần ví dụ cho phần hướng dẫn bên trên.
testAngularJS.jsp
<html>
http://vietjack.com/angularjs/index.jsp Copyright © vietjack.com
http://vietjack.com/ Trang chia sẻ các bài học online miễn phí Page 58
<head>
<title>Angular JS Forms</title>
</head>
<body>
<h2>AngularJS Sample Application</h2>
<div ng-app="mainApp" ng-controller="shapeController">
<p>{{message}} <br/> {{type}} </p>
<div ng-controller="circleController">
<p>{{message}} <br/> {{type}} </p>
</div>
<div ng-controller="squareController">
<p>{{message}} <br/> {{type}} </p>
</div>
</div>
<script
src="http://ajax.googleapis.com/ajax/libs/angularjs/1.3.14/angular.min.js"></script>
<script>
var mainApp = angular.module("mainApp", []);
mainApp.controller("shapeController", function($scope) {
$scope.message = "In shape controller";
$scope.type = "Shape";
});
mainApp.controller("circleController", function($scope) {
$scope.message = "In circle controller";
});
mainApp.controller("squareController", function($scope) {
$scope.message = "In square controller";
$scope.type = "Square";
});
http://vietjack.com/angularjs/index.jsp Copyright © vietjack.com
http://vietjack.com/ Trang chia sẻ các bài học online miễn phí Page 59
</script>
</body>
</html>
Kết quả Mở trang textAngularJS.jsp trên trình duyệt web. Và xem kết quả dưới đây.
Các Service trong AngularJS AngularJS hỗ trợ các khái niệm "Seperation of Concerns - Chia để trị" sử dụng cấu trúc service.
Service là các hàm JavaScript và có nhiệm vụ trên những task nhất định. Nó làm cho chúng thành
những thực thể riêng rẽ dễ dàng trong việc bảo trì và kiểm thử. Controller, filter có thể gọi chúng
một cách đơn giản. Service thường được inject sử dụng cơ chếdependency injection của
AngularJS.
AngularJS cung cấp rất nhiều những service được định nghĩa cho trước:
$http,$scope,$route,$window,$location…Mỗi một service có những nhiệm vụ nhất định. Ví dụ,
http://vietjack.com/angularjs/index.jsp Copyright © vietjack.com
http://vietjack.com/ Trang chia sẻ các bài học online miễn phí Page 60
$http được sử dụng để tạo ra các ajax request lên server để lấy dữ liệu về. $route được sử dụng
để định nghĩa thông tin routing …. Những service mặc định của AngularJS bắt đầu bởi biểu tượng
$.
Có 2 cách để tạo một service là:
factory
service
Sử dụng phương thức factory Khi sử dụng factory method, đầu tiên chúng ta định nghĩa factory và gắn method cho nó.
var mainApp = angular.module("mainApp", []);
mainApp.factory('MathService', function() {
var factory = {};
factory.multiply = function(a, b) {
return a * b
}
return factory;
});
Sử dụng phương thức service Sử dụng service method, chúng ta sẽ định nghĩa service sau đó gán method với nó. Chúng ta cũng
inject những service có sẵn cho nó.
mainApp.service('CalcService', function(MathService){
this.square = function(a) {
return MathService.multiply(a,a);
}
});
Ví dụ Dưới đây là ví dụ minh họa cho chỉ dẫn bên trên.
testAngularJS.jsp
http://vietjack.com/angularjs/index.jsp Copyright © vietjack.com
http://vietjack.com/ Trang chia sẻ các bài học online miễn phí Page 61
<html>
<head>
<title>Angular JS Services</title>
<script
src="http://ajax.googleapis.com/ajax/libs/angularjs/1.3.14/angular.min.js"></script>
</head>
<body>
<h2>AngularJS Sample Application</h2>
<div ng-app="mainApp" ng-controller="CalcController">
<p>Enter a number: <input type="number" ng-model="number" />
<button ng-click="square()">X<sup>2</sup></button>
<p>Result: {{result}}</p>
</div>
<script>
var mainApp = angular.module("mainApp", []);
mainApp.factory('MathService', function() {
var factory = {};
factory.multiply = function(a, b) {
return a * b
}
return factory;
});
mainApp.service('CalcService', function(MathService){
this.square = function(a) {
return MathService.multiply(a,a);
}
});
mainApp.controller('CalcController', function($scope, CalcService) {
$scope.square = function() {
$scope.result = CalcService.square($scope.number);
}
http://vietjack.com/angularjs/index.jsp Copyright © vietjack.com
http://vietjack.com/ Trang chia sẻ các bài học online miễn phí Page 62
});
</script>
</body>
</html>
Kết quả Mở trang textAngularJS.jsp trên trình duyệt web và xem kết quả:
Dependency Injection trong AngularJS Dependency Injection là một mô hình thiết kế phần mềm mà trong đó các thành phần được đưa ra
từ những phần phụ thuộc nó - dependencies thay cho việc hard coding chúng trong các thành
phần. Điều này làm cho cách thành phần phụ thuộc nhau trong phần cấu hình. Nó giúp việc làm có
các thành phần có tính tái sử dụng cao, dễ bảo dưỡng và kiểm thử.
AngularJS cung cấp kỹ thuật Dependency Injection, cho phép các thành phần lõi của AngularJS có
thể được inject tới các thành phần phụ thuộc khác.
http://vietjack.com/angularjs/index.jsp Copyright © vietjack.com
http://vietjack.com/ Trang chia sẻ các bài học online miễn phí Page 63
value
factory
service
provider
constant
value - giá trị là đối tượng JavaScript đơn giản và được sử dụng để thiết lập các giá trị tới controller trong các
bước cấu hình.
//define a module
var mainApp = angular.module("mainApp", []);
//create a value object as "defaultInput" and pass it a data.
mainApp.value("defaultInput", 5);
...
//inject the value in the controller using its name "defaultInput"
mainApp.controller('CalcController', function($scope, CalcService, defaultInput) {
$scope.number = defaultInput;
$scope.result = CalcService.square($scope.number);
$scope.square = function() {
$scope.result = CalcService.square($scope.number);
}
});
factory factory là một hàm để sử dụng trả về giá trị. Nó tạo ra giá trị theo yêu cầu mỗi khi service hoặc
controller yêu cầu. Ta thường dùng các hàm factory để tính và trả về giá trị.
//define a module
var mainApp = angular.module("mainApp", []);
http://vietjack.com/angularjs/index.jsp Copyright © vietjack.com
http://vietjack.com/ Trang chia sẻ các bài học online miễn phí Page 64
//create a factory "MathService" which provides a method multiply to return multiplication of
two numbers
mainApp.factory('MathService', function() {
var factory = {};
factory.multiply = function(a, b) {
return a * b
}
return factory;
});
//inject the factory "MathService" in a service to utilize the multiply method of factory.
mainApp.service('CalcService', function(MathService){
this.square = function(a) {
return MathService.multiply(a,a);
}
});
...
service service là một đối tượng singleton javascript chứa tập các hàm cho các mục đích cụ thể. Service
được định nghĩa sử dụng hàm service() và sau đó inject nó đến controller.
//define a module
var mainApp = angular.module("mainApp", []);
...
//create a service which defines a method square to return square of a number.
mainApp.service('CalcService', function(MathService){
this.square = function(a) {
return MathService.multiply(a,a);
}
});
//inject the service "CalcService" into the controller
mainApp.controller('CalcController', function($scope, CalcService, defaultInput) {
$scope.number = defaultInput;
http://vietjack.com/angularjs/index.jsp Copyright © vietjack.com
http://vietjack.com/ Trang chia sẻ các bài học online miễn phí Page 65
$scope.result = CalcService.square($scope.number);
$scope.square = function() {
$scope.result = CalcService.square($scope.number);
}
});
provider provider được sử dụng bởi trong nội bộ AngularJS để tạo service, factory … trong quá trình cài đặt
(quá trình mà AngularJS khởi tạo chính nó). Dưới đây mô tả script có thể tạo MathService trong đó
chúng ta tạo trước đó. Provider là một phương thức factory đặc biệt với phương thức get() trả về
giá trị là value/service/factory.
//define a module
var mainApp = angular.module("mainApp", []);
...
//create a service using provider which defines a method square to return square of a number.
mainApp.config(function($provide) {
$provide.provider('MathService', function() {
this.$get = function() {
var factory = {};
factory.multiply = function(a, b) {
return a * b;
}
return factory;
};
});
});
constant constants được sử dụng thể thiết lập các giá trị trong quá trình cài đặc và giá trị không được thiết
lập trong quá trình cài đặt.
mainApp.constant("configParam", "constant value");
http://vietjack.com/angularjs/index.jsp Copyright © vietjack.com
http://vietjack.com/ Trang chia sẻ các bài học online miễn phí Page 66
Ví dụ Dưới đây là ví dụ cho phần diễn giải bên trên:
testAngularJS.jsp
<html>
<head>
<title>AngularJS Dependency Injection</title>
</head>
<body>
<h2>AngularJS Sample Application</h2>
<div ng-app="mainApp" ng-controller="CalcController">
<p>Enter a number: <input type="number" ng-model="number" />
<button ng-click="square()">X<sup>2</sup></button>
<p>Result: {{result}}</p>
</div>
<script
src="http://ajax.googleapis.com/ajax/libs/angularjs/1.3.14/angular.min.js"></script>
<script>
var mainApp = angular.module("mainApp", []);
mainApp.config(function($provide) {
$provide.provider('MathService', function() {
this.$get = function() {
var factory = {};
factory.multiply = function(a, b) {
return a * b;
}
return factory;
};
});
});
mainApp.value("defaultInput", 5);
http://vietjack.com/angularjs/index.jsp Copyright © vietjack.com
http://vietjack.com/ Trang chia sẻ các bài học online miễn phí Page 67
mainApp.factory('MathService', function() {
var factory = {};
factory.multiply = function(a, b) {
return a * b;
}
return factory;
});
mainApp.service('CalcService', function(MathService){
this.square = function(a) {
return MathService.multiply(a,a);
}
});
mainApp.controller('CalcController', function($scope, CalcService, defaultInput) {
$scope.number = defaultInput;
$scope.result = CalcService.square($scope.number);
$scope.square = function() {
$scope.result = CalcService.square($scope.number);
}
});
</script>
</body>
</html>
Kết quả Mở trang textAngularJS.jsp trên trình duyệt web và xem kết quả.
http://vietjack.com/angularjs/index.jsp Copyright © vietjack.com
http://vietjack.com/ Trang chia sẻ các bài học online miễn phí Page 68
Các Custom Directive trong AngularJS Custom directive được sử dụng trong AngularJS kết thừa chức năng của HTML. Custom directive
được định nghĩa sử dụng hàm “directive”. Một custom directive đơn giản là thay thế những thành
phần cho nó được kích hoạt. Ứng dụng AngularJS trong quá trình khởi tạo tìm kiếm những thành
phần phù hợp và hoạt động một lần sử dụng phương thức compile()trong custom directive sau đó
sử dụng phương thức link() để tạo custom directive dựa vào scope của các directive. AngularJS
cung cấp cho chúng ta cách tạo custom directive theo những loại sau:
Element directives - Directive kích hoạt khi một thành phần trùng tên với nó gặp phải.
Attribute - Directive kích hoạt khi gặp phải một thuộc tính trùng với nó.
CSS - Directive kích hoạt khi gặp phải một css style trùng tên với nó.
Comment - Directive kích hoạt khi gặp phải một comment trùng với nó.
Tìm hiểu Custom Directive Định nghĩa thẻ custom html.
<student name="Mahesh"></student><br/>
<student name="Piyush"></student>
Định nghĩa custom directive để xử lý thẻ custom HTML trên.
var mainApp = angular.module("mainApp", []);
http://vietjack.com/angularjs/index.jsp Copyright © vietjack.com
http://vietjack.com/ Trang chia sẻ các bài học online miễn phí Page 69
//Create a directive, first parameter is the html element to be attached.
//We are attaching student html tag.
//This directive will be activated as soon as any student element is encountered in html
mainApp.directive('student', function() {
//define the directive object
var directive = {};
//restrict = E, signifies that directive is Element directive
directive.restrict = 'E';
//template replaces the complete element with its text.
directive.template = "Student: <b>{{student.name}}</b> , Roll No:
<b>{{student.rollno}}</b>";
//scope is used to distinguish each student element based on criteria.
directive.scope = {
student : "=name"
}
//compile is called during application initialization. AngularJS calls it once when html
page is loaded.
directive.compile = function(element, attributes) {
element.css("border", "1px solid #cccccc");
//linkFunction is linked with each element with scope to get the element specific
data.
var linkFunction = function($scope, element, attributes) {
element.jspl("Student: <b>"+$scope.student.name +"</b> , Roll No:
<b>"+$scope.student.rollno+"</b><br/>");
element.css("background-color", "#ff00ff");
}
return linkFunction;
}
return directive;
});
Định nghĩa controller để cập nhật scope cho directive. Ở đây là các đặt tên các thuộc tính của biến
scope.
mainApp.controller('StudentController', function($scope) {
http://vietjack.com/angularjs/index.jsp Copyright © vietjack.com
http://vietjack.com/ Trang chia sẻ các bài học online miễn phí Page 70
$scope.Mahesh = {};
$scope.Mahesh.name = "Mahesh Parashar";
$scope.Mahesh.rollno = 1;
$scope.Piyush = {};
$scope.Piyush.name = "Piyush Parashar";
$scope.Piyush.rollno = 2;
});
Ví dụ <html>
<head>
<title>Angular JS Custom Directives</title>
</head>
<body>
<h2>AngularJS Sample Application</h2>
<div ng-app="mainApp" ng-controller="StudentController">
<student name="Mahesh"></student><br/>
<student name="Piyush"></student>
</div>
<script
src="http://ajax.googleapis.com/ajax/libs/angularjs/1.3.14/angular.min.js"></script>
<script>
var mainApp = angular.module("mainApp", []);
mainApp.directive('student', function() {
var directive = {};
directive.restrict = 'E';
directive.template = "Student: <b>{{student.name}}</b> , Roll No:
<b>{{student.rollno}}</b>";
directive.scope = {
student : "=name"
}
http://vietjack.com/angularjs/index.jsp Copyright © vietjack.com
http://vietjack.com/ Trang chia sẻ các bài học online miễn phí Page 71
directive.compile = function(element, attributes) {
element.css("border", "1px solid #cccccc");
var linkFunction = function($scope, element, attributes) {
element.jspl("Student: <b>"+$scope.student.name +"</b> , Roll No:
<b>"+$scope.student.rollno+"</b><br/>");
element.css("background-color", "#ff00ff");
}
return linkFunction;
}
return directive;
});
mainApp.controller('StudentController', function($scope) {
$scope.Mahesh = {};
$scope.Mahesh.name = "Mahesh Parashar";
$scope.Mahesh.rollno = 1;
$scope.Piyush = {};
$scope.Piyush.name = "Piyush Parashar";
$scope.Piyush.rollno = 2;
});
</script>
</body>
</html>
Kết quả Mở trang textAngularJS.jsp trên trình duyệt web và xem kết quả.
http://vietjack.com/angularjs/index.jsp Copyright © vietjack.com
http://vietjack.com/ Trang chia sẻ các bài học online miễn phí Page 72
AngularJS - Các chức năng quốc tế hóa AngularJS cung cấp sẵn các chức năng quốc tế hóa với 3 kiểu filter là currency, date và number.
Chúng ta chỉ cần kết hợp đoạn js tương ứng với theo vị trí tùy Quốc gia. Mặc định nó sẽ gắn với ví
trị trong trình duyệt web. Ví dụ, khi sử dụng ví trí ở Đan Mạch, bạn sử dụng đoạn script sau đây:
<script src="https://code.angularjs.org/1.2.5/i18n/angular-locale_da-dk.js"></script>
Ví dụ cho ví trị Đan Mạch testAngularJS.jsp
<html>
<head>
<title>Angular JS Forms</title>
</head>
<body>
<h2>AngularJS Sample Application</h2>
<div ng-app="mainApp" ng-controller="StudentController">
{{fees | currency }} <br/><br/>
{{admissiondate | date }} <br/><br/>
{{rollno | number }}
</div>
<script
src="http://ajax.googleapis.com/ajax/libs/angularjs/1.3.14/angular.min.js"></script>
<script src="https://code.angularjs.org/1.3.14/i18n/angular-locale_da-dk.js"></script>
http://vietjack.com/angularjs/index.jsp Copyright © vietjack.com
http://vietjack.com/ Trang chia sẻ các bài học online miễn phí Page 73
<script>
var mainApp = angular.module("mainApp", []);
mainApp.controller('StudentController', function($scope) {
$scope.fees = 100;
$scope.admissiondate = new Date();
$scope.rollno = 123.45;
});
</script>
</body>
</html>
Kết quả Mở trang textAngularJS.jsp trong một trình duyệt web và xem kết quả.
Ví dụ sử dụng vị trí của Browser testAngularJS.jsp
<html>
<head>
<title>Angular JS Forms</title>
</head>
<body>
http://vietjack.com/angularjs/index.jsp Copyright © vietjack.com
http://vietjack.com/ Trang chia sẻ các bài học online miễn phí Page 74
<h2>AngularJS Sample Application</h2>
<div ng-app="mainApp" ng-controller="StudentController">
{{fees | currency }} <br/><br/>
{{admissiondate | date }} <br/><br/>
{{rollno | number }}
</div>
<script
src="http://ajax.googleapis.com/ajax/libs/angularjs/1.3.14/angular.min.js"></script>
<!-- <script src="https://code.angularjs.org/1.3.14/i18n/angular-locale_da-dk.js"></script>
-->
<script>
var mainApp = angular.module("mainApp", []);
mainApp.controller('StudentController', function($scope) {
$scope.fees = 100;
$scope.admissiondate = new Date();
$scope.rollno = 123.45;
});
</script>
</body>
</html>
Kết quả Mở trang textAngularJS.jsp trong một trình duyệt web và xem kết quả.
http://vietjack.com/angularjs/index.jsp Copyright © vietjack.com
http://vietjack.com/ Trang chia sẻ các bài học online miễn phí Page 75
AngularJS - Tài liệu tham khảo Các tài liệu sau đây chứa các thông tin hữu ích về AngularJS. Bạn nên sử dụng chúng để nâng
cao kiến thức của mình cũng như hiểu các chủ đề trong loạt bài hướng dẫn này.
Các đường link hữu ích về AngularJS Tutorialspoint − Loạt bài hướng dẫn của chúng tôi xây dựng dựa trên nguồn này.
AngularJS - Trang Web chính thức của AngularJS
AngularJS - Wiki - Tham khảo Wikipedia cho AngularJS.