Bài 05 : Scope trong AngularJs
1. Scope trong AngularJs là gì ? Scope (biến phạm vi $scope) là một đối tượng trung gian mà thông qua nó các thuộc tính hay phương thức bên trong controller được truyền tải ra ngoài View. Chính vì thế chỉ có những thuộc tính và phương thức sử dụng $scope mới có thể tương tác với lớp View của một ...
1. Scope trong AngularJs là gì ?
Scope (biến phạm vi $scope) là một đối tượng trung gian mà thông qua nó các thuộc tính hay phương thức bên trong controller được truyền tải ra ngoài View. Chính vì thế chỉ có những thuộc tính và phương thức sử dụng $scope mới có thể tương tác với lớp View của một ứng dụng AngularJs.
Một ví dụ dễ hiểu đó là các bạn hãy tưởng tượng $scope là một chiếc xe vận chuyển, lớp Controller là người quản lý nhà kho, còn View là nơi nhận hàng. Người quản lý nhà kho sẽ thực hiện việc chuyển giao hàng hóa tới nơi nhận hàng thì phải thông qua chiếc xe vận chuyển. Và trong ứng dụng AngularJs cũng vậy, $scope như một chiếc xe tải vận chuyển các phương thức, thuộc tính bên trong Controller và gửi các thuộc tính, phương thức này ra bên ngoài View.
2. Ví dụ Scope trong AngularJs
Nào, bây giờ chúng ta sẽ đi từng ví dụ một để hiểu rõ hơn về $scope nhé.
Ví dụ 1: Mình sẽ viết một đoạn mã javascript có nội dung như sau:
<script type="text/javascript">
var myApp = angular.module('myApp', []);
myApp.controller('myController', function($scope) {
$scope.welcome = "Học angularJS cùng www.chiasephp.net";
});
</script>
Ở đoạn code trên, mình đã đưa giá trị “Học angularJS cùng www.chiasephp.net” vào biến phạm vi $scope.welcome. Thông qua biến phạm vi này, mình biết chắc rằng mình sẽ có toàn quyền sử dụng giá trị “Học angularJS cùng www.chiasephp.net” bên ngoài view mà không gặp phải bất kỳ một trở ngại nào.
Để kiểm chứng điều này, mình sẽ tục tạo 1 file html đặt tên là scope.html. File này sẽ có nội dung như sau:
<div ng-app="myApp">
<div ng-controller="MyController">
Your name:
<input type="text" ng-model="username">
<button ng-click='sayHello()'>Say Hello nào</button>
<hr>
{{greeting}}
</div>
</div>
Tiếp theo chúng ta sẽ viết mã sự kiện khi người dùng click vào button "Say Hello nào":
<script type="text/javascript">
angular.module('myApp', [])
.controller('MyController', function($scope) {
$scope.username = 'World';
$scope.sayHello = function() {
$scope.greeting = 'Hello ' + $scope.username + '!';
};
});
</script>
Ở đoạn code trên, chúng ta có biến username mang giá trị ‘World’ và function sayHello có nhiệm vụ gán giá trị ‘Hello ‘ + $scope.username + ‘!’ vào biến greeting. Tất cả các biến này đều được gắn vào biến phạm vi $scope để có thể sử dụng bên ngoài View.
Lưu lại file scope.html sẽ có toàn bộ nội dung như sau :
<!DOCTYPE html>
<html>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.3.15/angular.min.js"></script>
<meta charset="UTF-8">
</head>
<body>
<div ng-app="myApp">
<div ng-controller="MyController">
Your name:
<input type="text" ng-model="username">
<button ng-click='sayHello()'>Say Hello nào</button>
<hr>
{{greeting}}
</div>
</div>
<script type="text/javascript">
angular.module('myApp', [])
.controller('MyController', function($scope) {
$scope.username = 'World';
$scope.sayHello = function() {
$scope.greeting = 'Hello ' + $scope.username + '!';
};
});
</script>
</body>
</html>
Xem kết quả
Chạy file trên và click vào nút Say Hello nào, các bạn sẽ thấy dòng chữ “Hello World” được xuất ra ngoài trình duyệt.
3. Tổng kết :
Kết thúc bài viết hôm nay, chúng ta đã hiểu rõ hơn về khái niệm Scope trong AngularJs và cách thức vận hành của nó. Scope trong AngularJs đóng một vai trò vô cùng quan trọng, trong xuyên suốt quá trình làm dự án liên quan tới AngularJs, các bạn sẽ thấy rằng không thể thiếu $scope trong bất kỳ một đoạn code nào.
