AngularJS - Các mô-đun

Xin chào, các nhà lập trình tương lai! Hôm nay, chúng ta sẽ khám phá thế giới của các mô-đun AngularJS. Đừng lo lắng nếu bạn mới bắt đầu lập trình; tôi sẽ hướng dẫn bạn từng bước, giống như tôi đã làm cho hàng trăm sinh viên trong những năm dạy học của mình. Hãy cùng nhau bắt đầu hành trình thú vị này!

AngularJS - Modules

Các mô-đun AngularJS là gì?

Hãy tưởng tượng bạn đang xây dựng một cấu trúc Lego khổng lồ. Thay vì cố gắng xây dựng tất cả cùng một lúc, bạn có lẽ sẽ tạo ra những mảnh nhỏ hơn, dễ quản lý hơn để sau này kết hợp lại. Đó chính xác là điều mà các mô-đun trong AngularJS làm!

Các mô-đun trong AngularJS là các容器 chứa các phần khác nhau của ứng dụng của bạn. Chúng giúp bạn tổ chức mã của mình, làm cho nó dễ bảo trì và hiểu hơn. Hãy tưởng tượng chúng như những hộp được dán nhãn cẩn thận để lưu trữ các chức năng khác nhau của ứng dụng của bạn.

Mô-đun ứng dụng

Mô-đun ứng dụng giống như hộp chính chứa tất cả các hộp khác. Đây là nơi ứng dụng AngularJS của bạn bắt đầu. Hãy tạo mô-đun ứng dụng đầu tiên của chúng ta:

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

Dưới đây là những gì đang diễn ra trong dòng này:

angular.module() là một hàm tạo ra một mô-đun mới.
'myApp' là tên chúng ta đặt cho mô-đun của mình.
Mảng trống [] là nơi chúng ta sẽ liệt kê bất kỳ phụ thuộc nào mà mô-đun của chúng ta có thể có (chúng ta sẽ đến phần này sau).

Mô-đun controller

Bây giờ chúng ta đã có hộp chính (mô-đun ứng dụng), hãy thêm một số hộp nhỏ hơn bên trong. Một trong số đó là mô-đun controller. Các controller trong AngularJS quản lý dữ liệu của ứng dụng bạn. Dưới đây là cách bạn có thể tạo một controller:

myApp.controller('MyController', function($scope) {
$scope.message = "Hello, AngularJS!";
});

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

myApp.controller() thêm một controller mới vào mô-đun myApp.
'MyController' là tên chúng ta đặt cho controller này.
Hàm định nghĩa điều mà controller này làm.
$scope là một đối tượng đặc biệt cho phép controller giao tiếp với view (HTML).

Sử dụng các mô-đun

Bây giờ chúng ta đã tạo ra các mô-đun của mình, làm thế nào để chúng ta thực sự sử dụng chúng? Đó là đơn giản hơn bạn nghĩ! Bạn chỉ cần tham chiếu chúng trong HTML của mình. Dưới đây là cách:

<!DOCTYPE html>
<html ng-app="myApp">
<head>
<title>My AngularJS App</title>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.8.2/angular.min.js"></script>
</head>
<body ng-controller="MyController">
<h1>{{message}}</h1>
<script src="app.js"></script>
</body>
</html>

Chú ý một vài điểm quan trọng ở đây:

ng-app="myApp"告诉 AngularJS rằng đây là nơi ứng dụng của chúng ta tồn tại.
ng-controller="MyController" áp dụng controller của chúng ta cho phần body.
{{message}} sẽ hiển thị thông điệp chúng ta đã xác định trong controller.

Ví dụ

Hãy kết hợp tất cả với nhau trong một ví dụ phức tạp hơn một chút. Chúng ta sẽ tạo một ứng dụng danh sách việc cần làm đơn giản:

// app.js
var todoApp = angular.module('todoApp', []);

todoApp.controller('TodoController', function($scope) {
$scope.todos = [
{text: 'Learn AngularJS', done: false},
{text: 'Build an app', done: false}
];

$scope.addTodo = function() {
$scope.todos.push({text: $scope.newTodo, done: false});
$scope.newTodo = '';
};
});

Và đây là HTML tương ứng:

<!DOCTYPE html>
<html ng-app="todoApp">
<head>
<title>Todo List</title>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.8.2/angular.min.js"></script>
</head>
<body ng-controller="TodoController">
<h2>Todo List</h2>
<ul>
<li ng-repeat="todo in todos">
<input type="checkbox" ng-model="todo.done">
<span ng-class="{'done': todo.done}">{{todo.text}}</span>
</li>
</ul>
<form ng-submit="addTodo()">
<input type="text" ng-model="newTodo" placeholder="Add a new todo">
<input type="submit" value="Add">
</form>
<script src="app.js"></script>
</body>
</html>

Kết quả

Khi bạn chạy mã này, bạn sẽ thấy một ứng dụng danh sách việc cần làm đơn giản. Bạn có thể thêm các việc mới và đánh dấu chúng khi hoàn thành. Ma thuật xảy ra thông qua sự tương tác giữa các mô-đun của chúng ta (định nghĩa trong app.js) và HTML của chúng ta.

Kết luận

Và thế là bạn đã có! Chúng ta đã cùng nhau hành trình qua thế giới của các mô-đun AngularJS, từ khái niệm cơ bản đến một ứng dụng danh sách việc cần làm hoạt động. Nhớ rằng, các mô-đun giống như các mảnh Lego - chúng giúp bạn xây dựng các cấu trúc phức tạp từng mảnh một. Khi bạn tiếp tục hành trình AngularJS của mình, bạn sẽ khám phá ra nhiều cách hơn để sử dụng các mô-đun để tạo ra các ứng dụng web mạnh mẽ và hiệu quả.

Tiếp tục thực hành, hãy tò mò, và quan trọng nhất, hãy vui vẻ khi lập trình! Ai biết được, ứng dụng cách mạng tiếp theo có thể chỉ nằm trong tầm tay của bạn!

Phương pháp	Mô tả
angular.module()	Tạo một mô-đun mới
module.controller()	Thêm một controller mới vào mô-đun
ng-app	Chỉ thị để tự động khởi động một ứng dụng AngularJS
ng-controller	Chỉ thị để chỉ định một controller
ng-repeat	Chỉ thị để lặp một tập hợp HTML elements
ng-model	Chỉ thị để liên kết một input với một biến
ng-submit	Chỉ thị để chỉ định hành vi submit cho một form
ng-class	Chỉ thị để đặt các class CSS một cách động

Credits: Image by storyset