AngularJS - Ứng dụng đầu tiên

Trước khi tạo Hello World thực tế ! ứng dụng sử dụng AngularJS, chúng ta hãy xem các phần của một ứng dụng AngularJS. Một ứng dụng AngularJS bao gồm ba phần quan trọng sau:

ng-app - Chỉ thị này định nghĩa và liên kết ứng dụng AngularJS với HTML.
ng-model - Chỉ thị này liên kết các giá trị của dữ liệu ứng dụng AngularJS với các điều khiển đầu vào HTML.
ng-bind - Chỉ thị này liên kết dữ liệu Ứng dụng AngularJS với các thẻ HTML.

Tạo ứng dụng AngularJS

Bước 1: Tải khuôn khổ

Là một khung JavaScript thuần túy, nó có thể được thêm vào bằng cách sử dụng thẻ <Script>.

<script 
   src = "https://ajax.googleapis.com/ajax/libs/angularjs/1.3.14/angular.min.js">
</script>

Bước 2: Xác định ứng dụng AngularJS bằng chỉ thị ng-app

<div ng-app = "">
   ...
</div>

Bước 3: Xác định tên kiểu máy bằng chỉ thị ng-model

<p>Enter your Name: <input type = "text" ng-model = "name"></p>

Bước 4: Ràng buộc giá trị của mô hình trên được xác định bằng chỉ thị ng-bind

<p>Hello <span ng-bind = "name"></span>!</p>

Thực thi ứng dụng AngularJS

Sử dụng ba bước nêu trên trong một trang HTML.

testAngularJS.htm

<html>
   <head>
      <title>AngularJS First Application</title>
   </head>
   
   <body>
      <h1>Sample Application</h1>
      
      <div ng-app = "">
         <p>Enter your Name: <input type = "text" ng-model = "name"></p>
         <p>Hello <span ng-bind = "name"></span>!</p>
      </div>
      
      <script src = "https://ajax.googleapis.com/ajax/libs/angularjs/1.3.14/angular.min.js">
      </script>
      
   </body>
</html>

Đầu ra

Mở tệp kiểm traAngularJS.htm trong trình duyệt web. Nhập tên của bạn và xem kết quả.

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

Chỉ thị ng-app cho biết thời điểm bắt đầu ứng dụng AngularJS.
Chỉ thị ng-model tạo ra một tên biến mô hình có tên, có thể được sử dụng với trang HTML và trong div có chỉ thị ng-app.
Sau đó, ng-bind sử dụng mô hình tên sẽ được hiển thị trong thẻ HTML <span> bất cứ khi nào người dùng nhập thông tin đầu vào vào hộp văn bản.
Thẻ đóng </div> cho biết sự kết thúc của ứng dụng AngularJS.