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.
HỌC VIỆN CÔNG NGHỆ BƯU CHÍNH VIỄN THÔNG CƠ SỞ TP.HỒ CHÍ MINH BÁO CÁO Môn học: Lập Trình Web Đề tài : Tìm hiểu AngularJS • • Giảng viên: Huỳnh Trung Trụ Người thực hiện: - Đặng Thị Thiên Lý – N14DCAT082 Lại Trần Tú Anh – N14DCAT054 Nguyễn Hoàn Nam Dương – N14DCAT032 TPHCM,3/2017 Tìm hiểu AngularJS Báo cáo kì Lập trình Web Tìm hiểu AngularJS I TỔNG QUAN VỀ ANGULARJS: Lịch sử phát triển: - Dự án AngularJS năm 2009, lập trình viên Misko Hevery Google viết Misko nhóm lúc tham gia vào dự án Google tên Google Feedback Với AngularJS, Misko rút ngắn số dòng code front-end từ 17000 dòng khoảng 1500 Với thành công đó, đội ngũ dự án Google Feedback định phát triển AngularJS theo hướng mã nguồn mở - Trước năm 2000, công nghệ HTML hỗ trợ tốt cho trang web tĩnh Khi bạn xây dựng trang web với PHP, Node/Express, hay Ruby một trang web tĩnh với nội dung thay đổi bạn gửi request về máy chủ, máy chủ render trang với nội dung tương ứng Tuy nhiên mọi thứ thay đổi nhiều từ phát triển HTML5, có chống lưng từ ông lớn Google, Yahoo, Facebook, tập hợp đông đảo cộng đồng mã nguồn mở Trong kể đến AngularJS giúp HTML động Angular JS ? - AngularJS một framework JavaScript có cấu trúc cho ứng dụng web động Nó cho phép bạn sử dụng HTML ngôn ngữ mẫu cho phép bạn mở rộng cú pháp HTML để diễn đạt thành phần ứng dụng Tìm hiểu AngularJS bạn một cách rõ ràng súc tích Hai tính cốt lõi: Data binding Dependency injection AngularJS loại bỏ phần lớn code mà bạn thường phải viết, giúp giảm bớt trình phát triển ứng dụng web AngularJS xảy tất cả trình duyệt, làm cho trở thành đối tác lý tưởng công nghệ Server Từ nhiều năm trước, HTML bắt đầu, dự định để xây dựng trang web nói một cách để hiển thị tài liệu tĩnh, không để xây dựng một ứng dụng web động Với đời Angular, HTML lần dùng để xây dựng ứng dụng web động - Phân tích sơ đồ làm việc với AngularJS để : Web bạn kết nối với server API, lấy về result dạng JSON, Angular JS đóng vai trò data-driven để biến JSON thành Models Bạn nhanh chóng update lên HTML content mà không cần phải refresh lại trang Tìm hiểu AngularJS Nói qua chế hoạt động SPA- Single-page Application, lần request đầu tiên, hệ thống trả về tất cả code xử lý code hiển thị toàn bộ trang web, yêu cầu client phải requets phần cần, server trả về liệu dạng thô, giúp rút ngắn thời gian truyền tải, giúp nâng cao trải nghiệm người dùng => Angular thích hợp sử dụng cho ứng dụng có trang SPA (Đó một trang web hay một ứng dụng web, mà tất cả thao tác xử lý trang web đều diễn một trang Với mục đích nâng cao trải nghiệm người dùng tốt hơn, hiệu quả hơn, thoải mái hơn.) Một ví dụ đơn cử dễ hiểu trang Facebook Nếu bạn lướt News feed, không cần load lại cả trang web Bạn thấy đó, tất cả thay đổi bảng tin update, khung xung quanh không đổi Bạn cảm giác trượt tuyết một băng nhất, không phải công chuyển băng khác Các ứng dụng chung AngularJS phát triển ứng dụng web: - AngularJS một Framework phát triển mạnh mẽ dựa JavaScript để tạo ứng dụng RICH Internet Application (RIA) - AngularJS cung cấp cho lập trình viên tùy chọn để viết ứng dụng client-side mô hình MVC (Model View Controller) một cách rõ ràng - Các ứng dụng viết 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 trình duyệt Tìm hiểu AngularJS - AngularJS có mã nguồn mở, miễn phí hoàn toàn, tùy biến theo ý thích sử dụng hàng ngàn lập trình viên giới Nó hoạt động giấy phép Apache License version 2.0 Nhìn chung, AngularJS một framework để tạo ứng dụng lớn, hiệu cao giữ cho chúng dễ dàng trì Đặc trưng AngularJS: - Phát triển dự Javascript - Tạo ứng dụng client-side theo mô hình MVC - Khả tương thích cao, tự động xử lý mã javascript để phù hợp với trình duyệt - Mã nguồn mở, miễn phí hoàn toàn sủ dụng rộng rãi II ANGULARJS FRAMEWORK: Tại phải Tại sử dụng AngularJs ? - Angular đưa Google Tại điều quan trọng để biết ? Thực tế, Google phát triển tài thiên tài đội bóng họ Họ thực biết tinh tế trang web phát triển ứng dụng web Ít thực tế cung cấp cho người dùng đảm bảo Angular xuất phát từ người tin tưởng - Ngoài ra, bạn sử dụng sản phẩm Google Gmail hay Google Plus, bạn không ngạc nhiên với tương tác chúng cả ajax gửi liên tục mọi nơi mà không phải làm toàn bộ trang web để sử dụng.Hãy để ý, với Google, bạn nhập muốn tìm kiếm, tất cả thay đổi kết quả xuất ra, riêng khung Google bên đứng yên dù bạn có chuyển sang trang kết quả tìm kiếm 2, 3, v.v Tìm hiểu AngularJS AngularJs lập trình ? 2.1 Cài đặt AngularJS: 2.1.1 Tải AngularJS: Truy cập vào trang web https://angularjs.org tải về bản angularjs Bản 1.6.3 2.1.2 Chèn Angular vào ứng dụng: * Tự host AngularJS: Theo cách cần phải download angularjs về máy nhúng trực tiếp vào ứng dụng * Dùng phiên bản có sẵn server Google: Ngoài cách bạn sử dụng phiên bản nén AngularJS có sẵn server Google Sử dụng cách có điều lợi tiết kiệm băng thông cho trang web bạn AngularJS load nhanh máy người dùng cache AngularJS Nhưng cách không hoạt động không kết nối mạng 2.2 Ví dụ đơn giản: Các bước tạo ứng dụng AngularJS Bước 1: Tải framework theo hai cách nêu Là một khung JavaScript thuần, thư viện AngularJS thêm vào sử dụng thẻ Tìm hiểu AngularJS Bước 2: Định nghĩa ứng dụng AngularJS sử dụng ng-app directive Bước 3: Định nghĩa tên một model sử dụng ng-model directiveNhập tên bạn:
Bước 4: Gắn kết giá trị model định nghĩa sử dụng ngbind directiveXin chào !
Các bước để chạy ứng dụng AngularJS Sử dụng bước bên để tạo một trang HTML Tạo ứng dụng AngularJS đầu tiên Ứng dụng HelloWorld với AngularJSNhập tên bạn:
Xin chào !
Tìm hiểu AngularJS Kết Mở trang HelloWorld.html trình duyệt, nhập tên xem kết quả Các tính cốt lõi AngularJS: Angular một MVW Javascript framework hấp dẫn để xây dựng nên SPA cung cấp tính đại cho việc xây dựng web MVW viết tắt Model-View-Whatever, bạn thấy tham vọng mang lại lớn, hỗ trợ một cách mềm dẻo để phát triển mọi thể loại ứng dụng Trong MVW, chữ W thay để bạn theo hướng MVC (ModelView-Controller) MVVM (Model-View-ViewModel ) Tìm hiểu AngularJS Nhìn tổng quát sơ đồ bên dưới, ta thấy tính Angular JS cung cấp : Data-binding gắn kết data lưu model với view : Angular có khả tự động đồng bộ hoá data Model View Data thay đổi View (thông qua input field) lập tức cập nhật vào Model javascript object Ngược lại, javascript object có thay đổi, từ JSON phía server API trả về, tự động cập nhật hiển thị lên HTML view mà bạn không cần phải can thiệp vào Đây chắn mạnh mà bạn thích thú Scope: Scope hiểu objects model tầng application (chú ý, không Model để lưu giá trị thuộc tính object OOP, mà lưu cả cài đặt cho application thời điểm nữa) Và chúng đóng vai trò kết nối controller với view Chẳng hạn, bạn gán action cho button đến một hàm scope Controller: Controller Angular JS chứa javascript method, giới hạn một scope cụ thể Services: AngularJS cung cấp một vài services sẵn, ví dụ $http để thực một lời gọi AJAX (XMLHttpRequest) đến server API Những services object nhất, dùng chung toàn app, khởi tạo một lần Bạn sẵn sàng sử dụng object bất cứ Tìm hiểu AngularJS lúc nào, Angular framework quản lý object giúp bạn Ví dụ $http, $controller, $document, $compile, $rootElement , $rootScope … Filters - lọc: Bạn sử dụng bộ lọc để lọc item từ một arrays Directives - điều hướng: Các điều hướng đánh dấu (markers) thành phần DOM Nó bản thân cả element, thuộc tính, css, để giúp bạn thao tác với element Directives sử dụng để tạo thẻ HTML tuỳ biến, widgets AngularJS cung cấp sẵn một số directive thường dùng, mà sau bạn quen thuộc, ví dụ ngBind, ngModel, Templates - mẫu giao diện: Template view hiển thị thông tin từ model controller thị Nó một file (ví dụ index.html), nhiều view thành phần (partials) để ghép lại thành một hình Routing - chuyển hướng trang web: Nếu bạn làm việc với framework MVC, bạn hiểu khái niệm Routing giúp bạn định view hiển thị, người dùng truy cập vào URL có patterns Nghĩa thay đổi views hiển thị tương ứng với ngữ cảnh MVM - model view whatever: MVW một design pattern mà chia một ứng dụng thành phần Model, View, thường Controller tương tự MVC truyền thống Mỗi phần có khả vai trog đáp ứng riêng So với MVC truyền thống, MVW pha trộn thêm MVVW (Model-ViewViewModel) Và tên MVW Model View Whatever Angular JS team đặt Deep linking - liên kết sâu: Deep linking liên kết sâu cho phép ta mã hoá tình trạng ứng dụng vào URL, ta bookmark lại Sau đó, ứng dụng có dựng lại hoàn toàn trạng thái sau ta access vào URL Dependency injection: AngularJS có sẵn một hệ thống injection để developers dễ dàng tạo, hiểu, kiểm tra ứng dụng Các thành phần quan trọng AngularJs Framework: AngularJS framework có thành ba phần quan trọng sau: - ng-app: directive định nghĩa liên kết một ứng dụng AngularJS tới HTML Tìm hiểu AngularJS - ng-model: directive gắn kết giá trị liệu ứng dụng AngularJS đến điều khiển đầu vào HTML - ng-bind: directive gắn kết liệu ứng dụng AngularJS đến thẻ HTML III ƯU ĐIỂM VÀ NHƯỢC ĐIỂM CỦA ANGULARJS: Ưu điểm: - Với concept ý tưởng, thành phần có sẵn mà Angular cung cấp, ta thấy giúp phát triểnnhững ứng dụng SPA Single Page Application hiệu quả tiết kiệm về băng thông, cho trải nghiệm người dùng tốt hơn, việc thực một rõ ràng , dễ cho bảo trì code - Với việc mà binding data vào HTML DOM, nhanh update data qua lại view model giúp người dùng cảm giác linh hoạt, thân thiện - Code viết với AngularJS dễ test - AngularJS sử dụng injection để bạn ngăn cách hiểu một cách tách bạch thứ liên quan đến - Có thể viết theo hướng tái sử dụng - Với AngularJS, lập trình viên cần code cho tính lớn - Trong AngularJS, views trang HTML code thuần; Controller viết javascript để thực trình xử lí nghiệp vụ Tìm hiểu AngularJS - Và điều quan trọng nhất, ứng dụng viết AngularJS chạy hầu hết trình duyệt nay, bao gồm cả trình duyệt smart phones, tablets máy tính bảng, đương nhiên bao gồm cả iOS Android Nhược điểm AngularJS: Mặc dù có nhiều lợi ích sử dụng AngularJS, nhiên hoàn hảo, cần xem xét một số nhược điểm Angular để có kế hoạch cho phát triển ứng dụng AngularJS - Không an toàn: Vì nền tảng dựa javaScript, có nghĩa chạy phía client Điều đồng nghĩa với việc người dùng có hiểu biết về coding, có mục đích mờ ám, họ sửa đổi code phía client trước submit lên server Do đó, một số tác vụ quan trọng, bạn nên thực phía server Ví dụ: Authenticate Authorization (xác thực kiểm tra quyền người dùng); thực validation với data submit lên API trước save thao tác với data người dùng submit lên Do cách tốt dùng AngularJS để query vào WebService API, không nên save trực tiếp data vào database mà không check - Nếu người dùng ứng dụng, bật chức vô hiệu hóa Javascript, bạn làm được, webpage hiển thị thông tin bản, hiển thị thêm đương nhiên thao tác xữ lí không hoạt động Tuy nhiên điều có lẽ xảy Điều may mắn nhược điểm khắc phục hạn chế được, đủ để ta yên tâm coding app AngularJS V SỰ RA ĐỜI CỦA ANGULAR 2.0: Tìm hiểu AngularJS Phiên bản Angular đưa cho nhà phát triển một công cụ để xây dựng hệ thống ứng dụng lớn với JavaScript bộc lộ một số hạn chế Angular2 đời từ phản hồi cộng đồng • Những thay đổi?AngularJS 2.0 không sử dụng thay đổi đáng kể nhiều thứ Angular 1.x, điển hình : -Controllers - Kiến trúc MVC truyền thống thay với một kiến trúc component linh hoạt Controllers không cần thiết thay một component với component chuyên dụng điều khiển -Directives - Directive Definition Object gỡ bỏ Sẽ có loại directive (component, decorator, template) -$scope - scopes scope inheritanc đơn giản hóa với yêu cầu phải inject $ scope gỡ bỏ -angular.module - module angular thay module có sắn ES6 - jQLite - loại bỏ chủ yếu nhằm tăng performance “AngularJS 1.x is built for current browsers while ” Angular 2.0 is being built for the browsers of the future – Igor Minaz, AngularJS team IV DEMO: Ứng dụng nhỏ: Bản đồ Học viện sở TPHCM Tạo file Map.html với nội dung: p{ font-family:'Script'; font-size: 150%; color:black; } Tìm hiểu AngularJS Bản đồ Học viện công nghệ Bưu viện thông ng-mousemove=Your location: {{ketqua}}
Tạo file Map.js với nội dung: /// var app = angular.module('myApp', []); app.controller('myCtrl', function ($scope) { $scope.myFun = function (myE) { $scope.x = myE.clientX; $scope.y = myE.clientY; var x = $scope.x; var y = $scope.y if ((40