Hướng dẫn αρχή cho người mới về AngularJS - Xem (Views)

Xin chào các bạn lập trình viên tương lai! Hôm nay, chúng ta sẽ cùng lặn vào thế giới thú vị của AngularJS Views. Đừng lo lắng nếu bạn chưa bao giờ viết một dòng mã trước đây - tôi sẽ là người hướng dẫn thân thiện cho bạn trong hành trình này, cũ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. Vậy, hãy lấy một tách cà phê (hoặc trà, nếu bạn thích), và chúng ta cùng bắt đầu!

AngularJS - Views

Views là gì trong AngularJS?

Trước khi chúng ta đi vào chi tiết, hãy hiểu Views là gì trong AngularJS. Hãy tưởng tượng Views như là "mặt" của ứng dụng của bạn - đó là những gì người dùng thấy và tương tác. Trong AngularJS, Views cơ bản là các mẫu HTML hiển thị dữ liệu và phản hồi với các hành động của người dùng.

Bây giờ, hãy khám phá các công cụ AngularJS cung cấp cho chúng ta để làm việc với Views.

Chỉ thị ng-view: Cửa sổ của nội dung động

ng-view là gì?

Chỉ thị ng-view giống như một cửa sổ đặc biệt trong ứng dụng AngularJS của bạn. Đây là nơi ứng dụng của bạn hiển thị nội dung khác nhau dựa trên route (hoặc URL) hiện tại mà không cần tải lại toàn bộ trang. Đúng là tuyệt vời phải không?

Cách sử dụng ng-view

Sử dụng ng-view rất đơn giản, chỉ cần thêm nó vào một phần tử trong HTML. Dưới đây là một ví dụ:

<div ng-view></div>

Đó là tất cả! Phần tử này bây giờ sẽ hoạt động như một容器 nơi AngularJS sẽ tải các view khác nhau dựa trên route hiện tại.

Ví dụ thực tế

Hãy tưởng tượng chúng ta đang xây dựng một trang web đơn giản cho một hiệu sách. Chúng ta có thể có một trang chính trông như thế này:

<!DOCTYPE html>
<html ng-app="bookstoreApp">
<head>
<title>Hiệu sách Awesomeness của tôi</title>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.8.2/angular.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.8.2/angular-route.js"></script>
</head>
<body>
<h1>Xin chào đến Hiệu sách Awesomeness của tôi</h1>
<div ng-view></div>
<script src="app.js"></script>
</body>
</html>

Trong ví dụ này, <div ng-view></div> sẽ là nơi hiển thị các trang khác nhau của hiệu sách của chúng ta (như danh sách sách, chi tiết sách cá nhân, v.v.).

Chỉ thị ng-template:Blueprint cho Views

ng-template là gì?

Nếu ng-view là cửa sổ, thì ng-template giống như bản vẽ cho những gì sẽ đi vào cửa sổ đó. Nó cho phép bạn xác định các mẫu có thể tái sử dụng mà AngularJS có thể sử dụng để điền vào các view của bạn.

Cách sử dụng ng-template

Bạn sử dụng ng-template bằng cách cho nó một ID, mà bạn có thể tham chiếu trong cấu hình route của mình. Dưới đây là một ví dụ đơn giản:

<script type="text/ng-template" id="book-list.html">
<h2>Sách của chúng tôi</h2>
<ul>
<li ng-repeat="book in books">{{book.title}}</li>
</ul>
</script>

Mẫu này xác định một danh sách sách mà chúng ta có thể hiển thị trong view của mình.

Dịch vụ $routeProvider: Điều khiển lưu lượng giao thông cho ứng dụng

$routeProvider là gì?

Dịch vụ $routeProvider giống như một điều khiển lưu lượng giao thông cho ứng dụng của bạn. Nó quyết định view nào sẽ hiển thị dựa trên URL hiện tại.

Cách sử dụng $routeProvider

Bạn thường cấu hình $routeProvider trong giai đoạn cấu hình của ứng dụng. Dưới đây là một ví dụ:

