AngularJS - 3

TH.
S NGUYỄN ĐÌNH HOÀNG

Email: hoangnd@itc.edu.vn
1
NỘI DUNG
❑Khái niệm Modules và Controllers
❑Two-way binding
❑Scope & rootScope
❑Scope lồng nhau
❑Directive
2
MODULE
Module là gì.
❑ Một Module là một container chứa các thành phần khác nhau
của ứng dụng như filters, controllers, services, directives…
❑ Bạn tưởng tượng một module như một hàm main của các loại
ứng dụng khác.
❑ Module được tạo ra bằng cách dùng hàm angular.module.
<script>
var app = angular.module("myApp", []);
</script>
3
MODULE
▪ myApp: Là tên của app, nó phải giống với giá trị của
thuộc tính ng-app bên HTML
▪ [] là danh sách các phần mở rộng ta sử dụng cho ng-app

myApp này, các phần mở rộng này có thể do ta tự viết
hoặc của AngularJS nó cung. Ví dụ tôi sử dụng thư viện
angular-animate.js thì ta sẽ download nó về, sau đó
import vào file index.html và khai báo trong javascript
như sau:
4
CONTROLLER
Controller là gì.
❑Trong Angular thì controller là một hàm
javascript. Tác dụng của nó xây dựng lên model
để cho view hiển thị.
❑Cách tạo ra một controller.
<script>
app.controller(“myCtrl”,myController);
</script>
5
MODULE & CONTROLLER
❑ Ví dụ đầu tiên module cách 1.
<!DOCTYPE html>
<head>
<meta charset="UTF-8">
<script src="./js/angular.min.js"></script>
<title>Module AngularJS</title>
</head>
<body ng-app="myApp" ng-controller="myCtrl">
<p>{{wellcom}}</p>
<script>
var app = angular.module("myApp",[]);
var myfunc = function($scope)

{
$scope.wellcom="Wellcom to AngularJS";
}
app.controller("myCtrl",myfunc);
</script>
</body>
</html>
6
MODULE & CONTROLLER
❑ Ví dụ đầu tiên module cách 2.
<!DOCTYPE html>
<head>
</head>
<p>{{wellcom}}</p>
<script>
app.controller("myCtrl",function($scope){
$scope.wellcom="Wellcom AngularJS";
});
</script>
</body>
</html>
7
MODULE & CONTROLLER
❑ Các thành phần trong ví dụ trên.
❖ <script src="./js/angular.min.js"></script>
▪ Nhúng thư viện AngularJS
❖ Chỉ thị @ng-app
▪ Định nghĩa phạm vị ứng dụng AngularJS
❖ Chỉ thị @ng-controller
▪ Định nghĩa phạm vi được điều khiển bởi controller
❖ Biểu thức {{msg}}
▪ Biểu thức AngularJS hiển thị giá trị thuộc tính msg trong đối tượng $scope
❖ var app = angular.module("myApp", []) ;
▪ Tạo module ứng dụng AngularJS
❖ app.controller("myctrl", myfunc);
▪ Định nghĩa hàm myfunc xử lý phạm vi myctrl

8
MODULE & CONTROLLER
❑ Cách viết thu gọn module và controller.
<!DOCTYPE html>
<head>
</head>
<p>{{msg}}</p>
<script>
angular.module("myApp",[]).controller("myCtrl",function($scope)
{
$scope.wellcom="Wellcom to AngularJS";
});
</script>
</body>
</html>
9
MODULE & CONTROLLER
❑ Buộc dữ liệu đối tượng.(object)
❖ $scope.info là một đối tượng gồm 2 thuộc tính
▪ itc có giá trị là “Infomation Technology College”
▪ course có giá trị là “Welcome to AngularJS”
❖ {{info.itc}} là biểu thức Angular nhằm hiển thị giá trị thuộc tính itc của đối
tượng $scope.info
10
MODULE & CONTROLLER
❑ Buộc dữ liệu đối tượng.(object)
11
MODULE & CONTROLLER
❑ Buộc dữ liệu mảng.(array)
❑ $scope.info là một mảng gồm 2 phần tử
❑ {{info[0]}} biểu thức Angular nhằm hiển thị giá trị của phần tử đầu tiên của
mảng $scope.info
❑ {{info[1]}} biểu thức Angular nhằm hiển thị giá trị của phần tử thứ 2 của
mảng $scope.info
12
TWO-WAY BINDING
❑ Ngoài biểu thức, AngularJS còn cho phép sử dụng các chỉ thị để buộc dữ
liệu lên view.
❖ @ng-bind: buộc dữ liệu vào nội dung thẻ bất kỳ
❖ @ng-model: buộc dữ liệu vào các điều khiển form. Chỉ thị này được sử
dụng để buộc dữ liệu 2 chiều, nghĩa là khi dữ liệu trên điều khiển thay
đổi thì giá trị của thuộc tính trong $scope cũng bị thay đổi theo.
13
SCOPE
❑ Khái niệm Scope.
$scope là một đối tượng có nhiệm vụ giao tiếp dữ liệu giữa controller và
view. $scope chứa thông tin dữ liệu model, bao gồm các phương thức và
thuộc tính. Trong controller, dữ liệu model có thể truy cập qua đối tượng
$cope.
❑ Bản chất: chúng ta hiểu rằng ứng dụng AngularJS bao gồm.
1. View – lớp code HTML
2. Model – là dữ liệu ứng dụng trên view.
3. Controller – là các hàm javascript có khả năng tạo, thay đổi, xóa, điều
khiển dữ liệu.
14
SCOPE
❑ Mô hình MVC.
$scope là một object (đối tượng) có nhiệm vụ quản lý dữ liệu (Model)

