- Email devpro.edu.vn@gmail.com
- Hotline0985.95.08.95
Sau khi đã tìm hiểu những khái niệm cơ bản về AngularJS, chúng ta sẽ bắt đầu tạo ra những ứng dụng đầu tiên. Hãy xem hướng dẫn tạo ứng dụng AngularJS đầu tiên và thực hành ngay nào!
1. Các bước để tạo ứng dụng AngularJS đầu tiên
Bước 1 - Tải khung
Là một khung công tác JavaScript thuần túy, nó có thể được thêm bằng cách sử dụng thẻ
Bước 2 - Xác định ứng dụng AngularJS sử dụng chỉ thị ng-app
...
Bước 3 - Xác định tên model sử dụng lệnh ng-model
Enter your Name:
Bước 4 - Ràng buộc giá trị của mô hình trên được xác định bằng cách sử dụng lệnh ng-bind.
Hello !
Các bước để chạy ứng dụng AngularJS
Sử dụng ba bước được đề cập ở trên trong trang HTML.
testAngularJS.htm
AngularJS First Application
Enter your Name:
Hello !
Đầu ra
Mở văn bảnAngularJS.htm trong trình duyệt web. Nhập tên của bạn và xem kết quả.
Chỉ thị ng-app cho biết sự khởi đầu của ứng dụng AngularJS.
Chỉ thị ng-model sau đó tạo ra một biến mô hình có tên là "name" có thể được sử dụng với trang html và trong div có chỉ thị ng-app.
Ng-bind sau đó sử dụng mô hình tên được hiển thị trong thẻ span html bất cứ khi nào người dùng nhập nội dung nào đó vào hộp văn bản.
Đóng thẻ cho biết kết thúc của ứng dụng AngularJS.
Các chỉ thị là các dấu (thuộc tính) trên một phần tử DOM để cho AngularJS gắn một hành vi cụ thể vào phần tử DOM đó hoặc thậm chí chuyển đổi phần tử DOM và các phần tử con của nó.
Hầu hết các chỉ thị trong AngularJS đều bắt đầu với ng . Nó là viết tắt của Angular. Chúng tôi đã áp dụng lệnh ng-app và ng-model trong ví dụ trên.
ng-app : Chỉ thị ng-app là điểm khởi đầu. Nếu khung công tác AngularJS tìm thấy chỉ thị ng-app ở bất kỳ đâu trong tài liệu HTML thì nó khởi động (tự khởi tạo) và biên dịch khuôn mẫu HTML.
Ng-model : Chỉ thị ng-model liên kết phần tử HTML với một thuộc tính trên đối tượng $ scope . Bạn sẽ tìm hiểu về mô hình này sau nhưng bây giờ chúng ta hãy xem xét điều này như là một thuộc tính mô hình.
Một biểu thức giống như mã JavaScript thường được gói bên trong các dấu ngoặc nhọn đôi như {{expression}}. Khung AngularJS đánh giá biểu thức và tạo ra một kết quả.
Bảng sau liệt kê tất cả các khái niệm quan trọng trong AngularJS.
|
Khái niệm |
Sự miêu tả |
|
Bản mẫu |
HTML có đánh dấu bổ sung |
|
Chỉ thị |
Mở rộng HTML với các thuộc tính và thành phần tùy chỉnh |
|
Model |
Dữ liệu được hiển thị cho người dùng trong chế độ xem và người dùng tương tác với |
|
Scope |
Một bối cảnh mà mô hình được lưu trữ để các bộ điều khiển, các chỉ thị và các biểu thức có thể truy cập nó |
|
Expressions |
Thực thi mã JavaScript bên trong dấu ngoặc {{}}. |
|
Compiler |
Phân tích cú pháp mẫu và các chỉ thị và biểu thức instantiates |
|
Filter |
Định dạng giá trị của biểu thức để hiển thị cho người dùng |
|
View |
Những gì người dùng nhìn thấy (DOM) |
|
Data Binding |
Đồng bộ hóa dữ liệu giữa mô hình và chế độ xem |
|
Controller |
Duy trì dữ liệu ứng dụng và logic nghiệp vụ |
|
Module |
Một bộ chứa cho các phần khác nhau của ứng dụng bao gồm bộ điều khiển, dịch vụ, bộ lọc, chỉ thị cấu hình Bộ phun |
|
Service |
Logic nghiệp vụ có thể sử dụng lại, độc lập với các chế độ xem |
|
Dependency Injection |
Tạo và nối các đối tượng và chức năng |
|
Injector |
Thùng chứa phụ thuộc |
Tìm hiểu thêm:
