Thứ Ba, 10 tháng 2, 2015

AngularJS Tutorial - Bài 1: Giới thiệu

Edit
Angular là một MVW Javascript framework rất hấp dẫn để xây dựng nên những ứng dụng web. Angular được xây dựng, phát triển bởi Google, và nó cung cấp những tính năng rất hiện đại cho việc xây dựng web. MVW là viết tắt của Model-View-Whatever, bạn có thể thấy rằng tham vọng cũng như những gì nó mang lại là rất lớn, và nó sẽ hỗ trợ chúng ta một cách mềm dẻo flexible để phát triển mọi thể loại ứng dụng. Trong MVW, chữ W có thể được thay thế để bạn có thể đi theo các hướng MVC (Model-View-Controller) hoặc MVVM (Model-View-ViewModel), do đó bạn có thể thấy được sự quen thuộc nhất định khi bắt tay vào tìm hiểu và sử dụng Angular.

Bài này là một trong series các bài viết:


Trước khi biết về Angular JS, bạn sẽ không thể ngờ rằng HTML còn có thể trở nên "ĐỘNG" và tiện dụng đến như vậy. Bạn thử tưởng tượng rằng, web của bạn sẽ kết nối với server API, lấy về result dưới dạng JSON, Angular JS sẽ đóng vai trò data-driven để biến JSON đó thành những Models. Bạn có thể nhanh chóng update lên HTML content mà không cần phải refresh lại trang,...


Angular thì miễn phí và open-source do đó bạn có thể thoải mái sử dụng và tuỳ biến theo ý thích của mình.

Dưới đây là một sơ đồ mà tôi vẫn hay sử dụng khi làm việc với AngularJS:




Angular thích hợp sử dụng nhất cho những ứng dụng có 1 trang SPA - Single Page Application.
Thông qua các bài tutorial này, bạn sẽ lần lượt làm quen với những tính năng nổi trội mà Angular JS mang lại.

Đối tượng hướng đến

Các bài trong series này hướng đến những người đã có ít nhiều kinh nghiệm lập trình web, làm việc với Javascript.
Do đó, bạn cần tham khảo phần các yêu cầu chuẩn bị trước khi theo dõi các bài tutorial này.

Điều kiện để học Angular JS

Để làm quen và sử dụng Angular, bạn phải có những kiến thức, hiểu biết cơ bản về những môn sau:
Ngoài ra, bạn có thêm được các kiến thức công nghệ về JQuery, HTML5, AJAX, JSON, Restful Webservices,... thì lại càng lợi thế hơn khi học Angular.


Các tính năng Cơ bản của Angular JS


Nhìn tổng quát ở sơ đồ trên, ta có thể thấy được những tính năng chính do Angular JS cung cấp gồm có:

  • Data-binding Sự gắn kết data lưu trong model với view

    Angular có khả năng tự động đồng bộ hoá data giữa Model và View. Data được thay đổi trên View (thông qua input field) sẽ ngay lập tức được cập nhật vào Model javascript object. Ngược lại, javascript object khi có thay đổi, có thể là từ JSON phía server API trả về, sẽ được tự động cập nhật hiển thị lên HTML view ngay mà bạn không cần phải can thiệp vào. Đây chắc chắn là thế mạnh mà bạn sẽ cực kỳ thích thú.

  • Scope

    Scope có thể hiểu là những objects model ở tầng application (chú ý, nó không chỉ là Model để lưu các giá trị thuộc tính của object trong OOP, mà nó còn lưu cả các cài đặt cho application ở thời điểm hiện tại nữa). Và chúng sẽ đóng vai trò kết nối giữa controller với view. Chẳng hạn, bạn sẽ gán action cho button đến một hàm trong scope.

  • Controller

    Controller trong Angular JS sẽ chứa các javascript method, và giới hạn trong một scope cụ thể.

  • Services

    AngularJS cung cấp một vài services sẵn, ví dụ như $http để thực hiện một lời gọi AJAX (XMLHttpRequest) đến server API. Những services này là những object duy nhất, dùng chung trong toàn app, và nó chỉ được khởi tạo một lần. Bạn sẽ có thể sẵn sàng sử dụng các object này ngay bất cứ lúc nào, và Angular framework sẽ quản lý những object này giúp bạn.

  • Filters - Các bộ lọc

    Bạn sẽ sử dụng các bộ lọc này để lọc ra được những item từ một arrays nào đó.

  • Directives - Điều hướng

    Các điều hướng là những đánh dấu (markers) trên các thành phần DOM. Nó có thể là bản thân cả element, thuộc tính, css,... để giúp bạn thao tác với element đó. Directives cũng có thể được sử dụng để tạo ra những thẻ HTML tuỳ biến, các widgets. AngularJS cung cấp sẵn một số directive thường dùng, mà sau này bạn sẽ quen thuộc, ví dụ như ngBind, ngModel, ...

  • Templates - Mẫu giao diện

    Template sẽ những view hiển thị các thông tin từ model do controller chỉ thị. Nó có thể là một file (ví dụ index.html), có thể là nhiều view như là những thành phần con (partials) để ghép lại thành một màn hình.

  • Routing - chuyển hướng trang web

    Nếu bạn đã từng làm việc với các framework MVC, bạn sẽ hiểu khái niệm này. Routing sẽ giúp bạn chỉ định view nào sẽ hiển thị, nếu người dùng truy cập vào URL có patterns như thế nào. Nghĩa là nó sẽ thay đổi views hiển thị tương ứng với ngữ cảnh.

  • MVW - Model View Whatever

    MVW là một design pattern mà chia một ứng dụng thành các phần Model, View, và thường là Controller tương tự là MVC truyền thống. Mỗi phần sẽ có khả năng và vai trog đáp ứng riêng. So với MVC truyền thống, MVW còn pha trộn thêm MVVW (Model-View-ViewModel). Và cái tên MVW Model View Whatever là do Angular JS team đặt ra.

  • Deep Linking - Liên kết sâu

    Deep linking liên kết sâu cho phép ta mã hoá tình trạng của ứng dụng vào URL, và ta có thể bookmark lại được. Sau đó, ứng dụng có được dựng lại hoàn toàn trạng thái của nó sau này khi ta access vào URL đó.

  • Dependency Injection

    AngularJS có sẵn một hệ thống injection để developers có thể dễ dàng tạo, hiểu, và kiểm tra ứng dụng.



