Series AngularJS cho người mới: Directive, Module, Expression

Chắc hẳn đối với một Developer không xa lạ gì đối với một cái tên quá nổi tiếng như AngularJS. Hôm nay tôi sẽ làm một loạt bài hướng dẫn AngularJS từ cơ bản đến nâng cao qua những ví dụ cụ thể. Hy vọng các bạn sẽ thấy thích thú với Series này.

Nào chúng ta cũng bắt đầu bài đầu tiên với việc làm quen với AngularJS.

AngularJS là gì?

AngularJS là một Javascript Framework đùng để phát triển Dynamic Web Application.

Cùng so sánh về cách Web Browser tải về Website truyền thống và Website viết bằng AngularJS.

Đây là cách Web Browser tải vể Website truyền thống.

Đối với cách truyền thống, ta thấy Webpage và Assets được tải về mỗi khi có request lên Server. Vậy còn với AngularJS? Mời các bạn xem hình dưới.

Đây là cách Website viết bằng AngularJS được tải về bằng Web Browser.

Như các bạn thấy, AngularJS tải về tất cả Webpage và Assets trong request đầu tiên, sau đó chỉ có phần dữ liệu được tải về dướng dạng JSON. Điều này làm cho các request sau nhẹ hơn rất nhiều so với cách truyền thống.

Một số các khái niệm cơ bản trong bài này tôi muốn giới thiệu đó là Directive, Module, Expression.

Để sử dụng AngularJS các bạn cần tải về angular.min.js tại http://angularjs.org/.

Tạo folder angular-tutorial trong đó chứa hai file index.html và angular.min.js. Chúng ta import angular.min.js như sau.

Các bạn đã chuẩn bị xong, giờ chúng ta cũng đi qua từng khái niệm.

Directive là marker nằm trong HTML tag, dùng để báo cho Angular biết phải chạy đoạn code Javascript nào hay reference tham số ra sao.

Như các bạn thấy trong đoạn code trên, ta có ng-controller chính là Directive.

Module là nơi chúng ta viết những chức năng của Web Application, nhờ có Module mà code của chúng ta sẽ dễ đọc hơn, dễ maintain hơn cũng như dễ thực hiện việc testing hơn. Khi khai báo Module chũng ta phải khai báo thêm các dependencies nếu cần sử dụng, dependencies có thể coi là những thư viện chúng ta cần sử dụng.

Tạo file app.js trong folder angular-tutorial và import vào file index.html.

Khai báo Module như sau.

var app = angular.module('tutorial', [ ]);

Phần ‘tutorial’ chính là Module Name, phần trong cặp ngoặc vuông [] sẽ là những dependencies dùng trong Module này.

Trong file index.html ta khai báo như sau.

Phần ng-app này cho AngularJS biết rằng phải load module ‘tutorial’ khi page được load.

Cuối cùng chúng ta tìm hiểu về Expression.

Expression hay còn gọi là Angular Expression cho phép chúng ta thêm dữ liệu dạng động vào trong trang HTML.

Expression thường viết dưới dạng {{ … }}

Ví dụ.

There are {{4 + 6}} candies;

Sẽ tương đương với.

There are 10 candies;

Các bạn có thể đọc thêm về Expression tại http://docs.angularjs.org/guide/expression.

Hy vọng các bạn đã có cái nhìn sơ lược về AngularJS, cũng như về Directive, Module và Expression. Hẹn gặp lại các bạn ở bài tiếp theo.

Advertisements

3 thoughts on “Series AngularJS cho người mới: Directive, Module, Expression

Bình luận

Mời bạn điền thông tin vào ô dưới đây hoặc kích vào một biểu tượng để đăng nhập:

WordPress.com Logo

Bạn đang bình luận bằng tài khoản WordPress.com Đăng xuất / Thay đổi )

Twitter picture

Bạn đang bình luận bằng tài khoản Twitter Đăng xuất / Thay đổi )

Facebook photo

Bạn đang bình luận bằng tài khoản Facebook Đăng xuất / Thay đổi )

Google+ photo

Bạn đang bình luận bằng tài khoản Google+ Đăng xuất / Thay đổi )

Connecting to %s