Nhậ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ợ hố 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ị tḥc tính object OOP, mà cịn 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 tồ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, tḥ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 tḥ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 cịn 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ã hố tình trạng ứng dụng vào URL, ta bookmark lại Sau đó, ứng dụng có dựng lại hồn tồ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 khơng có hồ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 tồ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 khơng thể làm được, webpage hiển thị thơng tin bản, khơng có 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 cịn 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 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