được chia sẻ giữa controller và view. Nó là cầu nối giữa controller và view
$scope ngoài duy trì dữ liệu (thuộc tính) nó còn cho phép bổ sung các
hàm (phương thức) thực hiện xử lý theo mục đích riêng
15
SCOPE
❑ Phạm vi của Scope.
• Khi một controller được gán vào một tag HTML (bằng chỉ thị ng-
controller) thì AngularJS sẽ tạo ra một đối tượng $scope chứa dữ
liệu và các phương thức dành riêng cho controller làm việc với
phạm vi của tag đó.
• Trong phạm vi 1 ứng dụng angular, có thể có nhiều controller. Mỗi
controller có $scope quản lý dữ liệu riêng.
16
SCOPE
❑ Mô hình nhiều controller.
17
SCOPE
❑ Ví dụ phạm vi của biến scope
<body ng-app="myApp">
<div ng-controller="nhanvienCtrl_KD">
<p >{{name}}</p>
</div>
<div ng-controller="nhanvienCtrl_IT">
<p >{{name}}</p>
</div>
<script>
var app=angular.module("myApp",[]);
app.controller("nhanvienCtrl_KD",function($scope){
$scope.name="Nhân viên kinh doanh.";
});
app.controller("nhanvienCtrl_IT",function($scope){
$scope.name="Nhân viên IT.";
});
</script>
</body>
18
ROOTSCOPE
❑ biến $rootScope
❑ Biến rootscope là một biến tổng quát bao hàm toàn bộ các controller của
ứng dụng.
❑ Tất cả các ứng dụng đều có một $rootScope, nó được tạo khi khai báo một
phần tử HTML có thuộc tính ng-app.
19
ROOTSCOPE
❑ $scope và $rootScope
Cập nhật dữ liệu trong $rootscope cha sẽ tự động broadcast đến các scope con
20
ROOTSCOPE
❑ Ví dụ phạm vi của biến $rootScope

