Scope trong AngularJs – Học PHP online – Kungfu PHP

Posted on by mtoplistChuyên mục:Top List

Ở các bài trước, mình có loáng thoáng nhắc đến về khái niệm scope. Bài viết hôm nay mình sẽ giới thiệu đến các bạn về Scope trong AngularJs và cách thức hoạt động của nó.

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ụ a :

Mình sẽ tạo 1 file js đặt tên là scope.js có nội dung như sau :

    var myApp = angular.module('myApp', []);

    myApp.controller('myController', function($scope) {
      $scope.my_name = "Kungfu PHP";
    });

Ở đoạn code trên, mình đã đưa giá trị “Kungfu PHP” vào biến phạm vi $scope.myname. 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ị “Kungfu PHP” 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 :

<!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">
  <h1>Ví dụ Scope:</h1>
  <br />
  <div>
    Xin chào tên của tôi là {{my_name}}<b></b>
  </div>
</div>
<script src="scope.js"></script>
</body>
</html>

Khi chạy đoạn code trên sẽ xuất ra màng hình dòng chữ : “Xin chào tên của tôi là Kungfu PHP”. Điều này đồng nghĩa bên ngoài View chúng ta đã sử dụng giá trị “Kungfu PHP” của biến my_name thông qua biến phạm vi $scope trong AngularJs.

Ví dụ b :

Mình sẽ tạo 1 file js đặt tên là scope1.js. File này sẽ có nội dung như sau :

angular.module('myApp', [])
.controller('MyController', function($scope) {
  $scope.username = 'World';

  $scope.sayHello = function() {
    $scope.greeting = 'Hello ' + $scope.username + '!';
  };
});

Ở đ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.

Tiếp đến, mình sẽ tạo 1 file html đặt tên là scope1.html có 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="scope1.js"></script>
</body>
</html>

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. Chúc các bạn học tốt !

Nguồn : kungfuphp.com

Gợi ý : Bạn là người mới và muốn tìm hiểu về Bitcoin nhưng không biết bắt đầu từ đâu?
Click xem ngay Hướng Dẫn Đầu Tư Bitcoin Cho Người Mới nhé!

 

 

 

Tôi Là Hoàng Hiếu

Mình là Hiếu.
Người sáng lập ra blog Kungfu PHP chia sẻ mọi thứ về tiền điện tử, mmo, lập trình,…
Một câu nói mà mình rất thích đó là “Cuộc đời chỉ có một, vì thế hãy làm những gì khiến bạn hạnh phúc và ở bên người khiến bạn luôn mỉm cười”.
Hy vọng nơi đây là góc cafe nhỏ để chúng ta có thể trao đổi, cùng nhau phát triển.

►Nếu bạn thấy bài viết bạn đang đọc hữu ích, hãy mời mình một ly cafe nhé : https://kungfuphp.com/donate

mtoplist