快捷導(dǎo)航

Angular.JS去掉訪問路徑URL中的#號詳解

更新時(shí)間：2017年03月30日 11:57:11 作者：Conan

最近天天都在用AngularJS，各類文檔也都看過好幾遍，但總是些編程上的事找不到優(yōu)雅的解決辦法。今天終于把AngularJS的項(xiàng)目訪問路徑URL里的#號去掉了，這個(gè)問題不見得有多難，關(guān)鍵是花多長時(shí)間去理解AngularJS框架本身，下面來看看詳細(xì)介紹，需要的朋友可以參考下。

本文目錄

URL的#號問題
找到錯(cuò)誤原因
靜態(tài)網(wǎng)站的解決方案
動(dòng)態(tài)網(wǎng)站的解決方案

一、 URL的#號問題

使用AngularJS的朋友都應(yīng)該了解，AngularJS框架定義了自己的前端路由控制器，通過不同URL實(shí)現(xiàn)單面(ng-app)對視圖(ng-view)的部署刷新，并支持HTML5的歷史記錄功能，詳細(xì)介紹可以參考文章：AngularJS路由和模板。

對于默認(rèn)的情況，是不啟動(dòng)HTML5模式的，URL中會(huì)包括一個(gè)#號，用來區(qū)別是AngularJS管理的路徑還是WebServer管理的路徑。

比如：下面的帶#號的URL，是AngularJS管理的路徑。

http://onbook.me/
http://onbook.me/#/
http://onbook.me/#/book
http://onbook.me/#/about

這種體驗(yàn)其實(shí)是不太友好的，特別是像我這種喜歡簡潔設(shè)計(jì)的人，#號的出現(xiàn)非我自愿的，怎么看怎么難受。AngularJS框架提供了一種HTML5模式的路由，可以直接去掉#號。

通過設(shè)置$locationProvider.html5Mode(true)就行了。

book.config(['$routeProvider', '$locationProvider', function ($routeProvider, $locationProvider) {

 //..省略代碼
 $locationProvider.html5Mode(true);
}]);

支持HTML5的路由URL。

http://onbook.me/
http://onbook.me/book
http://onbook.me/about

