HTML Enhanced For Web App!

Thông tinTên nhóm: Challenge

1312014_Nguyễn Thanh An1312040_Phan Thanh Bình

1112195_Nguyễn Vĩnh Nghi 1212436_Phan Hiền Triết

1312601_Nguyễn Trung Tín hallenge

hallenge

WHAT

WHY HOW

hallenge

AngularJs là gì ?What???

hallenge

“ Dự án AngularJS được bắt đầu từ năm 2009, do lập trình viên Misko Hevery tại Google viết ra như là một dự án kiểu “viết cho vui”. Misko và nhóm lúc này đang tham gia vào 1 dự án của Google tên là Google Feedback. Với AngularJS, Misko đã rút ngắn số dòng code front-end từ 17000 dòng còn chỉ khoảng 1500. Với sự thành công đó, đội ngũ của dự án Google Feedback quyết định phát triển AngularJS theo hướng mã nguồn mở.”

hallenge

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). AngularJS cho phép xây dựng ngay trong trình duyệt mà không cần phải thông qua server, sử dụng mô hình MVC.

hallenge

hallenge

Mô hình MVC Model - Là thành

phần thấp nhất của mô hình có nhiệm vụ duy trì dữ liệu.

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 điều khiển sự tương tác giữa Model và View

hallenge

Mô hình MVC trong AngulaJS

hallenge

Tại sao chúng ta nên sử dụng AngularJS ? Why???

hallenge

AngularJS được phát triển bởi Google và là mã nguồn mở viết theo mô hình MVC.

AngularJS cho phép tạo ra các ứng dụng một cách đơn giản, code sạch, dễ dàng hơn trong việc kiểm thử.

hallenge

Tương thích với hầu hết các trình duyệt trên các điện thoại thông minh (iOS, Android).

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

hallenge

Extendable: khả năng mở rộng, có nghĩa là có thể dễ dàng thêm những features mới cho người dùng.

Maintainable: ứng dụng viết bằng angularJS rất dễ debug và fix, điều này có ý nghĩa khi làm việc với một project lớn.

hallenge

Testable: AngularJS hỗ trợ unit, end-to-end testing, điều đó thuận lợi cho việc fix và debug trước khi đến tay người dùng.

Standardized: angularJS đượ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 đặt tính mới nhất ( như HTML API…) và cá công cụ phổ biến khác.

hallenge

hallenge

hallenge

Sử dụng AngularJS như thế nào ?How???

hallenge

Sử dụng AngularJSPhiên bản mới nhất của Angular hiện nay là 2.0.0-beta.15.

<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/2.0.0-beta.15/Rx.min.js"></script> Link download: https://angularjs.org/<script type="text/javascript" src=" path to angular file"></script>

hallenge

hallenge

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.

hallenge

Data Binding trong AngularJs là cách thức tự động đồng bộ (synchronization) dữ liệu giữa Model và View.

Data Bingding

hallenge

hallenge

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ó thể tự định nghĩa một directive.

Cú pháp: ng-something

hallenge

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

Controller được chứa trong module.

Module and Controller

hallenge

Phạm vi là một phần ràng buộc giữa HTML (View) và JavaScript (Controller).

Scope chứa thông tin là các dữ liệu model.

Trong controller, dữ liệu model có thể được truy cập qua đối tượng $scope.

Scope

hallenge

Module Controll

er

Scope

Directives

hallenge

AngularJS Services Service là các hàm

JavaScript và có nhiệm vụ trên những task nhất định. Nó làm cho chúng thành những thực thể riêng rẽ dễ dàng trong việc bảo trì và kiểm thử. Controller có thể gọi chúng một cách đơn giản

hallenge

hallenge

AngularJs FilterAngularJs cung cấp các Filter(bộ lọc) để chuyển đổi dữ liệu

hallenge

Dependency Injection

Dependency Injection là kỹ thuật nổi bật của AngularJS, nó là design pattern.

Điều này làm cho cách thành phần phụ thuộc nhau trong phần cấu hình.

Kỹ thuật này giúp tái sử dụng thành phần, bảo trì và kiểm thử.

hallenge

Dependency Injection

dependency.html

hallenge

AngularJS BackboneJS EmberJSTemplateFilterData bindingRoutingAPIModelControllerEvent HandlesAnimationSQLService

hallenge

W3C School:http://www.w3schools.com/angular/default.aspAngularJS.Org:https://docs.angularjs.org/tutorialTutorialPoint:http://www.tutorialspoint.com//angularjs/index.htm

Tài liệu tham khảo

hallenge

DEMO

hallenge

Q&A

hallenge

Thank You!