<p >{{name}}</p>
</div>
<p >{{name}}</p>
</div>
<script>
app.controller("nhanvienCtrl_KD",function($scope,$rootScope){
$rootScope.name="Nhân viên kinh doanh.";
});
app.controller("nhanvienCtrl_IT",function($scope,$rootScope){
//$rootScope.name="Nhân viên IT.";
});
</script>
</body>
21
SCOPE
❑ Scope lồng nhau.
❖ Trong AngularJS hổ trợ các controller lồng nhau nên cũng có scope lồng
nhau .
❖ Biến được khai báo ở scope của controller bên ngoài cũng sẽ được gán cho
biến cùng tên ở scope của controller bên trong.
❖ Tuy nhiên giá trị của biến ở controller bên trong hoàn toàn có thể ghi đè của
controller bên ngoài.
❖ Khi thực thi sẽ thực thi controller bên ngoài trước.
22
SCOPE
❑ Mô hình Scope lồng nhau.
Trong $scope con có thể truy xuất trực tiếp thành viên của $scope cha hoặc thông qua $parent
23
SCOPE
❑ Ví dụ phạm vi của biến Scope lồng nhau.
<p >{{name}} <br> {{type}}</p>
</div>
<div ng-controller="nhanvienCtrl_BH">
</div>
</div>
<script>
app.controller("nhanvienCtrl_KD",function($scope){
$scope.name="Nhân viên kinh doanh.";
$scope.type="Nhân viên";
});
app.controller("nhanvienCtrl_IT",function($scope){
$scope.name="Nhân viên IT";
})
app.controller("nhanvienCtrl_BH",function($scope){
$scope.name="Nhân viên bào hành";
})
</script> 24
</body>
DIRECTIVE
❑ Khái niệm Directive.
▪ AngularJS cho phép mở rộng HTML bằng thuộc tính mới gọi là chỉ thị
(directive). AngularJS chứa 1 tập các chỉ thị được tích hợp sẵn cho phép
thực hiện các chức năng với các ứng dụng. AngularJS cũng cho phép
bạn tự định nghĩa các chỉ thị của riêng mình.
▪ Chỉ thị AngularJS được mở rộng bằng các thuộc tính HTML với tiền tố ng-
.
❑ Các chỉ thị cơ bản.
▪ Chỉ thị ng-app dùng để khởi tạo 1 ứng dụng AngularJS.
▪ Chỉ thị ng-init dùng để khởi tạo 1 dữ liệu ứng dụng.
▪ Chỉ thị ng-model trói giá trị của các điều khiển HTML (input, select,
textarea) với dữ liệu ứng dụng.
▪ Chỉ thị @ng-bind =>Buộc dữ liệu vào 1 tag HTML thay cho biểu thức {{25}}
DIRECTIVE
❑ Sơ đồ Các directive built-in phổ biến.
26
DIRECTIVE
❑ Ví dụ ng-init.
<div ng-app="" ng-init="firstName='John'">

<p>Name: <input type="text" ng-model="firstName"></p>
<p>You wrote: {{ firstName }}</p>
</div>
@ng-init ở phạm vi nào thì thuộc tính tạo ra thuộc phạm vi đó
27
DIRECTIVE
❑ Các chỉ thị điều khiển giao diện.
• @ng-show = “expression” => Hiển thị khi biểu thức có giá trị true
• @ng-hide = “expression” => Ẩn khi biểu thức có giá trị true
• @ng-if = “expression” => Thực hiện khi biểu thức có giá trị là false
• @ng-switch = “expression” => Thực hiện @ng-switch-when=“value”

khi biểu thức có giá trị là value
• @ng-repeat = “array” => Duyệt các phần tử trong mảng
28
DIRECTIVE
❑ Ví dụ ng-show.
<body ng-app="">
Show HTML: <input type="checkbox" ng-model="myVar">
<div ng-show="myVar">
<h1>Welcome</h1>
<p>Welcome to my home.</p>
</div>
</body>
❑ Ví dụ ng-hide.
<body ng-app="">
Show HTML: <input type="checkbox" ng-model="myVar">
<div ng-hide="myVar">
<h1>Welcome</h1>
</div>
</body>
29
DIRECTIVE
❑ Ví dụ ng-if.
Cú pháp: <element ng-if="expression"></element>

<body ng-app="">
keep HTML: <input type="checkbox" ng-model="myVar“ ng-init="myVar=true“ >
<div ng-if="myVar">
<h1>Welcome</h1>
</div>
</body>
❑ Ví dụ ng-switch.
Cú pháp:
<element ng-switch="expression">
<element ng-switch-when="value"></element>
<element ng-switch-default></element>
</element>
30
DIRECTIVE
❑ Ví dụ ng-switch.
Bổ sung vào trang web tag <element> khi giá trị của chỉ thị ng-switch-
when bằng với giá trị của chỉ thị ng-switch. Nếu không có <element> nào
có ng-switch-when bằng với ng-switch thì bổ sung <element> chứa chỉ
thị ng-switch-default.
31
DIRECTIVE
❑ Chỉ thị ng-repeat.
Cú pháp :<element ng-repeat="expression"></element>
Chỉ thị ng-repeat được sử dụng để duyệt mảng. Cứ mỗi phần tử sẽ bổ

