Web Design

Angularjs, Bài 4: Giới thiệu về Modules

What is a Module? You can think of a module as a container for the different parts of your app – controllers, services, filters, directives, etc. – AngularJS document.

AngularJS

1. AngularJS module là gì?

AngularJS module có thể được hiểu ngắn gọn là phần phạm vi mà AngularJS (app) kiểm soát ứng dụng của bạn trên HTML. Chẳng hạn:

thì AngularJS module là toàn thể ứng dụng của bạn, tức là từ đầu thẻ <html> cho tới cuối thẻ </html> luôn. Nhưng nếu code chỉ có như bên dưới:

thì AngularJS chỉ kiểm soát phần <div> mà thôi, tức là phần AngularJS chỉ từ đầu <div ng-app> cho tới </div> tương ứng với nó. Các phần khác thì khi bạn dùng String expression, chúng sẽ mắt tròn mắt dẹt chỉ in ra luôn cặp ngoặc nhọn.

2. Khai báo và định nghĩa module trong Javascript:

Để định nghĩa một AngularJS module (mục đích là sau này đem nó ra dùng!) thì bạn sẽ dùng một method của angular. Method này có cấu trúc như sau:

Trong đó, name là tên/giá trị bạn đặt cho ng-app. Và ở đây, để dùng với module, thì ng-app bắt buộc phải có giá trị, cho dù là trong trang HTML của bạn chỉ có mỗi một ng-app đi chăng nữa thì vẫn phải gán name cho nó đàng hoàng, để gọi trong JS. Chẳng hạn:

Param thứ hai trong module(…) là một array chứa các requires. Require, require, require… bạn có để ý giống như require trong NodeJS không? Nó tương tự như vậy đó. Nếu bạn có truyền nó vào, dù là array rỗng, thì module sẽ được tạo cùng với các requires hỗ trợ. Nếu bạn bỏ qua nó, thì module sẽ được gọi để cấu hình thêm. Về việc bạn sẽ truyền gì vào array này, tôi sẽ giải thích sau. Ở đây, bạn tạm chấp nhận truyền array rỗng vào.

Param thứ ba là một function về configuration. Nó sẽ được thực thi ngay khi module load. Phương thức này dùng để cấu hình các Services thông qua các Providers. Function này chỉ chấp nhận Provider và const mà thôi. Về phần Provider thì tôi sẽ trình bày trong các bài viết sau.

3. Các phương thức của AngularJS module:

Module.controller(controllerName, constructor): Đây là một trong những phương thức quan trọng nhất của AngularJS module. Về phần Controller, tôi sẽ nói trong bài sau.

Module.directive(directiveName, directiveFactory): “Đăng kí” một directive với name và factory (là một function) của nó. Trong trường hợp đơn giản nhất, directiveFactory ở đây sẽ return HTML template của directive. Ví dụ:

Và khi bạn gọi <my-directive> trong HTML thì nó sẽ hiển thị đoạn bên trên. Ngoài ra, directoryFactory cũng có thể return một Directive Definition Object chứa các properties cung cấp các thông tin khác cho directive, bao gồm priority; template – với value của template là HTML như bên trên, hoặc templateUrl – với value của templateUrl là path truyền tới trang HTML bên ngoài trong trường hợp bạn tách HTML template ra thành một tập tin riêng; controller – value của nó sẽ định nghĩa nội dung của controller – tôi sẽ nói về Controller trong bài sau, controllerAs – alias của controller; transclude; restrict; v.v…

Module.component(componentName, options): “Đăng kí” một component với name và options của nó. Tham số options là một Component Definition Object và object này khá tương tự với Directive Definition Object với các properties tương tự, như template – templateUrl, restrict, v.v… Về Component, tôi sẽ giới thiệu trong các bài sau. Ví dụ:

Ngoài 3 methods quan trọng nhất bên trên thì Module cũng có các methods bạn chưa cần tìm hiểu trong khoảng thời gian này. Vì vậy, tôi sẽ không giới thiệu trong bài này.

4. “Nhét” module con vào module chính:

Theo mặc định thì AngularJS chỉ cho phép một ng-app duy nhất trên một trang HTML toàn cục, tức tính luôn cả HTML template nằm ngoài và được “nhập” thông qua templateUrl. Chẳng hạn, AngularJS sẽ la oai oái và “không thèm” chạy phần HTML dưới đây:

Tuy nhiên, vẫn có cách sử dụng “đường vòng”. Đó là việc “thuê” tên angular.bootstrap vào để giải quyết. Tên này có “công thức” như sau:

Do đó, bạn có thể bootstrap một hoặc nhiều modules vào một element với các config tương ứng. Chẳng hạn, với trang HTML trên thì tôi làm như bên dưới:

Trong bài sau, tôi sẽ giới thiệu về Controllers. Hẹn gặp các bạn trong Bài 5.

Leave a Reply

Your email address will not be published. Required fields are marked *

This site uses Akismet to reduce spam. Learn how your comment data is processed.