Tạo ứng dụng AngularJS đầu tiên

Để mở đầu, chúng ta bắt đầu với việc tạo ứng dụng thực tế XinChao bởi sử dụng AngularJS, chúng tôi sẽ cho các bạn thấy các phần cụ thể của một ứng dụng AngularJS. Một ứng dụng AngularJS sẽ bao gồm các thành phần sau:

• ng-app : Directive này định nghĩa và gắn kết một ứng dụng AngularJS đến trang HTML.

• ng-model : Directive này gắn kết các giá trị của dữ liệu ứng dụng AngularJS đến các điều khiển đầu vào của HTML.

• ng-bind : Directive này gắn kết dữ liệu của ứng dụng AngularJS đến các thẻ HTML.

Các bước tạo một ứng dụng AngularJS

Bước 1: Tải framework

Là một khung JavaScript thuần, thư viện AngularJS có thể được thêm vào bởi sử dụng thẻ

hoặc với đường dẫn đến thư viện AngularJS bạn đã tải trong chương Hướng dẫn cài đặt AngularJS:

Bước 2: Định nghĩa ứng dụng AngularJS sử dụng ng-app directive.

...

Bước 3: Định nghĩa tên một model sử dụng ng-model directive.

Nhap ten cua ban: 

Bước 4: Gắn kết giá trị của model đã được định nghĩa ở trên sử dụng ng-bind directive.

Xin chao !

Các bước để chạy một ứng dụng AngularJS

Sử dụng các bước bên trên để tạo ra một trang HTML.

Ung dung XinChao trong AngularJS

   
Nhap ten cua ban: 
   
Xin chao !

Kết quả

Mở trang XinChao.html trên trình duyệt, nhập tên của bạn và xem kết quả.

Cách AngularJS tích hợp với HTML

• ng-app directive khai báo để bắt đầu một ứng dụng AngularJS.

• ng-model directive sau đó tạo biến model có tên là "ten" được sử dụng trong trang web HTML và trong thẻ div với ng-app directive.

• ng-bind sau đó sử dụng tên model để hiển thị trong thẻ span của HTML bất cứ khi nào người dùng nhập một thứ gì đó vào hộp văn bản.

• Thẻ đóng