AngularJS

Ngày cập nhật: 12-12-2015 | Số lần xem: 19648 | Danh mục: AngularJS
Tìm kiếm

• Bắt đầu bằng cách tạo cấu trúc thư mục mẫu angular-seed
• Thiết kế trước trang chủ index.html theo đúng định hướng thiết kế
• Trong tệp app/js/app.js, tiến hành cấu hình routing cho ứng dụng

Cách kết nối tới API RESTful phía backend

Thay vì sử dụng $http nguyên thủy, hãy ưu tiên dùng ngResource để tương tác với các dịch vụ RESTful một cách hiệu quả hơn.

Hiểu rõ hơn về AngularJS qua từng bước tương tác thực tế

Trang nhập liệu

• Directives → Mở rộng ngữ nghĩa HTML (ví dụ như ng-model, ng-controller, hoặc directive tùy chỉnh)
• Controller → Xử lý logic ứng dụng (như hành động khi nhấn nút lưu). Thường được gắn vào một phần tử div, gán hành vi vào phạm vi (scope)
• Model → Dữ liệu của ứng dụng. Ví dụ, khi người dùng nhập tên, bạn không cần truy cập DOM để lấy giá trị, mà chỉ cần gọi trực tiếp tên model. ngModel là directive giúp AngularJS thực hiện binding hai chiều

Trang hiển thị dữ liệu

• Service → Giao tiếp với RESTful API từ backend
• Có thể sử dụng $http ở cấp độ thấp hơn nếu cần
• Filter → Lọc dữ liệu cần hiển thị. Bạn cũng có thể tự tạo filter theo nhu cầu

Module và Model là hai khái niệm khác nhau

• Module → Cấu hình injector
• Injector → Ghép nối các thành phần trong ứng dụng
• Model → Là dữ liệu của ứng dụng

Làm việc với 5 tệp JS do angular-seed tạo ra

Mặc định, angular-seed sẽ tạo ra 5 tệp JS trong thư mục app/js:

• app.js
• controllers.js
• directives.js
• filters.js
• services.js

Bạn hoàn toàn có thể gộp chúng lại thành một tệp duy nhất như sau:

1
2
3
4
5

angular.module('myModule', [])
 .value('a', 123)
 .factory('a', function() { return 123; })
 .directive('directiveName', ...)
 .filter('filterName', ...);

Lý do chia nhỏ các tệp này là để dễ dàng kiểm thử. Khi chạy test, bạn có thể chọn chỉ load những module liên quan đến test, làm cho quy trình kiểm thử trở nên linh hoạt và hiệu quả hơn.

So sánh 5 tệp này, ta thấy:

• Tệp controllers.js thường bắt đầu bằng định nghĩa hàm controller, ví dụ: function ControllerName() {}
• Các tệp còn lại như directives.js, filters.js, services.js, app.js đều bắt đầu bằng angular.module(...). Mỗi module có thể được đặt tên riêng biệt, như myApp.directives, myApp.filters, v.v.
• Tất cả các tệp đều sử dụng strict mode ('use strict';)
• Việc khai báo ControllerName.$inject = [...] giúp đăng ký các dependency một cách rõ ràng. Mặc dù có thể bỏ qua để Angular tự suy luận, nhưng vẫn khuyến khích viết rõ để đảm bảo tính minh bạch và dễ bảo trì.

Ví dụ:

1
2

function ControllerName($log) {}
ControllerName.$inject = ["$log"];

Đăng ký service trả về hằng số

Bạn có thể tạo một service chứa giá trị hằng số như sau:

1

angular.module("myApp.services", []).value("name", "Zhongwei Sun");

Một kỹ thuật Dependency Injection hay bị bỏ qua

Trong filters.js và directives.js, bạn có thể thấy cú pháp như sau:

1

directive("appVersion", ["version", function(version) {}]);

Đây được gọi là Inline Annotation. Nó giúp giải quyết vấn đề khi callback là hàm vô danh, không thể gán thuộc tính $inject.

Ví dụ khác:

1

directive("appVersion", ["$log", function($log) {}]);

Hoặc đơn giản:

1

directive("appVersion", function($log) {});

Tuy nhiên, phương thức đầu tiên (inline annotation) được khuyến khích sử dụng vì nó tránh lỗi khi code bị minify hoặc obfuscate khiến tên tham số bị đổi đi.

Thứ tự tải các tệp JS trong AngularJS có quan trọng không?

