AngularJS - Vùng giá trị: Hiểu rõ chất keo gắn kết ứng dụng của bạn

Xin chào các pháp sư AngularJS tương lai! Hôm nay, chúng ta sẽ bắt đầu một hành trình thú vị vào thế giới của Vùng giá trị (Scope) trong AngularJS. Đừng lo lắng nếu bạn mới bắt đầu học lập trình - tôi sẽ là người hướng dẫn thân thiện của bạn, giải thích mọi thứ từng bước một. Nào, hãy lấy một tách cà phê (hoặc trà, nếu đó là sở thích của bạn), và cùng nhau bắt đầu!

AngularJS - Scopes

Vùng giá trị là gì trong AngularJS?

Trước hết - vùng giá trị trong AngularJS là gì? Hãy tưởng tượng bạn đang xây dựng một ngôi nhà. Vùng giá trị giống như nền móng của ngôi nhà bạn. Đó là nơi chứa tất cả dữ liệu và hàm của bạn, và nó kết nối HTML (giao diện) với JavaScript (bộ điều khiển).

Hãy xem một ví dụ đơn giản:

<div ng-app="myApp" ng-controller="myCtrl">
<h1>{{message}}</h1>
</div>

<script>
var app = angular.module('myApp', []);
app.controller('myCtrl', function($scope) {
$scope.message = "Hello, AngularJS!";
});
</script>

Trong ví dụ này, $scope là đối tượng vùng giá trị của chúng ta. Chúng ta đang đặt thuộc tính message trên nó, sau đó hiển thị trong HTML bằng {{message}}. Đúng là phép thuật, phải không?

Kế thừa vùng giá trị

Bây giờ, hãy nói về một điều gì đó phức tạp hơn - kế thừa vùng giá trị. Đó giống như một cây gia đình cho dữ liệu của bạn!

Kế thừa vùng giá trị là gì?

Trong AngularJS, các vùng giá trị có thể kế thừa từ vùng giá trị cha, giống như con cái kế thừa các đặc điểm từ cha mẹ. Điều này có nghĩa là nếu một thuộc tính không được tìm thấy trong vùng giá trị hiện tại, AngularJS sẽ tìm kiếm trong vùng giá trị cha, sau đó là vùng giá trị ông nội, và cứ thế.

Hãy xem điều này trong hành động:

<div ng-app="myApp" ng-controller="parentCtrl">
Parent: {{message}}
<div ng-controller="childCtrl">
Child: {{message}}
</div>
</div>

<script>
var app = angular.module('myApp', []);

app.controller('parentCtrl', function($scope) {
$scope.message = "I'm the parent!";
});

app.controller('childCtrl', function($scope) {
// Vùng giá trị con kế thừa từ vùng giá trị cha
});
</script>

Trong ví dụ này, cả cha và con sẽ hiển thị "I'm the parent!" vì vùng giá trị con kế thừa từ vùng giá trị cha.

ghi đè thuộc tính kế thừa

Nhưng nếu con muốn nổi loạn và có thông điệp riêng của mình? Không có vấn đề gì! Chúng ta có thể ghi đè các thuộc tính kế thừa:

<div ng-app="myApp" ng-controller="parentCtrl">
Parent: {{message}}
<div ng-controller="childCtrl">
Child: {{message}}
</div>
</div>

<script>
var app = angular.module('myApp', []);

app.controller('parentCtrl', function($scope) {
$scope.message = "I'm the parent!";
});

app.controller('childCtrl', function($scope) {
$scope.message = "I'm the child!";
});
</script>

Bây giờ, cha sẽ nói "I'm the parent!" và con sẽ nói "I'm the child!". Con đã thành công trong việc khẳng định sự độc lập của mình!

Ví dụ: Cây gia đình của vùng giá trị

Hãy tập hợp tất cả những điều này trong một ví dụ phức tạp hơn. Chúng ta sẽ tạo một cây gia đình của vùng giá trị:

<div ng-app="familyApp" ng-controller="grandparentCtrl">
Grandparent: {{message}}
<div ng-controller="parentCtrl">
Parent: {{message}}
<div ng-controller="childCtrl">
Child: {{message}}
<div ng-controller="grandchildCtrl">
Grandchild: {{message}}
</div>
</div>
</div>
</div>

<script>
var app = angular.module('familyApp', []);

app.controller('grandparentCtrl', function($scope) {
$scope.message = "I'm the grandparent!";
});

app.controller('parentCtrl', function($scope) {
// Kế thừa từ ông nội
});

app.controller('childCtrl', function($scope) {
$scope.message = "I'm the child!";
});

app.controller('grandchildCtrl', function($scope) {
// Kế thừa từ con
});
</script>

Kết quả

Khi bạn chạy đoạn mã này, bạn sẽ thấy:

Grandparent: I'm the grandparent!
Parent: I'm the grandparent!
Child: I'm the child!
Grandchild: I'm the child!

Hãy phân tích điều này:

Ông nội đặt thông điệp ban đầu.
Cha không đặt thông điệp, vì vậy nó kế thừa từ ông nội.
Con đặt thông điệp riêng của mình, ghi đè thông điệp kế thừa.
Cháu không đặt thông điệp, vì vậy nó kế thừa từ cha, không phải từ ông nội.

Phương thức vùng giá trị

Vùng giá trị không chỉ để lưu trữ dữ liệu - chúng còn có thể chứa các phương thức! Dưới đây là bảng một số phương thức vùng giá trị phổ biến:

Phương thức	Mô tả
$watch()	Đăng ký một người监听器 được gọi khi biểu thức được theo dõi thay đổi
$apply()	Bắt đầu chu kỳ digest thủ công
$on()	Đăng ký một người监听器 sự kiện
$emit()	Gửi một sự kiện lên trên qua hierachy vùng giá trị
$broadcast()	Gửi một sự kiện xuống tất cả các vùng giá trị con

Hãy xem một ví dụ về $watch() trong hành động:

<div ng-app="watchApp" ng-controller="watchCtrl">
<input ng-model="name">
<p>{{greeting}}</p>
</div>

<script>
var app = angular.module('watchApp', []);

app.controller('watchCtrl', function($scope) {
$scope.name = 'World';
$scope.greeting = 'Hello, ' + $scope.name + '!';

$scope.$watch('name', function(newValue, oldValue) {
$scope.greeting = 'Hello, ' + newValue + '!';
});
});
</script>

Trong ví dụ này, chúng ta đang sử dụng $watch() để cập nhật lời chào khi tên thay đổi. Hãy thử gõ vào trường nhập liệu - bạn sẽ thấy lời chào được cập nhật theo từng phiên bản!

Kết luận

Và thế là bạn đã có một chuyến tham quan nhanh chóng về Vùng giá trị trong AngularJS! Chúng ta đã tìm hiểu về vùng giá trị là gì, cách chúng kế thừa từ nhau, và thậm chí đã lấn sâu vào một số khái niệm phức tạp hơn như phương thức vùng giá trị.

Nhớ rằng, vùng giá trị là chất keo kết dính ứng dụng AngularJS của bạn. Chúng là cách dữ liệu của bạn từ JavaScript chảy vào HTML, và cách tương tác của người dùng trong HTML có thể cập nhật JavaScript.

Khi bạn tiếp tục hành trình AngularJS của mình, bạn sẽ thấy mình làm việc với vùng giá trị rất nhiều. Nhưng đừng lo lắng - với sự luyện tập, nó sẽ trở thành bản năng thứ hai. Trước khi bạn biết, bạn sẽ trở thành một nghệ sĩ xiếc tài ba trong việc điều khiển vùng giá trị!

Tiếp tục lập mã, tiếp tục học tập, và quan trọng nhất, hãy vui vẻ! Thế giới AngularJS là rộng lớn và đầy thú vị, và bạn đã bắt đầu những bước đầu tiên vào nó. Hẹn gặp lại lần sau, chúc bạn lập mã vui vẻ!

Credits: Image by storyset