Mặc định, AngularJS sẽ điều hướng ứng dụng phía client sử dụng 1 thẻ hash
# hoặc #!
Nó có dạng như thế này:
- http://example.com/
- http://example.com/#/about
- http://example.com/#/contact
Rõ ràng trông như thế thì không được đẹp và có cảm giác không thân thiện với người dùng. Và chúng ta mong muốn xóa bỏ thẻ hash
# này đi, và trông nó xinh xắn như thế này.- http://example.com/
- http://example.com/about
- http://example.com/contact
Để làm được việc như vậy, thì có 2 việc bạn cần làm đó là:
- Cấu hình
$locationProvider - Chỉ định URL mặc định cơ sở, bằng cách sử dụng thẻ
<base>
Chú ý: URL mặc định ở bước 2 là một chỉ dẫn để AngularJS lấy làm cơ sở cho các đường link tương đối khác hoạt động đúng như mong đợi. Thẻ
<base> chỉ được sử dụng một lần trong tài liệu HTML và PHẢI nằm trong thẻ <head>
$location Service
Trong AngularJS,
$location service sẽ tự động thu thập các thông tin về địa chỉ URL của trình duyệt tại thời điểm hiện tại, nó sẽ phục vụ cho mục đích điều hướng của ứng dụng.
Bạn hãy tìm hiểu thêm về Service này tại đây, để xem nó cung cấp những gì cho bạn sử dụng 
AngularJS $location
AngularJS $locationCấu hình $locationProvider
Chúng ta cần phải cấu hình
locationProvider để bất chế độ html5Mode cho phép chúng ta loại bỏ được thẻ hash (đây là mode cho phép sử dụng HTML5 History API của trình duyệt).
Như vậy, đoạn cấu hình điều hướng ứng dụng AngularJS được cài đặt như sau:
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
| angular.module('myApp', []) .config(function($routeProvider, $locationProvider) { $routeProvider .when('/', { templateUrl : 'partials/home.html', controller : mainController }) .when('/about', { templateUrl : 'partials/about.html', controller : mainController }) .when('/contact', { templateUrl : 'partials/contact.html', controller : mainController }) .otherwise({ templateUrl : 'partials/404.html' }); // use the HTML5 History API $locationProvider.html5Mode(true); }); |
Chú ý: HTML5 History API là một chuẩn để thao tác với lịch sử duyệt Web của Trình duyệt. Điều này cho phép AngularJS thay đổi URL của trang web SPA mà không phải Refresh lại trang. Các bạn có thể tìm hiểu thêm về bài hướng dẫn tại HTML5 History API
Chỉ định URL cơ sở
Để cho các liên kết tương đối trong ứng dụng hoạt động được, bạn cần chỉ định URL cơ sở bằng cách sử dụng thẻ
<base> trong thẻ <head> của tài liệu HTML.
1
2
3
4
5
6
7
| <!doctype html><html><head> <meta charset="utf-8"> <base href="/"></head> |
Một lần nữa, sau khi xóa bỏ thẻ hash xong ứng dụng của bạn giờ đây đã trông thân thiện hơn dựa trên AngularJS. Chúc bạn thành công!
Vấn đề có thể xảy ra, liên quan đến Server
Đến đây thì bạn đã có thể tùy biến thẻ
base là / hoặc theo một domain các ứng dụng con, ví dụ <base href="/app1"> hoặc <base href="/app2">
Nhưng có thể có 1 số vấn đề hoặc lỗi sau đây xảy ra, đó là: Người dùng nhập trực tiếp đường link ứng dụng, hoặc refresh lại trang Web, ví dụ:
http://example.com/about thì sẽ nhận được một thông báo lỗi 404 Not Found. Vì sao vậy ? Bạn có nhận thấy vấn đề không ?
Đó là do với đường link đó, khi trình duyệt gửi yêu cầu thì Server không hiểu và không tìm được resource
/about, và quyết định trả về mã lỗi 404. Ứng dụng của chúng ta đã thiết kế điều hướng ở phía client bởi AngularJS rồi, thế nên khi không tìm được Resource thì Server nên trả về trang mặc định, ví dụ: index.html và để AngularJS quyết định việc hiển thị.
Ví dụ cấu hình sử dụng: Nginx
1
2
3
4
5
| location / { root /my_angular_app/dist; try_files $uri $uri/ /index.html =404; add_header Access-Control-Allow-Origin *;} |
Ví dụ cấu hình sử dụng: Sails.js
1
2
3
4
5
| module.exports.routes = { '/*': { view: 'index' }}; |
Ví dụ cấu hình sử dụng: Express.js
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
| var express = require("express");var path = require("path");var app = express();// Provide all routes here, this is for Home page.app.get("/*", function(req, res) { res.sendFile(path.join(__dirname+'/index.html'));});// Listen to this Portapp.listen(3000, function() { console.log("Live at Port 3000");}); |