Ưu điểm của AngularJS

  • Với concept ý tưởng, cũng như những thành phần có sẵn mà Angular cung cấp, ta có thể thấy là những ứng dụng SPA Single Page Application - Ứng dụng một trang, sẽ rất thực hiện một các rõ ràng clean, và dễ cho bảo trì code.
  • Với việc mà binding được data vào HTML DOM, nó rất nhanh update data qua lại giữa view và model.
  • Code viết với AngularJS rất dễ test.
  • AngularJS sử dụng injection để bạn ngăn cách và hiểu một cách tách bạch được những thứ liên quan đến nhau.
  • Có thể viết theo hướng tái sử dụng.
  • Với AngularJS, các lập trình viên developers sẽ chỉ cần code ít hơn cho những tính năng lớn.
  • Trong AngularJS, các views là những trang HTML code thuần; các Controller thì được viết bằng javascript để thực hiện các nghiệp vụ business.
  • Và điều quan trọng nhất, ứng dụng viết bằng AngularJS sẽ chạy trên hầu hết các trình duyệt hiện nay, bao gồm cả các trình duyệt trên smart phones, tablets máy tính bảng, đương nhiên là bao gồm cả iOS và Android :)

Nhược điểm của AngularJS

Mặc dù có nhiều lợi ích khi sử dụng AngularJS, tuy nhiên không có gì là hoàn hảo, bạn cũng cần xem xét một số nhược điểm của Angular để có kế hoạch cho mình khi develop app bằng AngularJS. Điều may mắn là những nhược điểm này có thể khắc phục hoặc hạn chế được, đủ để ta yên tâm coding app bằng AngularJS.
  • Không an toàn: Vì nó là nền tảng dựa trên javascript, có nghĩa là nó chạy phía client. Điều này đồng nghĩa với việc người dùng có hiểu biết về coding, có mục đích mờ ám, thì họ có thể sửa đổi code phía client trước khi submit lên server. Do đó, một số các tác vụ quan trọng, bạn nên thực hiện phía server, ví dụ: Authenticate và Authorization (xác thực và kiểm tra quyền của người dùng); thực hiện validation với những data được submit lên API trước khi save hoặc thao tác với data do người dùng submit lên đó. Do đó cách tốt nhất là dùng AngularJS để query vào các WebService API, không nên save trực tiếp data vào database mà không check.
  • Nếu người dùng ứng dụng, bật chức năng chặn Javascript, bạn sẽ không thể làm gì được, webpage sẽ chỉ hiển thị được những thông tin cơ bản, và đương nhiên là các thao tác business sẽ không hoạt động. Tuy nhiên điều này có lẽ ít xảy ra, nhưng bạn cũng cần consider chuyện này.





Tài liệu tham khảo

Bạn có thể tham khảo các ví dụ, cũng như hướng dẫn từ trang chủ Angular JS.