AngularJS sử dụng cơ chế Dependency Injection nên đối với ứng dụng nhỏ, thứ tự tải các tệp JS không quá quan trọng.

Quy tắc đặt tên directive

• Trong JavaScript: định nghĩa directive theo kiểu ngModel
• Trong HTML: sử dụng theo dạng ng-model

Đường dẫn của service

1

return $resource("/todos/:todoId", {todoId: "@id"});

Đường dẫn /todos ở đây tương ứng với thư mục gốc của ứng dụng.

Lỗi Object # has no method ‘push’

Khi nhận dữ liệu JSON có kèm mã lỗi, bạn cần đặt isArray: false trong query. Nếu không làm như vậy, sẽ gặp lỗi trên. Sau đó, xử lý kết quả trong controller.

Khi nào cần thêm tiền tố $ cho action service

• GET: Resource.action([parameters], [success], [error])
• POST/PUT: Resource.action([parameters], postData, [success], [error])
• Instance actions: instance.$action([parameters], [success], [error])

Các hành động như save, remove, delete cần có tiền tố $ khi gọi trên instance, nhưng nếu gọi trực tiếp từ class thì không cần.

Kết hợp Masonry với AngularJS để tạo giao diện nước chảy

Dưới đây là một số ví dụ mẫu:

Sự khác biệt giữa AngularUI và Bootstrap UI

• AngularUI cung cấp các component nhỏ như date picker được viết bằng AngularJS
• Bootstrap UI tái hiện lại các component của Bootstrap bằng AngularJS

Kiểm tra form đầu vào với AngularJS

1
2
3

<form class="form" novalidate>
 <input type="text" required />
</form>

Sử dụng novalidate để tắt chức năng validate mặc định của trình duyệt. Lý do là vì hành vi của trình duyệt có thể khác nhau. Ví dụ, Chrome tự động cảnh báo khi ô input rỗng, nhưng Safari không làm điều đó. Vì vậy, nên thống nhất phương pháp validate của AngularJS.

Vấn đề controller bị gọi hai lần

Nếu logic trong controller bị thực thi hai lần, rất có thể là do bạn đã khai báo controller trong cả routing và trong partial HTML. Hãy loại bỏ ng-controller khỏi partial để khắc phục.

Những lưu ý quan trọng khi phát triển với AngularJS

• Không nên đặt tên phương thức là delete trong service, vì đây là từ khóa của JavaScript và gây lỗi ở IE. Nên thay thế bằng remove
• Cần kiểm tra tính tương thích với nhiều trình duyệt
• Sử dụng công cụ như jslint để kiểm tra lỗi code
• Google Ad trong partial view không hiển thị → chuyển sang index.html
• CSRF (Cross-site request forgery): Đảm bảo token được gửi kèm trong request POST
• Khi dùng ng-repeat để binding hai chiều, nếu tập dữ liệu thường xuyên thay đổi, hãy dùng mảng (array) thay vì object (map), vì map không hỗ trợ binding hai chiều

Cách xử lý nhiều HTTP request theo thứ tự

Khi phải thực hiện nhiều request HTTP theo chuỗi, hãy tận dụng Promise để tránh lồng callback.

• Tại sao Promise lại hấp dẫn
• Mẫu tạo object trong JavaScript

Thống kê PV cho ng-view

Bạn có thể tích hợp Google Analytics hoặc API của Baidu để theo dõi lượt truy cập từng view.

Directive ng-cloak

Directive ngCloak giúp ngăn chặn việc template AngularJS được hiển thị tạm thời dưới dạng chưa biên dịch trong lúc tải trang. Điều này giúp tránh hiện tượng nhấp nháy không mong muốn.

Directive ng-bind

Thay vì dùng {{ expression }}, hãy dùng ngBind để đảm bảo dữ liệu không bị hiển thị khi trang đang tải. Vì ngBind là thuộc tính của element, nên nó giúp dữ liệu binding không xuất hiện trước mắt người dùng.

Tài liệu

• FAQ
• API
• Các app sử dụng AngularJS
• AngularUI
• Bootstrap UI
• Gợi ý thiết kế UI với AngularJS + Bootstrap
• Bảng cheat sheet
• Angular Pickadate

Liên kết nhanh

• So sánh BackboneJS và AngularJS
• React – framework tương đồng với AngularJS
• Hết sức tập trung vào tư tưởng chứ không phải API (Stop Whining About New JS Frameworks)
• Cấu trúc code AngularJS cho trang đơn giản
• Directive
• Filter
• Module
• Controller
• Tree Table