large-companyangular

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

  1. […] Đừng quên đặt code trong closure nhé, ở những closure khác nhau thì những biến cùng tên là hoàn toàn khác nhau, vì thế đừng băn khoăn về var app nhé, thì còn nếu bạn nào còn thắc mắc về closure thì hãy xem qua bài JavaScript Closures để hiểu về closure nhé. Sau khi đã chuyển code ra file, việc tiếp theo chúng ta cần làm là khai báo cho angular biết module store của chúng ta sẽ phải sử dụng thêm module store-products để chạy. Trong bài đầu tiên tôi đã có nói về cách khai báo dependencies cho một module. Các bạn có thể xem lại ở bài Directive, Module, Expression. […]

    Like

Gửi phản hồi

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 Log Out / Thay đổi )

Twitter picture

Bạn đang bình luận bằng tài khoản Twitter Log Out / Thay đổi )

Facebook photo

Bạn đang bình luận bằng tài khoản Facebook Log Out / Thay đổi )

Google+ photo

Bạn đang bình luận bằng tài khoản Google+ Log Out / Thay đổi )

Connecting to %s