AngularJS - Controllers: A Beginner's Guide
Xin chào các bạn đang học lập trình web! Hôm nay, chúng ta sẽ cùng khám phá thế giới thú vị của AngularJS Controllers. Đừ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 bạn thân thiện dẫn đường cho bạn trong hành trình này, giải thích mọi thứ từng bước một. Vậy, hãy lấy một tách cà phê, và chúng ta cùng bắt đầu nhé!
Controllers là gì trong AngularJS?
Trước khi chúng ta nhảy vào mã code, hãy hiểu qua về controllers trong AngularJS. Hãy tưởng tượng controllers như là não của ứng dụng của bạn. Chúng chịu trách nhiệm quản lý dữ liệu và hành vi của trang web của bạn. Cũng giống như cách một người điều khiển giao thông quản lý luồng xe cộ, controllers trong AngularJS quản lý luồng dữ liệu trong ứng dụng của bạn.
Vai trò của Controllers
Controllers trong AngularJS phục vụ nhiều mục đích quan trọng:
- Chúng khởi tạo dữ liệu của đối tượng
$scope. - Chúng thêm hành vi vào đối tượng
$scope. - Chúng đóng vai trò cầu nối giữa giao diện (đ điều người dùng thấy) và mô hình (dữ liệu).
Bây giờ, hãy xem cách chúng ta có thể tạo và sử dụng controllers trong AngularJS.
Controller đầu tiên của bạn trong AngularJS
Hãy bắt đầu với một ví dụ đơn giản để làm quen.
<!DOCTYPE html>
<html ng-app="myApp">
<head>
<title>My First AngularJS Controller</title>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.8.2/angular.min.js"></script>
</head>
<body>
<div ng-controller="MyFirstController">
<h2>{{ greeting }}</h2>
</div>
<script>
var app = angular.module('myApp', []);
app.controller('MyFirstController', function($scope) {
$scope.greeting = "Hello, AngularJS!";
});
</script>
</body>
</html>Giải thích:
- Chúng ta định nghĩa một ứng dụng AngularJS bằng cách sử dụng
ng-app="myApp". - Chúng ta tạo một controller tên là
MyFirstControllerbằng cách sử dụngng-controller. - Trong JavaScript, chúng ta định nghĩa controller và đặt một thuộc tính
greetingtrên$scope. - Trong HTML, chúng ta sử dụng
{{ greeting }}để hiển thị giá trị củagreeting.
Khi bạn chạy đoạn mã này, bạn sẽ thấy "Hello, AngularJS!" hiển thị trên trang. Thật thú vị phải không?
Thêm hành vi vào Controllers
Controllers không chỉ để hiển thị dữ liệu; chúng còn có thể thêm hành vi vào ứng dụng của bạn. Hãy tạo một ví dụ tương tác hơn:
<!DOCTYPE html>
<html ng-app="myApp">
<head>
<title>Interactive AngularJS Controller</title>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.8.2/angular.min.js"></script>
</head>
<body>
<div ng-controller="CounterController">
<h2>Count: {{ count }}</h2>
<button ng-click="increment()">Tăng</button>
<button ng-click="decrement()">Giảm</button>
</div>
<script>
var app = angular.module('myApp', []);
app.controller('CounterController', function($scope) {
$scope.count = 0;
$scope.increment = function() {
$scope.count++;
};
$scope.decrement = function() {
$scope.count--;
};
});
</script>
</body>
</html>Trong ví dụ này:
- Chúng ta tạo một
CounterControllerkhởi tạo một biếncountbằng 0. - Chúng ta định nghĩa hai hàm:
increment()vàdecrement(). - Chúng ta sử dụng
ng-clickđể liên kết các hàm này với các nút nhấn.
Bây giờ, khi bạn nhấp vào nút "Tăng", số đếm tăng lên, và khi bạn nhấp vào "Giảm", nó giảm xuống. Đó như thể bạn có một máy tính nhỏ trong trang web của mình!
Làm việc với Forms
Controllers rất hữu ích khi làm việc với forms. Hãy tạo một form đơn giản chào hỏi người dùng:
<!DOCTYPE html>
<html ng-app="myApp">
<head>
<title>AngularJS Form Controller</title>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.8.2/angular.min.js"></script>
</head>
<body>
<div ng-controller="GreetingController">
<form ng-submit="greet()">
<input type="text" ng-model="name" placeholder="Enter your name">
<button type="submit">Chào tôi!</button>
</form>
<h2>{{ greeting }}</h2>
</div>
<script>
var app = angular.module('myApp', []);
app.controller('GreetingController', function($scope) {
$scope.name = '';
$scope.greeting = '';
$scope.greet = function() {
if ($scope.name) {
$scope.greeting = 'Hello, ' + $scope.name + '!';
} else {
$scope.greeting = 'Please enter a name.';
}
};
});
</script>
</body>
</html>Tại đây, đang xảy ra điều gì:
- Chúng ta sử dụng
ng-model="name"để liên kết trường nhập với thuộc tínhnametrong controller. - Hàm
greet()được gọi khi form được gửi. - Nếu có tên được nhập, chúng ta tạo một lời chào cá nhân. Nếu không, chúng ta yêu cầu nhập tên.
Ví dụ này cho thấy controllers có thể xử lý đầu vào của người dùng và cập nhật giao diện tương ứng.
Phương thức trong Controllers
Hãy tóm tắt các phương thức chính chúng ta đã sử dụng trong controllers:
| Phương thức | Mô tả |
|---|---|
$scope.variableName |
Sử dụng để định nghĩa các biến có thể truy cập trong giao diện |
$scope.functionName = function() {...} |
Sử dụng để định nghĩa các hàm có thể gọi từ giao diện |
ng-click="functionName()" |
Sử dụng trong HTML để gọi một hàm khi một phần tử được nhấp |
ng-model="variableName" |
Sử dụng để liên kết một trường nhập với một biến trong controller |
ng-submit="functionName()" |
Sử dụng để gọi một hàm khi một form được gửi |
Kết luận
Chúc mừng! Bạn đã chính thức bước vào thế giới của AngularJS Controllers. Chúng ta đã bao gồm các khái niệm cơ bản về việc tạo controllers, thêm hành vi và làm việc với forms. Nhớ rằng, thực hành là cách tốt nhất để thành thạo, vì vậy đừng ngại thử nghiệm với các khái niệm này.
Trong những năm dạy học của tôi, tôi đã phát hiện ra rằng cách tốt nhất để học là làm. Vậy, đây là một thử thách vui cho bạn: hãy thử tạo một ứng dụng danh sách công việc đơn giản sử dụng những gì bạn đã học về controllers. Bắt đầu bằng cách thêm các mục, sau đó thử implement các tính năng như đánh dấu các mục là hoàn thành hoặc xóa chúng.
Trong hành trình tiếp tục của bạn với AngularJS, bạn sẽ khám phá rằng controllers chỉ là phần nổi của tảng băng. Có rất nhiều điều để khám phá, từ services đến directives và hơn thế nữa. Nhưng hiện tại, hãy tự награ thưởng cho mình - bạn đã đi đúng hướng để trở thành một chuyên gia AngularJS!
Chúc bạn lập trình vui vẻ, và nhớ rằng: trong thế giới lập trình, mỗi lỗi là một cơ hội để học hỏi điều mới!
Credits: Image by storyset