sung một thẻ vào trang web
Ví dụ:
32
DIRECTIVE
❑ Dùng ng-repeat xuất dữ liệu ra bảng .
33
DIRECTIVE
❑ Tạo trang sản phẩm.
Cho $scope.products=[{name:””, price:””, image:””},{},…]
34
DIRECTIVE
❑ Tự tạo chỉ thị.
▪ Chúng ta có thể tạo chỉ thị với tên mới trong AngularJS. Các chỉ thị mới
được tạo bằng cách dùng hàm .directive. Để chạy 1 chỉ thị mới, 1 phần
tử HTML phải có cùng tên với chỉ thị mới này. Khi đặt tên cho chỉ thị mới,
chúng ta nên dùng tên viết liền nhau, mỗi từ viết hoa trừ từ đầu tiên, và
khi thực thi, tách rời các từ bằng dấu gạch ngang – và viết thường
▪ Chúng ta có thể dùng chỉ thị mới thông qua tên phần tử, thuộc tính, lớp
và chú thích.
▪ Một số giá trị giới hạn hợp lệ là:
o E là tên phần tử
o A là thuộc tính
o C là lớp
o M là chú thích (comment)
▪ Mặc định giá trị là EA, nghĩa là tên phần tử và thuộc tính có thể gọi chỉ
thị.
35
DIRECTIVE
❑ Ví dụ chỉ thị theo phần tử.
<div><h1>Directive Element</h1> </div>
<Hello-world></Hello-world>
<script>
app.directive("helloWorld",function(){
return{
restrict:"E",
template: "<h1>Hello World Angular JS Element.</h1>"
}
});
</script>
</body>
36
DIRECTIVE
❑ Ví dụ chỉ thị theo thuộc tính.
<div><h1>Directive Attribute</h1> </div>
<div hello-world></div>
<script>
return{
restrict: "A",
template: "<h1>Hello world Angular JS Attribute</h1>"
}
});
</script>
</body>
37
DIRECTIVE
❑ Ví dụ chỉ thị theo class.
<div><h1>Directive Class</h1> </div>
<div class="hello-world"></div>
<script>
return{
restrict:"C",
template:"<h1> Hello world Angular JS directive class.</h1>"
}
});
</script>
</body>
38
DIRECTIVE
❑ Ví dụ chỉ thị theo ghi chú (comment).
<div><h1>Directive comment</h1></div>

<script>
app.directive("comment",function(){
return{
restrict:"M",
replace: true,
template:"<h1> OK comment</h1>"
};
});
</script>
</body>
39
40

AngularJS - 3

Uploaded by

Document Information

Original Title

Copyright

Available Formats

Share this document

Share or Embed Document

Sharing Options

Did you find this document useful?

Is this content inappropriate?

Copyright:

Available Formats

AngularJS - 3

Uploaded by

Copyright:

Available Formats

TH.

S NGUYỄN ĐÌNH HOÀNG

❑Khái niệm Modules và Controllers

❑Scope & rootScope

❑Scope lồng nhau

▪ [] là danh sách các phần mở rộng ta sử dụng cho ng-app

var myfunc = function($scope)

▪ Nhúng thư viện AngularJS

❖ Chỉ thị @ng-app

▪ Định nghĩa phạm vị ứng dụng AngularJS

❖ Chỉ thị @ng-controller

▪ Định nghĩa phạm vi được điều khiển bởi controller

❖ Biểu thức {{msg}}

❖ var app = angular.module("myApp", []) ;

▪ Tạo module ứng dụng AngularJS

▪ Định nghĩa hàm myfunc xử lý phạm vi myctrl

1. View – lớp code HTML

2. Model – là dữ liệu ứng dụng trên view.

$scope là một object (đối tượng) có nhiệm vụ quản lý dữ liệu (Model)

controller) thì AngularJS sẽ tạo ra một đối tượng $scope chứa dữ

phạm vi của tag đó.

• Trong phạm vi 1 ứng dụng angular, có thể có nhiều controller. Mỗi

controller có $scope quản lý dữ liệu riêng.

❑ Ví dụ phạm vi của biến $rootScope

❖ Khi thực thi sẽ thực thi controller bên ngoài trước.

❑ Các chỉ thị cơ bản.

▪ Chỉ thị ng-app dùng để khởi tạo 1 ứng dụng AngularJS.

▪ Chỉ thị ng-init dùng để khởi tạo 1 dữ liệu ứng dụng.

<div ng-app="" ng-init="firstName='John'">

@ng-init ở phạm vi nào thì thuộc tính tạo ra thuộc phạm vi đó

• @ng-hide = “expression” => Ẩn khi biểu thức có giá trị true

• @ng-switch = “expression” => Thực hiện @ng-switch-when=“value”

• @ng-repeat = “array” => Duyệt các phần tử trong mảng

Cú pháp: <element ng-if="expression"></element>

Cú pháp :<element ng-repeat="expression"></element>

Chỉ thị ng-repeat được sử dụng để duyệt mảng. Cứ mỗi phần tử sẽ bổ

Cho $scope.products=[{name:””, price:””, image:””},{},…]

You might also like