欧美bbbwbbbw肥妇,免费乱码人妻系列日韩,一级黄片

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

 更新時間：2017年03月30日 11:57:11   作者：Conan  
最近天天都在用AngularJS，各類文檔也都看過好幾遍，但總是些編程上的事找不到優(yōu)雅的解決辦法。今天終于把AngularJS的項目訪問路徑URL里的#號去掉了，這個問題不見得有多難，關鍵是花多長時間去理解AngularJS框架本身，下面來看看詳細介紹，需要的朋友可以參考下。

本文目錄

  • 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/)開始訪問，然后跳轉到 圖書頁(http://onbook.me/book)一切正常。但如果用戶直接打開 圖書頁(http://onbook.me/book) ，就會出現(xiàn)404錯誤。

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

二、找到錯誤原因

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

讓我從頭說起，AngularJS是單頁應用，一個ng-app對應一個頁面，一個URL。AngularJS實現(xiàn)了自己的前端路由，讓一個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)的路由管理，就會出現(xiàn)404的錯誤。

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

實現(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標簽。

<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;
 }
}

這樣，靜態(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');
 }
});

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

總結

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

相關文章

最新評論