Rate this post

AngularJS Controller được sử dụng để điều khiển luồng dữ liệu của ứng dụng AngularJS. 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 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ố đề cập đến ứng dụng / mô-đun mà bộ điều khiển sẽ điều khiển.

Các bài viết liên quan:

  1. Ví dụ về Controller AngularJS
<!DOCTYPE html>  
<html>  
<script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.4.8/angular.min.js"></script>  
<body>  
  
<div ng-app="myApp" ng-controller="myCtrl">  
  
Tên:  <input type="text" ng-model="firstName"><br>  
Họ :  <input type="text" ng-model="lastName"><br>  
<br>  
Họ và tên: {{firstName + " " + lastName}}  
  
</div>  
  
<script>  
var app = angular.module('myApp', []);  
app.controller('myCtrl', function($scope) {  
    $scope.firstName = "first name";  
    $scope.lastName = "last name";  
});  
</script>  
  
</body>  
</html>  

Ghi chú:

  • Ở đây, ứng dụng AngularJS chạy bên trong <div> được định nghĩa bởi ng-app = “myApp”.
  • Chỉ thị AngularJS là thuộc tính ng-controller = “myCtrl”.
  • Hàm myCtrl là một hàm JavaScript.
  • AngularJS sẽ gọi Controller 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).
  • Controller 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 Controller (FirstName và lastName).
  1. Ví dụ về Controller AngularJS với các phương thức (biến dưới dạng hàm)
<!DOCTYPE html>  
<html>  
<script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.4.8/angular.min.js"></script>  
<body>  
  
<div ng-app="myApp" ng-controller="personCtrl">  
  
Tên: <input type="text" ng-model="firstName"><br>  
Họ : <input type="text" ng-model="lastName"><br>  
<br>  
Họ và tên: {{fullName()}}  
  
</div>  
<script>  
var app = angular.module('myApp', []);  
app.controller('personCtrl', function($scope) {  
    $scope.firstName = "first name";  
    $scope.lastName = "last name";  
    $scope.fullName = function() {  
        return $scope.firstName + " " + $scope.lastName;  
    };  
});  
</script>  
  
</body>  
</html>  

  1. Controller AngularJS trong các tệp bên ngoài

Trong các ứng dụng lớn hơn, nói chung Controller được lưu trữ trong các tệp bên ngoài.

Tạo một tệp bên ngoài có tên “personController.js” để lưu trữ Controller.

Ở đây, “personController.js” là:

   angular.module('myApp', []).controller('personCtrl', function($scope) {  
    $scope.firstName = "Aryan",  
    $scope.lastName = "Khanna",  
    $scope.fullName = function() {  
        return $scope.firstName + " " + $scope.lastName;  
    }  
});  

Xem ví dụ này:

<!DOCTYPE html>  
<html>  
<script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.4.8/angular.min.js"></script>  
<body>  
<div ng-app="myApp" ng-controller="personCtrl">  
Tên: <input type="text" ng-model="firstName"><br>  
Họ : <input type="text" ng-model="lastName"><br>  
<br>  
Họ và tên: {{firstName + " " + lastName}}  
</div>  
<script src="personController.js"></script>  
</body>  
</html>  

Trả lời

Email của bạn sẽ không được hiển thị công khai. Các trường bắt buộc được đánh dấu *

Contact Me on Zalo
Call now