Ví dụ về Routing trong Angular – Sử dụng ngRoute và $routeProvider

Reading Time: 5 minutes

Hôm nay, chúng ta sẽ tìm hiểu về routing trong AngularJS (định tuyến trong AngularJS) thông qua module ngRoute và service $routeProvider.

Trước đó, chúng ta đã làm quen với khái niệm module và controller trong AngularJS. Trong bài viết này, chúng ta sẽ mở rộng ứng dụng Single Page (SPA – Single Page Application) với nhiều view và tuyến khác nhau.

Routing trong AngularJS là gì?

Routing là một trong những tính năng cốt lõi của AngularJS. Trong ví dụ này, chúng ta sẽ xây dựng một ứng dụng single page có nhiều lượt xem để minh họa cách thức hoạt động của tính năng định tuyến trong AngularJS.

Giới thiệu Module ngRoute

Module ngRoute của AngularJS cung cấp các dịch vụ định tuyến, liên kết sâu (deep linking) và các directive cho ứng dụng Angular. Để sử dụng tính năng định tuyến này, chúng ta cần tải script angular-route.js chứa module ngRoute từ trang web chính thức của AngularJS. Ngoài ra, chúng ta cũng có thể sử dụng liên kết CDN để nhúng trực tiếp vào ứng dụng.

Trong hướng dẫn này, chúng ta sẽ sử dụng Google CDN:

https://ajax.googleapis.com/ajax/libs/angularjs/1.2.28//angular-route.min.js.

Nếu bạn tích hợp tệp này trực tiếp vào ứng dụng thì có thể thêm nó vào trang bằng đoạn mã dưới đây.

<script src="angular-route.js">

Nếu bạn muốn nhúng từ Google CDN thì sử dụng đoạn mã dưới đây:

<script src="<https://ajax.googleapis.com/ajax/libs/angularjs/1.2.28//angular-route.min.js>"></script>

Sau đó, bạn cần khai báo ngRoute như một phụ thuộc của ứng dụng AngularJS như sau:

angular.module('appName', ['ngRoute']);

ngView

Directive ngView dùng để hiển thị các template HTML hoặc view tương ứng với route đã khai báo. Khi route thay đổi, nội dung trong ngView cũng sẽ được cập nhật theo cấu hình từ service $route.

$routeProvider

$routeProvider dùng để cấu hình route. Chúng ta sử dụng phương thức ngRoute config() để thiết lập $routeProvider. Phương thức config() nhận vào một hàm callback, trong đó có tham số là $routeProvider. Toàn bộ phần cấu hình định tuyến sẽ nằm bên trong hàm này.

API của $routeProvider rất đơn giản, chủ yếu gồm hai phương thức: when()và otherwise().

Cú pháp định tuyến trong AngularJS

Dưới đây là cú pháp dùng để cấu hình các tuyến đường trong AngularJS:

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

app.config(function($routeProvider) {
	$routeProvider
		.when('/view1', {
			templateUrl: 'view1.html',
			controller: 'FirstController'
		})
		.when('/view2', {
			templateUrl: 'view2.html',
			controller: 'SecondController'
		})
		.otherwise({
			redirectTo: '/view1'
		});
});

Phương thức when() nhận vào hai đối số là path và route. Trong đó:

1. path là phần nằm sau ký hiệu # trong URL.
2. route là một đối tượng bao gồm hai thuộc tính chính là templateUrl và controller.

• Thuộc tính templateUrl xác định template HTML mà AngularJS sẽ tải và hiển thị bên trong thẻ <div> có gắn directive ngView.
• Thuộc tính controller chỉ định controller nào sẽ được sử dụng cùng với template đó.

Sau khi tải ứng dụng, AngularJS sẽ so khớp path với phần URL nằm sau dấu #. Nếu không có đường dẫn định tuyến nào khớp với URL đã cho thì trình duyệt sẽ được chuyển hướng đến đường dẫn được chỉ định trong hàm otherwise().

Ví dụ thực tế: ứng dụng định tuyến đơn giản

Để hiểu rõ hơn về cách thức hoạt động của định tuyến trong AngularJS, chúng ta sẽ thực hiện một ví dụ đơn giản. Chúng ta sẽ bắt đầu bằng cách thiết lập một module và các route cần thiết. Tiếp theo, sẽ tạo các controller và xây dựng view. Cuối cùng, chúng ta sẽ tạo trang giao diện chính (shell page) cho ứng dụng để quản lý và hiển thị các view khác nhau.

Cấu hình Route và Controller

Các bước thực hiện gồm:

1. Định nghĩa một module có tên là mainApp và tải ngRoute làm module phụ thuộc
2. Cấu hình route bằng $routeProvider
3. Sử dụng hai path trong ví dụ: /home và /viewStudents
4. Chỉ dùng một controller duy nhất trong ví dụ này, đó là StudentController
5. StudentController được khởi tạo với một danh sách sinh viên và một thông điệp

Chúng ta sẽ hiển thị thông điệp ở trang chủ (home page), còn danh sách sinh viên sẽ được hiển thị ở trang /viewStudents

1. Lưu file này với tên main.js.

Dưới đây là nội dung cho file main.js:

var mainApp = angular.module("mainApp", ['ngRoute']);

mainApp.config(function($routeProvider) {
	$routeProvider
		.when('/home', {
			templateUrl: 'home.html',
			controller: 'StudentController'
		})
		.when('/viewStudents', {
			templateUrl: 'viewStudents.html',
			controller: 'StudentController'
		})
		.otherwise({
			redirectTo: '/home'
		});
});

mainApp.controller('StudentController', function($scope) {
	$scope.students = [
		{name: 'Mark Waugh', city:'New York'},
		{name: 'Steve Jonathan', city:'London'},
		{name: 'John Marcus', city:'Paris'}
	];

	$scope.message = "Click on the hyper link to view the students list.";
});

Ví dụ, nếu URL có dạng: https://www.journaldev.com/index.html#/home

• Nếu phần sau dấu # khớp với /home, ứng dụng sẽ tải trang home.html vào khu vực shell page.
• Nếu phần đó khớp với /viewStudents, ứng dụng sẽ tải viewStudents.html vào shell page.
• Nếu không có phần nào khớp với các route đã khai báo, ứng dụng sẽ chuyển hướng (redirect) về home.html theo cấu hình otherwise().

Bây giờ, chúng ta sẽ tạo các view và lưu dưới dạng các file home.html và viewStudents.html.

Tạo View trang chủ

<div class="container">
	<h2> Welcome </h2>
	<p>{{message}}</p>
	<a href="#/viewStudents"> View Students List</a>
</div>

Đây là trang mặc định của ứng dụng. Trong view này, chúng ta chỉ hiển thị thông điệp đã được khởi tạo sẵn trong StudentController với một liên kết đến trang viewStudents (file viewStudents.html).

Tạo View danh sách sinh viên

<div class="container">
	<h2> View Students </h2>
	Search:
	<br/>
		<input type="text" ng-model="name" />
	<br/>
	<ul>
		<li ng-repeat="student in students | filter:name">{{student.name}} , {{student.city}}</li>
	</ul>

	<a href="#/home"> Back</a>
</div>

Như đã thấy trong view trên, giao diện hiển thị danh sách sinh viên kèm theo ô tìm kiếm. Để hoàn thiện và triển khai ứng dụng định tuyến với AngularJS, bạn cần thực hiện các bước sau:

• ng-app: Tự động khởi tạo (auto-bootstrap) ứng dụng có tên mainApp.
• ngView: Đóng vai trò là vùng hiển thị động cho các view như home.html và viewStudents.html.
• Thư viện AngularJS: Nhúng hai file cần thiết là angular.min.js và angular-route.min.js.
• main.js: Bao gồm file JavaScript đã tạo ở các bước trước, nơi định nghĩa module, controller và cấu hình định tuyến.
• index.html: Lưu tệp dưới dạng index.html.

Tạo tệp HTML chính

<!DOCTYPE html>
<html>
	<head lang="en">
	  <meta charset="utf-8">
	  <title>AngularJS Routing</title>

	</head>
	<body>

	  <div ng-app="mainApp">
		<ng-view></ng-view>
	  </div>

	  <script type="text/javascript" src="<https://ajax.googleapis.com/ajax/libs/angularjs/1.2.28/angular.min.js>"></script>
	  <script type="text/javascript" src="<https://ajax.googleapis.com/ajax/libs/angularjs/1.2.28//angular-route.min.js>"></script>
	  <script type="text/javascript" src="main.js"></script>
	</body>
</html>

Vậy là chúng ta đã hoàn thành ví dụ về định tuyến trong AngularJS. Giờ là lúc chạy thử ứng dụng!

Chạy ứng dụng

1. Lưu tất cả các file (home.html, viewStudents.html, main.js, index.html) vào cùng một thư mục.
2. Mở file index.html từ trình duyệt.
3. Thử bản Demo trực tuyến.

Giờ thì bạn có thể thử nghiệm ứng dụng định tuyến AngularJS của mình và xem thử bản demo trực tuyến để tham khảo.