var app = angular.module('bookstoreApp', ['ngRoute']);

app.config(function($routeProvider) {
$routeProvider
.when('/', {
template: '<h2>Xin chào đến hiệu sách của chúng tôi!</h2>'
})
.when('/books', {
templateUrl: 'book-list.html',
controller: 'BookListController'
})
.otherwise({
redirectTo: '/'
});
});

Trong cấu hình này:

Khi URL chỉ là '/', nó hiển thị một thông báo chào mừng.
Khi URL là '/books', nó sử dụng mẫu 'book-list.html' và bộ điều khiển 'BookListController'.
Đối với bất kỳ URL nào khác, nó chuyển hướng về '/'.

Ví dụ hoàn chỉnh

Hãy kết hợp tất cả lại với nhau trong một ví dụ hoàn chỉnh hơn về ứng dụng hiệu sách của chúng ta:

<!DOCTYPE html>
<html ng-app="bookstoreApp">
<head>
<title>Hiệu sách Awesomeness của tôi</title>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.8.2/angular.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.8.2/angular-route.js"></script>
</head>
<body>
<h1>Xin chào đến Hiệu sách Awesomeness của tôi</h1>
<nav>
<a href="#!">Trang chủ</a>
<a href="#!books">Sách</a>
</nav>
<div ng-view></div>

<script type="text/ng-template" id="book-list.html">
<h2>Sách của chúng tôi</h2>
<ul>
<li ng-repeat="book in books">{{book.title}} của {{book.author}}</li>
</ul>
</script>

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

app.config(function($routeProvider) {
$routeProvider
.when('/', {
template: '<h2>Xin chào đến hiệu sách của chúng tôi!</h2><p>Kiểm tra bộ sưu tập sách tuyệt vời của chúng tôi.</p>'
})
.when('/books', {
templateUrl: 'book-list.html',
controller: 'BookListController'
})
.otherwise({
redirectTo: '/'
});
});

app.controller('BookListController', function($scope) {
$scope.books = [
{title: 'To Kill a Mockingbird', author: 'Harper Lee'},
{title: '1984', author: 'George Orwell'},
{title: 'The Great Gatsby', author: 'F. Scott Fitzgerald'}
];
});
</script>
</body>
</html>

Điều gì đang xảy ra ở đây?

Chúng ta thiết lập một cấu trúc HTML cơ bản với các liên kết để điều hướng giữa các view.
Chúng ta xác định một mẫu cho danh sách sách sử dụng ng-template.
Chúng ta cấu hình các route sử dụng $routeProvider.
Chúng ta tạo một bộ điều khiển để cung cấp dữ liệu cho danh sách sách.

Khi bạn chạy ứng dụng này và nhấp vào liên kết "Sách", bạn sẽ thấy danh sách sách xuất hiện trong phần tử ng-view. Đúng là kỳ diệu phải không?

Kết luận

Và thế là bạn đã có nó, các bạn! Chúng ta đã迈出第一步进入 AngularJS Views. Chúng ta đã học về ng-view, ng-template, và $routeProvider, và cách chúng cùng nhau tạo ra các ứng dụng single-page động.

Nhớ rằng, học lập trình giống như học骑自行车 - ban đầu có thể trông cứng nhắc, nhưng với sự练习, bạn sẽ nhanh chóng chạy nhanh. Hãy tiếp tục thử nghiệm, tiếp tục học hỏi, và quan trọng nhất, hãy vui vẻ!

Chỉ thị/Dịch vụ	Mục đích	Ví dụ sử dụng
ng-view	Xác định nơi hiển thị view hiện tại	`<div ng-view></div>`
ng-template	Xác định mẫu có thể tái sử dụng	`<script type="text/ng-template" id="template-name.html">...</script>`
$routeProvider	Cấu hình route cho ứng dụng	`$routeProvider.when('/path', { templateUrl: 'template.html', controller: 'ControllerName' });`

Chúc các bạn lập trình vui vẻ, các master AngularJS tương lai!

Credits: Image by storyset