Tài liệu AngularJS tiếng Việt

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

Trang 1

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

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

Trang 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

Trang 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

Trang 4

testAngularJS.jsp 50

Kết quả 51

AngularJS - View 52

ng-view 52

Cách sử dụng 52

ng-template 52

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

Trang 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

Trang 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

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

Trang 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

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

Trang 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

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:

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

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

<div ng-controller ="HelloController"

<h2> Welcome {{helloTo.title}} to the world of Tutorialspoint! </h2>

</div>

angular module ("myapp", [])

controller ("HelloController", function ( $scope ) {

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

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>

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:

angular module ("myapp", [])

controller ("HelloController", function ( $scope ) {

$scope helloTo = {};

Trang 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

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

Trang 15

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>

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>

Trang 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

Trang 17

 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

Trang 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 ="" ng-init ="countries=[{locale:'en-US',name:'United States'},

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>

Trang 19

<p> List of Countries with locale: </p>

<ol>

</li>

</ol>

Trang 20

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

<p> Expense on Books : {{cost * quantity}} Rs </p>

Trang 21

<p> Hello {{student.firstname + " " + student.lastname}}! </p>

<p> Expense on Books : {{cost * quantity}} Rs </p>

<p> Roll No: {{student.rollno}} </p>

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

Ở đâ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:

$scope student = {

firstName : "Mahesh",

Trang 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

Trang 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

<title> Angular JS Controller </title>

</head>

<body>

<h2> AngularJS Sample Application </h2>

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>

var mainApp = angular module ("mainApp", []);

mainApp controller ('studentController', function ( $scope ) {

}

Trang 25

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

Trang 26

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

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

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 :

Trang 27

<ul>

< li ng - repeat ="subject in student.subjects | filter: subjectName">

< li ng - repeat ="subject in student.subjects | orderBy:'marks'">

<title> Angular JS Filters </title>

</head>

<body>

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

Trang 28

<br/>

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

{ name :'Physics', marks : 70 },

{ name :'Chemistry', marks : 80 },

{ name :'Math', marks : 65 }

],

var studentObject ;

}

};

Trang 29

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>

Trang 30

border : 1px solid grey ;

border - collapse : collapse ;

<title> Angular JS Table </title>

<style>

table , th , td {

Trang 31

border : 1px solid grey ;

border - collapse : collapse ;

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

Trang 32

{ name :'Math', marks : 65 },

name :'English', marks : 75 }, name :'Hindi', marks : 67 } ],

var studentObject ;

Trang 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

Trang 34

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>

Trang 35

<title> AngularJS HTML DOM </title>

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

Trang 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

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

Trang 37

Module điều khiển

{ name :'Math', marks : 65 },

{ name :'English', marks : 75 },

{ name :'Hindi', marks : 67 }

],

var studentObject ;

Ở đâ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

Định dạng
Số trang	75
Dung lượng	1,45 MB