TH.

S NGUYỄN ĐÌNH HOÀNG

Email: hoangnd@itc.edu.vn

1
 NỘI DUNG

❑ Giới thiệu AngularJS

❑ Cài đặt môi trường
❑ Tìm hiểm các khái niệm về
❖ Expressions
❖ Modules
❖ DataBinding
❖ Model
❖ Controllers
❖ Scopes

❑ Mô hình MVC
❑ Điều khiển sự kiện
2
 ANGULARJS

Giới thiệu AngularJS

❑ AngularJS là một Framework được xây dựng trên nền tảng của
JavaScript.
❑ AngularJS rất mạnh trong lập trình giao diện phía client và tổ chức
ứng dụng web Single Page Application (SPA)
❑ AngularJS hoạt động dựa trên các thuộc tính HTML mở rộng được
gọi là chỉ thị.
❑ AngularJS rất phổ biến, được hàng ngàn các lập trình viên trên thế
giới ưa chuộng và sử dụng.
❑ 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.

3
 ANGULARJS

Các thành phần tính năng của AngularJS

4
 ANGULARJS
Các thành phần tính năng của AngularJS

❑ Data-binding: Nó tự động đồng bộ hóa dữ liệu giữa thành phần model và

view.

❑ Scope: Là những đối tượng hướng đến model, nó hoạt động như là cầu nối
giữa controller và view.

❑ Controller: Đây là những tính năng của AngularJS mà được giới hạn tới một
scope cụ thể.

❑ Service: 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.

❑ Filter: Nó lựa chọn (hay là lọc) các tập con từ tập item trong các mảng và trả
về các mảng mới.

5
 ANGULARJS
Các thành phần tính năng của AngularJS

❑ Directive: Directive là các trong các phần tử DOM (như các phần tử, thuộc

tính, css…). 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 directive có sẵn như ngBind,ngModel…

❑ Template:Là các rendered view với các thông tin từ controller và model. Nó

có thể được sử dụng 1 file giống như index.html hoặc là nhiều file khác

nhau sử dụng cho một trang. Chúng ta vẫn thường gọi "partials".

❑ Routing: Là khái niệm của sự chuyển dịch qua lại các view hoặc luồng xử

lý trong project của bạn.

❑ Deep Linking: Cho phép bạn mã hóa trạng thái của ứng dụng trên địa chỉ

URL để nó có thể đánh dấu được với công cụ tìm kiếm như google, Bing

…giúp ứng dụng của bạn tốt hơn cho SEO. 6

 ANGULARJS
Các thành phần tính năng của AngularJS

❑ 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 và thử

nghiệm dễ dàng.

❑ Model View Whatever - MVC: 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.

7
 ANGULARJS
❑ Mô Hình MVC

8
 ANGULARJS
❑ Ưu điểm của AngularJS

• AngularJS cung cấp khả năng tạo ra các Single Page Application một cách
rất rõ ràng và dễ dàng để duy trì.

• AngularJS cung cấp khả năng Data binding khi model thay đổ thì view cũng
thay đổi và ngược lại.

• AngularJS code dễ dàng khi kiểm tra lỗi.

• AngularJS cung cấp khả năng tái sử dụng các component (thành phầ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ụ.

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

9
 ANGULARJS

❑ Nhược điểm:

• Không an toàn: Được phát triển từ javascript nên nó không an toàn, phía

máy chủ phải thường xuyên xác nhận quyền để hệ thông chạy trơn tru.

• Phụ thuộc: Nếu người dùng vô hiệu hóa javascript thì ứng dụng không

hoạt động được.

• Hạn chế về SEO

10
 ANGULARJS

❑ Hướng dẫn cài đặt AngularJS.

• Download thư viện Angular: https://angularjs.org.

• Nhúng vào các trang web.

11
 ANGULARJS

❑ Công cụ lập trình( IDE ).

❖ Bất kỳ công cụ soạn thảo văn bản có thể sử dụng để viết mã

Angular.

❖ Các công cụ sau đây thường được sử dụng vì hỗ trợ cho các thao
tác HTML, CSS và JavaScript

▪ NetBean

▪ Eclipse

▪ Dreamweaver

▪ Notepad++

▪ Visual Studio, Visual Code, …

❖ Bạn cũng cần webserver để có thể triển khai. 12

 ANGULARJS
❑ Expression trong AngularJS
✓ Expression được sử dụng để gắn kết 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 số trong Expression trong AngularJS:

<p>Giá sách : {{cost * quantity}}.000 VNĐ</p>

✓ Sử dụng chuỗi trong Expression trong AngularJS:

<p>Xin chào {{student.firstname + " " + student.lastname}}!</p>

✓ Sử dụng đối tượng trong Expression trong AngularJS:

<p>Mã số sinh viên: {{student.rollno}}</p>

✓ Sử dụng mảng trong Expression trong AngularJS:

<p>Điểm thi (Môn Tin): {{marks[3]}}</p>

13
 ANGULARJS

❑ Ví dụ expression.
<!DOCTYPE html>
<html lang="en">
<head>
<script src="./js/angular.min.js"></script>
<title>Ví dụ expression</title>
</head>
<body >
<div ng-app="" ng-init="quantity=1;cost=30; student={firstname:'Thành
Phú',lastname:'Nguyễn',rollon:101};mark=[80,90,75,73,60]">
<p>Xin chào: {{student.firstname +" " + student.lastname}}</p>
<p>Giá sách: {{quantity*cost}}</p>
<p>Mã số sinh viên:{{student.rollon}}</p>
<p>Điểm thi môn tin:{{mark[3]}}</p>
</div>
</body>
</html>

14
 ANGULARJS

❑ Ví dụ expression.

15
 EVENT

❑ Khái niện event.

▪ Sự kiện là những biến cố xảy ra do người sử dụng tương tác vào hoặc hệ

thống phát sinh ra

▪ Các sự kiện này cần được điều khiển bằng mã script để thực hiện một

công việc nào đó

16
 EVENT
❑ AngularJS event.

17
 EVENT
❑ Ví dụ mouse event.

<div ng-app="myApp" ng-controller="myCtrl">

<h1 ng-mousemove="count = count + 1">Đưa chuột vào đây!</h1>

<h2>{{ count }}</h2>

</div>
<script>
var app = angular.module('myApp', []);
app.controller('myCtrl', function($scope) {
$scope.count = 0;
});
</script> Di chuyển chuột sẽ
tăng số đếm

18
 EVENT
❑ Ví dụ ng-click event.
<div ng-app="myApp" ng-controller="myCtrl">

<button ng-click="count = count + 1">Click vào!</button>

<p>{{ count }}</p>

</div>
<script>
var app = angular.module('myApp', []);
app.controller('myCtrl', function($scope) {
$scope.count = 0;
});
</script>

19
 EVENT
❑ Gọi phương thức.
Khác các ví dụ trên chỉ khác ở chỗ điều khiển sự kiện bằng một
phương thức của $scope.
<div ng-app="myApp" ng-controller="myCtrl">

<button ng-click="myFunction()">Click vào!</button>

<p>{{ count }}</p>

</div>
<script>
var app = angular.module('myApp', []);
app.controller('myCtrl', function($scope) {
$scope.count = 0;
$scope.myFunction = function() {
$scope.count++;
}
});
</script> 20
 EVENT
❑ Ví dụ.
<div ng-app="myApp" ng-controller="myCtrl">

<button ng-click="myFunc()">Chọn Menu!</button>

<div ng-show="showMe">
<h1>Menu coffee:</h1>
<div>café đen</div>
<div>Café sữa</div>
<div>Trà sữa</div>
</div>

</div>
<script>
var app = angular.module('myApp', []);
app.controller('myCtrl', function($scope) {
$scope.showMe = false;
$scope.myFunc = function() {
$scope.showMe = !$scope.showMe;
}
});
</script>
21
 EVENT
❑ Ví dụ.

22
23