Ứng dụng AngularJS được điểu khiển bởi bộ điều khiển được định nghĩa bởi ng-controller.
Nó là một đối tượng JavaScript, được tạo theo cú pháp JavaScript.
<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 = "DOTNET";
$scope.lastName = "GROUP";
});
</script>
Giải thích ví dụ
AngularJS modules định nghĩa ứng dụng AngularJS.
AngularJS controllers định nghĩa bộ điều khiển ứng dụng AngularJS. Chúng ta định nghĩa một template HTML bằng cách gọi tên controller đã được khai báo.
Chỉ thị ng-app là tên của ứng dụng được định nghĩa bởi AngularJS modules, chỉ thị ng-controller là tên của bộ điều khiển được định nghĩa bởi AngularJS controllers.
Định nghĩa Angular modules
var app = angular.module('myApp', []);
Định nghĩa bộ điều khiển (Angular controller)
app.controller('myCtrl', function ($scope) {
$scope.firstName = "DOTNET";
$scope.lastName = "GROUP";
});
Hàm myCtrl là một hàm JavaScript, nó gọi đối tượng $scope bởi AngularJS. Phạm vi của đối tượng này nằm trong giao diện HTML được bao bởi ng-controller.
Angular Controller - $scope
$scope là một đối tượng cầu nối lưu trữ dữ liệu, hay có thể hiểu nó là một kho dữ liệu để trao đổi giữa controlller và HTML
Trong ví dụ trên, khi chúng ta khai báo một controller bên HTML thì bắt buộc phải khai báo module angular và một ứng dụng có thể có nhiều controller.
Trong ví dụ trên, đối tượng $scope tạo hai thuộc tính là firstName và lastName (được gán giá trị ban đầu là "DOTNET" và "GROUP"). Giá trị của nó sẽ liên kết với những phẩn tử có chỉ thị ng-model.
Như bài trước, chạy chương trình và nhập dữ liệu và các input , bạn sẽ thấy Fullname thay đổi theo. Vì chỉ thị ng-model liên kết dữ liệu đến phần tử có chứa biểu thức {{}} hoặc ng-bind và trong controller cũng vậy, giá trị của $scope.firstName và $scope.lastName cũng thay đổi.
Phương thức trong Controller
Ví dụ trên thể hiện một đối tượng có hai thuộc tính: lastName và firstName.
Bạn có thể xây dụng một phương thức để hiển thị 2 thuộc tính này
Trong điều khiển myCtrl, bạn thêm phương thức sau:
$scope.fullName = function() {
return $scope.firstName + " " + $scope.lastName;
}
Trong HTML, bạn thêm như sau:
<p>Full Name: {{ fullName() }}</p>
Từ ví dụ trên ta có kết luận như sau:
Mỗi controller sẽ có một $scope riêng biệt. Trong view của mỗi controller có thể sử dụng giá trị của $scope thông qua cú pháp {{tên gía trị}} hoặc ng-bind.