本文目錄
一、 URL的#號問題
使用AngularJS的朋友都應該了解，AngularJS框架定義了自己的前端路由控制器，通過不同URL實現單面(ng-app)對視圖(ng-view)的部署刷新，并支持HTML5的歷史記錄功能，詳細介紹可以參考文章：AngularJS路由和模板。
對于默認的情況，是不啟動HTML5模式的，URL中會包括一個#號，用來區別是AngularJS管理的路徑還是WebServer管理的路徑。
比如：下面的帶#號的URL，是AngularJS管理的路徑。
http://onbook.me/http://onbook.me/#/http://onbook.me/#/bookhttp://onbook.me/#/about
這種體驗其實是不太友好的，特別是像我這種喜歡簡潔設計的人，#號的出現非我自愿的，怎么看怎么難受。AngularJS框架提供了一種HTML5模式的路由，可以直接去掉#號。
通過設置$locationProvider.html5Mode(true)就行了。
book.config(['$routeProvider', '$locationProvider', function ($routeProvider, $locationProvider) { //..省略代碼 $locationProvider.html5Mode(true);}]);支持HTML5的路由URL。
http://onbook.me/http://onbook.me/bookhttp://onbook.me/about
接下來的問題就來了，當用這種方式設置了路徑以后。如果用戶從首頁(http://onbook.me/)開始訪問，然后跳轉到 圖書頁(http://onbook.me/book)一切正常。但如果用戶直接打開 圖書頁(http://onbook.me/book) ，就會出現404錯誤。
就是這個問題糾結了我好長時間，讓我不得不用帶#號的URL。
二、找到錯誤原因
那么，這個問題的原因出在哪里了呢？ 在路徑解析上出錯了。
讓我從頭說起，AngularJS是單頁應用，一個ng-app對應一個頁面，一個URL。AngularJS實現了自己的前端路由，讓一個ng-app可以管理多個URL，再對應到多個ng-vew上面。當我們去訪問URL(http://onbook.me/book) 的時候，怎么確定這個路徑是 WebServer 后臺管理的URL還是AngularJS前臺管理的URL呢？
分2種情況看：
1. 用戶如果是先訪問 首頁(http://onbook.me)，然后再跳轉到 頁面(http://onbook.me/book)，則這個跳轉是由AngularJS前臺管理的URL，訪問是正常的。
2. 用戶直接訪問 頁面(http://onbook.me/book)時，請求是先被提交到了WebServer后臺，后臺路由沒有對應頁面(http://onbook.me/book)的路由管理，就會出現404的錯誤。
如果能把這層想明白，技術上就非常容易解決了。我們讓WebServer把屬于AngularJS管理的路由URL，都發轉到ng-app就可以解決404的問題了，同時，沒有#號，還支持HTML5的歷史記錄查詢！！
實現起來分為2種解決方案：
1. 靜態網站：純前臺網站(JS+HTML+CSS)，通過Nginx提供Web服務。
2. 動態網站：前臺(JS + HTML + CSS) + 后臺Node.js提供Web服務。
三、靜態網站的解決方案
靜態網站，我們需要修改的地方包括3個文件
index.html : ng-app的定義文件
app.js : 對應ng-app的控制文件
nginx.conf : nginx的網站配置文件
編輯 index.html，增加base標簽。
<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'}) //關于作者 .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; }}這樣，靜態網站就搞定了，沒有麻煩的#號了，可以直接訪問和任意頁面的刷新。
四、動態網站的解決方案
動態網站，我們同樣需要修改的地方包括3個文件。
index.html : ng-app的定義文件
app.js : 對應ng-app的控制文件
server.js : Express框架的路由訪問控制文件
index.html 和 app.js兩個文件修改，同靜態網站的解決方案。動態網站，一般不是通過Nginx直接路由，而是通過Web服務器管理路由。假設我們使用的是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啟動頁 res.sendfile('app/index.html'); }});設置當 站內路徑(req.path) 不包括 /api 時，都轉發到 AngularJS的ng-app(index.html)。所以，我們再直接訪問地址 (http://onbook.me/book)時，/book 不包括 /api，就會被直接轉發到AngularJS進行路由管理。我們就實現了路由的優化！
總結
以上就是這篇文章的全部內容了，希望本文的內容對大家的學習或者工作能帶來一定的幫助，如果有疑問大家可以留言交流，謝謝大家對武林網的支持。
新聞熱點
疑難解答
