這篇文章主要介紹“Angular.JS怎么去掉訪問路徑URL中的#號”，在日常操作中，相信很多人在Angular.JS怎么去掉訪問路徑URL中的#號問題上存在疑惑，小編查閱了各式資料，整理出簡單好用的操作方法，希望對大家解答”Angular.JS怎么去掉訪問路徑URL中的#號”的疑惑有所幫助！接下來，請跟著小編一起來學習吧！

成都創(chuàng)新互聯(lián)公司專業(yè)IDC數(shù)據(jù)服務器托管提供商，專業(yè)提供成都服務器托管，服務器租用，德陽服務器托管，德陽服務器托管，成都多線服務器托管等服務器托管服務。

本文目錄

• URL的#號問題

• 找到錯誤原因

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

• 動態(tài)網(wǎng)站的解決方案

一、 URL的#號問題

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

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

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

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

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

通過設置$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

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

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

二、找到錯誤原因

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

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

分2種情況看：

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

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

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

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

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

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

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

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

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

      app.js : 對應ng-app的控制文件

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

編輯 index.html，增加base標簽。

 
 
// 省略代碼

編輯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)站就搞定了，沒有麻煩的#號了，可以直接訪問和任意頁面的刷新。

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

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

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

      app.js : 對應ng-app的控制文件

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

index.html 和 app.js兩個文件修改，同靜態(tài)網(wǎng)站的解決方案。動態(tài)網(wǎng)站，一般不是通過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');
 }
});

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

到此，關(guān)于“Angular.JS怎么去掉訪問路徑URL中的#號”的學習就結(jié)束了，希望能夠解決大家的疑惑。理論與實踐的搭配能更好的幫助大家學習，快去試試吧！若想繼續(xù)學習更多相關(guān)知識，請繼續(xù)關(guān)注創(chuàng)新互聯(lián)網(wǎng)站，小編會繼續(xù)努力為大家?guī)砀鄬嵱玫奈恼拢?/p>
名稱欄目：Angular.JS怎么去掉訪問路徑URL中的#號
文章位置：http://weahome.cn/article/iehiei.html