Giới thiệu
Hướng dẫn này sẽ giúp bạn tìm hiểu AngularJS một cách nhanh chóng và hiệu quả.
Đầu tiên, bạn sẽ học được những điều cơ bản của AngularJS như chỉ thị (directive), biểu thức (expressions), các bộ lọc (filters), các mô-đun (modules) và bộ điều khiển (controllers).
Những điều cần biết
Trước khi bạn học AngularJS, bạn cần phải hiểu biết cơ bản về:
AngularJS là một khuôn mẫu (framework) JavaScript
AngularJS hoạt động dựa trên thuộc tính HTML với các Chỉ thị, và liên kết dữ liệu HTML với các biểu thức.
AngularJS thường dùng để phát triển frontend (giao diện khách hàng) thông qua các API để gọi data, sử dụng mô hình MVC (Model, View, Controller).
Nó được thêm vào một trang HTML với một thẻ <script>.
<script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.3.14/angular.min.js"></script>
AngularJS mở rộng HTML với ng-directives.
Chỉ thị ng-app định nghĩa một ứng dụng AngularJS.
Chỉ thị ng-model dùng để liên kết với các giá trị của các điều khiển HTML (input, seclect, textarea).
Chỉ thị của ng-bind dùng để liên kết dữ liệu của ng-model đến HTML.
Hãy thử đoạn mã dưới đây
Trong mỗi bài, bạn có thể chỉnh sửa các ví dụ trực tuyến, và bấm vào nút XEM để xem kết quả.
<div ng-app="">
<p>Nhập giá trị vào đây</p>
<p>Tên: <asp:TextBox runat="server" ID="txtInput" ng-model="name"></asp:TextBox></p>
Xin chào<p ng-bind="name"></p>
</div>
Giải thích ví dụ:
AngularJS tự động bắt đầu khi trang web đã được nạp.
Chỉ thị ng-app nói rằng thẻ div là "chủ sở hữu" của một ứng dụng AngularJS. Các chỉ thị khác phải nằm bên trong chỉ thị này mới có thể hoạt động được.
Chỉ thị ng-model liên kết với giá trị của thẻ input thông qua biến name.
Chỉ thị ng-bind thay đổi nội dung thẻ p bằng giá trị của biến name. Khi bạn thay đổi giá của thẻ input thì nội dung của thẻ p cũng thay đổi theo.
Lưu ý: Các giá trị trong các chỉ thị của Angular thay đổi thì ngay lập tức HTML cũng sẽ thay đổi theo để hiển thị cho người dùng.
AngularJS - ng-app
Trong một ứng dụng website thì ng-app đóng vai trò là một module chính, nếu Angular nó nhận thấy ta khai báo ng-app ngay tại vị trí nào thì nó sẽ tự hiểu là tất cả các thẻ con bên trong sẽ sử dụng AngularJS, lúc này Angular sẽ biên dịch tất cả những đoạn code bên trong đó nếu có sử dụng cú pháp của Angular thì sẽ được thực thi.
Module không định danh
<div ng-app>
<p>Nhập giá trị vào đây</p>
<p>Tên: <asp:TextBox runat="server" ID="txtInput" ng-model="name"></asp:TextBox></p>
Xin chào<p ng-bind="name"></p>
</div>
Khi chạy ứng dụng thì cũng như ví dụ trên.
Module có định danh
Nếu ta khai báo ng-app="myApp" thì ứng dụng sẽ báo lỗi do không tìm thấy module tên "myApp". Để khai báo một module, ta làm như sau:
var myApp = angular.module("myApp", []);
Đoạn code trên ta sử dụng hàm module với 2 tham số như sau:
- myApp: Là tên của app, nó phải giống với giá trị của thuộc tính ng-app bên HTML.
- [ ] là danh sách các module mà ta thêm vào ứng dụng myApp của mình, các module này có thể do ta tự viết hoặc của AngularJS cung cấp.
Ví dụ ta tự định nghĩa một module khác tên là "myLib", và import vào "myApp" như sau.
var myApp = angular.module("myApp", ["myLib"]);
Như vậy khi khai báo ng-app ta có thể gán tên cho nó hoặc là không gán tên. Trong thực tế thì ta nên khai báo tên để có thể import một số thư viện khác.
Ưu điểm và nhược điểm của AngularJS
Ưu điểm:
- Angular cho phép tạo ra các ứng dụng một cách đơn giản, code sạch
- Angular sử dụng data bind giống .NET với tính năng liên kết với HTML nên giúp người dùng cảm thấy dễ chịu.
- Angular có thể chạy trên hầu hết các trình duyệt điện thoại thông minh.
Nhược điểm:
- Không an toàn: Được phát triển từ javascript nên nó không an toàn vì Javascript chạy ở client (máy khách) có thể bị người dùng cheat code nên máy chủ phải thường xuyên xác nhận các thông tin như đăng nhập, ....
- Phụ thuộc: Nếu người dùng vô hiệu hóa javascript thì ứng dụng sẽ không hoạt động.