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.
| <!DOCTYPE html> | |
| <html> | |
| <body> | |
| <script src="angular.min.js"></script> | |
| <script src="app.js"></script> | |
| </body> | |
| </html> |
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.
| <body ng-controller="MyController"> | |
| <script src="angular.min.js"></script> | |
| </body> |
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.
| <!DOCTYPE html> | |
| <html ng-app="tutorial"> | |
| </html> |
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.
Codeaholicguy 
Cảm ơn anh, bài viết giúp em khá nhiều ^^