Cài đặt AngularJS 1.x với ví dụ giản đơn

Cài đặt AngularJS

Sau khi đã có những khái niệm căn bản về AngularJS, chúng ta sẽ tiến hành cài đặt để sử dụng AngularJS:

Step 1: Tải tệp angular.min.js từ URL https://ajax.googleapis.com/ajax/libs/angularjs/1.2.32/angular.min.js, rồi copy file vào thư mục js.

Step 2: Khai báo thư viện AngularJS trong tệp HTML:

<head>
    <script src="js/angular.min.js"></script>
</head>

Step 3: Khai báo thẻ gốc muốn áp dụng AngularJS với từ khóa ng-app. Thẻ với từ khóa này chỉ ra sự khởi đầu ứng dụng AngularJS:

<div ng-app>
</div>

Step 4: Sử dụng các thuộc tính ng-model, ng-bind và các thẻ khác bên trong thẻ gốc ng-app để xây dựng các trang web với AngularJS.

Ví dụ hoàn chỉnh như sau:

<!doctype html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>Example - example-guide-concepts-1-production</title>
  <script src="js/angular.min.js"></script>  
</head>
<body>
  <div ng-app ng-init="qty=1;cost=2">
    <b>Invoice:</b>
    <div>
      Quantity: <input type="number" min="0" ng-model="qty">
    </div>
    <div>
      Costs: <input type="number" min="0" ng-model="cost">
    </div>
    <div>
      <b>Total:</b> {{qty * cost | currency}}
    </div>
  </div>
</body>
</html>

Ví dụ AngularJS

Ví dụ 1:

<!doctype html>
<html ng-app>
   <head>
      <script src = "https://ajax.googleapis.com/ajax/libs/angularjs/1.3.3/angular.min.js"></script>
   </head>
   <body>
      <div>
         <label>Name:</label>
         <input type = "text" ng-model = "yourName" placeholder = "Enter a name here">
         <hr />
         <h1>Hello {{yourName}}!</h1>
      </div>
   </body>
</html>

Ví dụ 2: myfirstexample.html

<!doctype html>
<html>
   <head>
      <script src = "https://ajax.googleapis.com/ajax/libs/angularjs/1.5.2/angular.min.js"></script>
   </head>
   <body ng-app = "myapp">
      <!-- The view is this part -->
      <div ng-controller = "HelloController" >
         <h2>Welcome {{helloTo.title}} to the world of Tutorialspoint!</h2>
      </div>
      
      <!-- The controller part is this part:-->
      <script>
         angular.module("myapp", [])
         .controller("HelloController", function($scope) {
             $scope.helloTo = {};
             $scope.helloTo.title = "AngularJS";
         });
      </script>
   </body>
</html>

Trong ví dụ trên, đã đăng ký HelloController trong module myapp. Parameter $scope được truyền vào hàm của controller sẽ đóng vai trò model. Hàm function($scope) thêm biến helloTo là 1 đối tượng JavaScript. Khi sử dụng sẽ gọi biến đó ra ở cú pháp {{...}}. Kết quả sẽ hiển thị Welcome AngularJS to the world of Tutorialspoint!

---

Based on: TutorialsPoint - AngularJS Environment