CyStack logo
  • Sản phẩm & Dịch vụ
  • Giải pháp
  • Bảng giá
  • Công ty
  • Tài liệu
Vi

vi

Mục lục

Trang chủBlogVí dụ về Routing trong An...
Chuyên gia

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

5 phút đọc31/07/2025
CyStack Author
Chris Pham

Technical Writer

0 lượt xem
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 Angular

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.

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ẻ
    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ủ


	
 Welcome 

	
{{message}}

	 View Students List

Đâ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


	
 View Students 

	Search:
	

		
	

	
    
		
  • {{student.name}} , {{student.city}}
    • 
	


	 Back

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



	
	  
	  AngularJS Routing

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.

Về tác giả

Chris Pham
Chris PhamTechnical Writer

I have over 5 years of experience writing technical documentation for tech products, making them accessible and user-friendly. My focus is always on providing clear and precise information. @#@ Tôi đã có hơn 5 năm kinh nghiệm viết tài liệu kỹ thuật cho các sản phẩm công nghệ, giúp người dùng dễ dàng tiếp cận và sử dụng. Tôi luôn tập trung vào việc cung cấp thông tin chính xác và dễ hiểu.

Cập nhật thông tin mới nhấtNhận các thông tin mới nhất về mối đe dọa, báo cáo an ninh mạng từ CyStack về hòm thư điện tử của bạn

Thảo luận (0)

Đăng nhập để thảo luận

Bài viết liên quan