• Nguyễn Hoàn Nam Dương – N14DCAT032
• Lại Trần Tú Anh – N14DCAT054
• Đặng Thị Thiên Lý – N14DCAT082
WHAT
WHY
HOW
AngularJS là gì ?
AngularJS là một bộ Javascript Framework rất mạnh và
thường được sử dụng để xây dựng project Single Page
Application (SPA) – ứng dụng chạy bên trong trình duyệt,
không yêu cầu phải tải lại toàn bộ trang web mỗi lần sử dụng.
Cho phép client xử lí ngay trong trình duyệt mà không
cần phải thông qua server.
Là mã nguồn mở phát triển bởi Google viết theo mô hình
MVC
Tại sao nên sử dụng AngularJS?
Giúp phát triển các ứng dụng gọn nhẹ, code rõ ràng với
nhiều chức năng và có thể chạy trên tất cả trình duyệt.
Được xây dựng dựa trên khả năng sẵn có của trình duyệt nên cho
phép tận dụng đặc tính mới nhất ( như HTML API…) và các công cụ
phổ biến khác.
Sử dụng cơ chế data-binding tức là khi model thay đổi thì
view cũng thay đổi theo và ngược lại.
Được tích cực phát triển bởi cộng đồng mã nguồn mở (on GitHub).
Nhược điểm của AngularJS là gì?
Không an toà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ài đặt AngularJS ?
Tải AngularJS:
-> Nhúng vào project: <script src="angular.js"></script>
Dùng phiên bản có sẵn trên server của Google:
/>
Các thành phần chính của AngularJS
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ác tính năng tiêu biểu của AngularJS
AngularJS expression
• AngularJS expression
có thể được viết
trong dấu ngoặc kép:
{{expression}}.
• AngularJS sẽ giải
quyết các expression,
và trả về kết quả
chính xác nơi biểu
thức được viết.
Module and Controller
AngularJS Module được định nghĩa như một application. Modules là 1
bộ phận chứa các controllers cho ứng dụng.
AngularJS Controller kiểm soát dữ liệu của các ứng dụng. Controller
được chứa trong module.
// tạo module myApp
var app = angular.module("myApp", []);
// tạo controller myCtrl
app.controller("myCtrl", function($scope) {
$scope.firstName = “Nguyen";
$scope.lastName = “Duong";
Scope
'$scope' là đối tượng tham
chiếu tới model được sử dụng
trong controller. Là thành phần
gắn kết giữa View và Controller.
app.controller("myCtrl",
function($scope) {
$scope.firstName = “Hello";
$scope.lastName= “Pino";
});
AngularJS Directive
AngularJS có một tập hợp các
chỉ thị xây dựng sẵn, trong đó
cung cấp các chức năng cho
các ứng dụng gọi là directives.
Cú pháp: ng-<something>
VD: ng-app=“myApp”
ng-controller
…
Tài liệu tìm hiểu về Angular
W3C School:
/> AngularJS.Org:
/> TutorialPoint:
/>
Demo...
Cảm ơn thấy và các bạn đã lắng nghe
phần trình bày của nhóm !