AngularJS - Bộ điều khiển

Ứng dụng AngularJS chủ yếu dựa vào các bộ điều khiển để kiểm soát luồng dữ liệu trong ứng dụng. Một bộ điều khiển được xác định bằng cách sử dụng chỉ thị ng-controller . Bộ điều khiển là một đối tượng JavaScript có chứa các thuộc tính / thuộc tính và chức năng. Mỗi bộ điều khiển chấp nhận $ scope làm tham số, tham chiếu đến ứng dụng / mô-đun mà bộ điều khiển cần xử lý.

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

Ở đây, chúng tôi khai báo một bộ điều khiển có tên là studentController , sử dụng chỉ thị ng-controller. Chúng tôi định nghĩa nó như sau:

<script>
   function studentController($scope) {
      $scope.student = {
         firstName: "Mahesh",
         lastName: "Parashar",
         
         fullName: function() {
            var studentObject;
            studentObject = $scope.student;
            return studentObject.firstName + " " + studentObject.lastName;
         }
      };
   }
</script>

StudentController được định nghĩa là một đối tượng JavaScript với $ scope làm đối số.
Phạm vi $ đề cập đến ứng dụng sử dụng đối tượng studentController.
$ Scope.student là một thuộc tính của đối tượng studentController.
FirstName và lastName là hai thuộc tính của đối tượng $ scope.student. Chúng tôi chuyển các giá trị mặc định cho chúng.
Thuộc tính fullName là hàm của đối tượng $ scope.student, trả về tên kết hợp.
Trong hàm fullName, chúng ta lấy đối tượng student và sau đó trả về tên kết hợp.
Lưu ý, chúng ta cũng có thể xác định đối tượng controller trong một tệp JS riêng biệt và tham chiếu tệp đó trong trang HTML.

Bây giờ chúng ta có thể sử dụng thuộc tính sinh viên của studentController bằng cách sử dụng ng-model hoặc sử dụng các biểu thức như sau:

Enter first name: <input type = "text" ng-model = "student.firstName"><br>
Enter last name: <input type = "text" ng-model = "student.lastName"><br>
<br>
You are entering: {{student.fullName()}}

Chúng tôi liên kết student.firstName và student.lastname vào hai hộp nhập liệu.
Chúng tôi đã liên kết student.fullName () với HTML.
Giờ đây, bất cứ khi nào bạn nhập bất cứ thứ gì vào hộp nhập tên và họ, bạn có thể thấy tên đầy đủ được cập nhật tự động.

Thí dụ

Ví dụ sau đây cho thấy việc sử dụng bộ điều khiển:

testAngularJS.htm

<html>
   <head>
      <title>Angular JS Controller</title>
      <script src = "https://ajax.googleapis.com/ajax/libs/angularjs/1.3.14/angular.min.js">
      </script>
   </head>
   
   <body>
      <h2>AngularJS Sample Application</h2>
      
      <div ng-app = "mainApp" ng-controller = "studentController">
         Enter first name: <input type = "text" ng-model = "student.firstName"><br>
         <br>
         Enter last name: <input type = "text" ng-model = "student.lastName"><br>
         <br>
         You are entering: {{student.fullName()}}
      </div>
      
      <script>
         var mainApp = angular.module("mainApp", []);
         
         mainApp.controller('studentController', function($scope) {
            $scope.student = {
               firstName: "Mahesh",
               lastName: "Parashar",
               
               fullName: function() {
                  var studentObject;
                  studentObject = $scope.student;
                  return studentObject.firstName + " " + studentObject.lastName;
               }
            };
         });
      </script>
      
   </body>
</html>

Đầu ra

Mở tệp testAngularJS.htm trong trình duyệt web và xem kết quả.