接下來的問題就來了，當(dāng)用這種方式設(shè)置了路徑以后。如果用戶從首頁(http://onbook.me/)開始訪問，然后跳轉(zhuǎn)到圖書頁(http://onbook.me/book)一切正常。但如果用戶直接打開圖書頁(http://onbook.me/book) ，就會(huì)出現(xiàn)404錯(cuò)誤。

就是這個(gè)問題糾結(jié)了我好長時(shí)間，讓我不得不用帶#號的URL。

二、找到錯(cuò)誤原因

那么，這個(gè)問題的原因出在哪里了呢？在路徑解析上出錯(cuò)了。

讓我從頭說起，AngularJS是單頁應(yīng)用，一個(gè)ng-app對應(yīng)一個(gè)頁面，一個(gè)URL。AngularJS實(shí)現(xiàn)了自己的前端路由，讓一個(gè)ng-app可以管理多個(gè)URL，再對應(yīng)到多個(gè)ng-vew上面。當(dāng)我們?nèi)ピL問URL(http://onbook.me/book) 的時(shí)候，怎么確定這個(gè)路徑是 WebServer 后臺(tái)管理的URL還是AngularJS前臺(tái)管理的URL呢？

分2種情況看：

1. 用戶如果是先訪問首頁(http://onbook.me)，然后再跳轉(zhuǎn)到頁面(http://onbook.me/book)，則這個(gè)跳轉(zhuǎn)是由AngularJS前臺(tái)管理的URL，訪問是正常的。

2. 用戶直接訪問頁面(http://onbook.me/book)時(shí)，請求是先被提交到了WebServer后臺(tái)，后臺(tái)路由沒有對應(yīng)頁面(http://onbook.me/book)的路由管理，就會(huì)出現(xiàn)404的錯(cuò)誤。

如果能把這層想明白，技術(shù)上就非常容易解決了。我們讓W(xué)ebServer把屬于AngularJS管理的路由URL，都發(fā)轉(zhuǎn)到ng-app就可以解決404的問題了，同時(shí)，沒有#號，還支持HTML5的歷史記錄查詢??！

實(shí)現(xiàn)起來分為2種解決方案：

1. 靜態(tài)網(wǎng)站：純前臺(tái)網(wǎng)站(JS+HTML+CSS)，通過Nginx提供Web服務(wù)。

2. 動(dòng)態(tài)網(wǎng)站：前臺(tái)(JS + HTML + CSS) + 后臺(tái)Node.js提供Web服務(wù)。

三、靜態(tài)網(wǎng)站的解決方案

靜態(tài)網(wǎng)站，我們需要修改的地方包括3個(gè)文件

index.html : ng-app的定義文件

app.js : 對應(yīng)ng-app的控制文件

nginx.conf : nginx的網(wǎng)站配置文件

編輯 index.html，增加base標(biāo)簽。

<html lang="zh-CN" ng-app="book">
<head>
 <base href="/" rel="external nofollow" >
 
// 省略代碼
</head>

編輯app.js，增加 $locationProvider.html5Mode(true);

book.config(['$routeProvider', '$locationProvider', '$sceProvider', 'tplProvider', function ($routeProvider, $locationProvider, $sceProvider, tplProvider) {
 $routeProvider
 .when('/', {templateUrl: tplProvider.html('welcome'), controller: 'WelcomeCtrl'})
 .when('/book', {templateUrl: tplProvider.html('book'), controller: 'BookCtrl'}) //圖書
 .when('/book-r1', {templateUrl: tplProvider.html('book-r1'), controller: 'BookR1Ctrl'}) //R的極客理想
 .when('/video', {templateUrl: tplProvider.html('video'), controller: 'VideoCtrl'}) //視頻
 .when('/about', {templateUrl: tplProvider.html('about'), controller: 'AboutCtrl'}) //關(guān)于作者
 .otherwise({redirectTo: '/'});
 $locationProvider.html5Mode(true);
}]);

編輯nginx的配置文件，增加try_files配置。

server {
 set $htdocs /www/deploy/mysite/onbook;
 listen 80;
 server_name onbook.me;
 location / {
 root $htdocs;
 try_files $uri $uri/ /index.html =404;
 }
}

這樣，靜態(tài)網(wǎng)站就搞定了，沒有麻煩的#號了，可以直接訪問和任意頁面的刷新。

四、動(dòng)態(tài)網(wǎng)站的解決方案

動(dòng)態(tài)網(wǎng)站，我們同樣需要修改的地方包括3個(gè)文件。

index.html : ng-app的定義文件

app.js : 對應(yīng)ng-app的控制文件

server.js : Express框架的路由訪問控制文件

index.html 和 app.js兩個(gè)文件修改，同靜態(tài)網(wǎng)站的解決方案。動(dòng)態(tài)網(wǎng)站，一般不是通過Nginx直接路由，而是通過Web服務(wù)器管理路由。假設(shè)我們使用的是Node.js的Express的Web框架。

打開Express框架的路由訪問控制文件server.js，增加路由配置。

app.use(function (req, res) {
 console.log(req.path);
 if(req.path.indexOf('/api')>=0){
 res.send("server text");

 }else{ //angular啟動(dòng)頁
 res.sendfile('app/index.html');
 }
});

設(shè)置當(dāng) 站內(nèi)路徑(req.path) 不包括 /api 時(shí)，都轉(zhuǎn)發(fā)到 AngularJS的ng-app(index.html)。所以，我們再直接訪問地址 (http://onbook.me/book)時(shí)，/book 不包括 /api，就會(huì)被直接轉(zhuǎn)發(fā)到AngularJS進(jìn)行路由管理。我們就實(shí)現(xiàn)了路由的優(yōu)化！

總結(jié)

以上就是這篇文章的全部內(nèi)容了，希望本文的內(nèi)容對大家的學(xué)習(xí)或者工作能帶來一定的幫助，如果有疑問大家可以留言交流，謝謝大家對腳本之家的支持。

您可能感興趣的文章: