Thuyết trình angularJS

AngularJS là một framework có cấu trúc cho các ứng dụng 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.

• Nguyễn Hoàn Nam Dương – N14DCAT032

• Lại Trần Tú Anh – N14DCAT054

• Đặng Thị Thiên Lý – N14DCAT082

WHAT

 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

AngularJS là gì ?

 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).

Tại sao nên sử dụng AngularJS?

 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

Nhược điểm của AngularJS là gì?

 Tải AngularJS:  https://angularjs.org

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

< script src =“

https://ajax.googleapis.com/ajax/libs/angularjs/1.6.3/angular.js "></ script >

Cài đặt 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 thành phần chính của AngularJS

Các tính năng tiêu biểu của AngularJS

• 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

AngularJS expression

 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";

});

Module and Controller

 '$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";

});

Scope

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

ng-controller

…

AngularJS Directive

Tài liệu tìm hiểu về Angular

 W3C School:

http://www.w3schools.com/angular/default.asp

 AngularJS.Org:

https://docs.angularjs.org/tutorial

 TutorialPoint:

http://www.tutorialspoint.com//angularjs/index.htm

Cảm ơn thấy và các bạn đã lắng nghe

phần trình bày của nhóm !

Demo