AngularJS tut 7: AngularJS Controllers

Bộ điều khiển AngularJS kiểm soát dữ liệu của các ứng dụng AngularJS.

Bộ điều khiển AngularJS là các Đối tượng JavaScript thông thường .

Bộ điều khiển AngularJS

Các ứng dụng AngularJS được điều khiển bởi bộ điều khiển.

Lệnh ng-controller xác định bộ điều khiển ứng dụng.

Bộ điều khiển là một Đối tượng JavaScript , được tạo bởi một phương thức khởi tạo đối tượng JavaScript tiêu chuẩn .

Ví dụ về AngularJS

<div ng-app="myApp" ng-controller="myCtrl">

First Name: <input type="text" ng-model="firstName"><br>
Last Name: <input type="text" ng-model="lastName"><br>
<br>
Full Name: {{firstName + " " + lastName}}

</div>

<script>
var app = angular.module('myApp', []);
app.controller('myCtrl', function($scope) {
  $scope.firstName = "John";
  $scope.lastName = "Doe";
});
</script>

Hãy tự mình thử »

Ứng dụng được giải thích:

Ứng dụng AngularJS được định nghĩa bởi  ng-app = “myApp” . Ứng dụng chạy bên trong <div>.

Thuộc tính ng-controller = “myCtrl” là một chỉ thị AngularJS. Nó định nghĩa một bộ điều khiển.

Hàm myCtrl là một hàm JavaScript.

AngularJS sẽ gọi bộ điều khiển với một đối tượng $ scope .

Trong AngularJS, $ scope là đối tượng ứng dụng (chủ sở hữu của các biến và hàm ứng dụng).

Bộ điều khiển tạo hai thuộc tính (biến) trong phạm vi ( firstName và lastName ).

Các chỉ thị ng-model ràng buộc các trường đầu vào với các thuộc tính của bộ điều khiển (FirstName và lastName).

Phương pháp điều khiển

Ví dụ trên đã trình bày một đối tượng controller có hai thuộc tính: lastName và firstName.

Một bộ điều khiển cũng có thể có các phương thức (biến dưới dạng hàm):

Ví dụ về AngularJS

<div ng-app="myApp" ng-controller="personCtrl">

First Name: <input type="text" ng-model="firstName"><br>
Last Name: <input type="text" ng-model="lastName"><br>
<br>
Full Name: {{fullName()}}

</div>

<script>
var app = angular.module('myApp', []);
app.controller('personCtrl', function($scope) {
  $scope.firstName = "John";
  $scope.lastName = "Doe";
  $scope.fullName = function() {
    return $scope.firstName + " " + $scope.lastName;
  };
});
</script>

Hãy tự mình thử »

Bộ điều khiển trong tệp bên ngoài

Trong các ứng dụng lớn hơn, người ta thường lưu trữ bộ điều khiển trong các tệp bên ngoài.

Chỉ cần sao chép mã giữa các thẻ <script> vào một tệp bên ngoài có tên là personController.js :

Ví dụ về AngularJS

<div ng-app="myApp" ng-controller="personCtrl">

First Name: <input type="text" ng-model="firstName"><br>
Last Name: <input type="text" ng-model="lastName"><br>
<br>
Full Name: {{fullName()}}

</div>

<script src="personController.js"></script>

Hãy tự mình thử »

Một vi dụ khac

Đối với ví dụ tiếp theo, chúng tôi sẽ tạo một tệp bộ điều khiển mới:

angular.module('myApp', []).controller('namesCtrl', function($scope) {
  $scope.names = [
    {name:'Jani',country:'Norway'},
    {name:'Hege',country:'Sweden'},
    {name:'Kai',country:'Denmark'}
  ];
});

Lưu tệp dưới dạng namesController.js :

Và sau đó sử dụng tệp bộ điều khiển trong một ứng dụng:

Ví dụ về AngularJS

<div ng-app="myApp" ng-controller="namesCtrl">

<ul>
  <li ng-repeat="x in names">
    {{ x.name + ', ' + x.country }}
  </li>
</ul>

</div>

<script src="namesController.js"></script>

Hãy tự mình thử »