使用AngularJS的朋友應該知道，AngularJS框架定義了自己的前端路由控制器，通過不同的URL實現了ng-app對ng-view的部署和刷新，支持HTML5的歷史功能。詳情請參考文章AngularJS路由和模板。
默認情況下，HTML5模式是不啟用的，URL會包含壹個#號來區分AngularJS管理的路徑和WebServer管理的路徑。
比如下面帶#的URL就是AngularJS管理的路徑。
這種體驗其實不太友好，尤其是對於我這種喜歡簡約設計的人。#的出現不是我自己的意願，所以有多難受。AngularJS框架提供了HTML5模式下的路由，可以直接去掉#號。
只需設置$ location provider . html 5 mode(true)。
book.config(['$routeProvider '，' $locationProvider '，function ($routeProvider，$locationProvider) {
//..省略代碼
$ location provider . html 5 mode(true)；
}]);
支持HTML5的路由URL。
就是這個問題困擾我很久了，所以我要用帶#的URL。
第二，找到錯誤的原因
那麽，這個問題的原因在哪裏呢？路徑解析有錯誤。
讓我從頭說起。AngularJS是壹個單頁面應用，壹個ng-app對應壹個頁面和壹個URL。AngularJS實現了自己的前端路由，這樣壹個ng-app可以管理多個URL，然後對應多個ng-vew。當我們訪問URL(/book)時，如何確定這個路徑是後臺的WebServer管理的還是前臺的AngularJS管理的？
從兩個方面來看:
1.如果用戶先訪問主頁()，然後跳轉到頁面(/book)，跳轉的是AngularJS管理的URL，訪問正常。
2.當用戶直接訪問壹個頁面(/book)時，請求首先提交到WebServer後臺，後臺沒有對應頁面(/book)的路由管理，所以會出現404錯誤。
如果能理解這壹層，技術上解決起來會非常容易。我們可以通過要求WebServer將AngularJS管理的所有路由URL轉發給ng-app來解決404的問題。同時沒有#號，還支持HTML5的歷史查詢！！
實施可分為兩種解決方案:
1.靜態網站:純前臺網站(JS+HTML+CSS)，通過Nginx提供web服務。
2.動態網站:前臺(JS+HTML+CSS)+後臺Node.js提供web服務。
三、靜態網站的解決方案
我們需要修改的靜態網站包括三個文件。
index . html:NG-APP的定義文件。
app . js:ng-app對應的控制文件。
Nginx.conf: nginx的網站配置文件。
編輯index.html並添加基本標簽。
& lthtml lang = " zh-CN " ng-app = " book " & gt；
& lthead & gt
& ltbase href = "/" rel = " external no follow " >
//省略代碼
& lt/head & gt；
編輯app.js，添加$ location provider . html 5 mode(true)；
book.config(['$routeProvider '，' $locationProvider '，' $sceProvider '，' tplProvider '，function ($routeProvider，$locationProvider，$sceProvider，tplProvider) {
$routeProvider
。when('/'，{ template URL:TPL provider . html(' welcome ')，controller: 'WelcomeCtrl'})
。當('/book '，{模板URL:tplprovider.html(' book ')，控制器:' bookctrl'})//book。
。當('/book-r1 ')，{模板URL:tplprovider.html(' book-r 1 ')，控制器:' bookr1ctrl'})/r的極客理想。
。when ('/video ')，{模板URL:tplprovider.html(' video ')，控制器:' videoctrl'})//video。
。when ('/about '，{ template URL:tplprovider.html(' About ')，controller:' About ctrl ' })//關於作者。
。否則({ redirecto:'/' })；
$ location provider . html 5 mode(true)；
}]);
編輯nginx的配置文件，並添加try_files配置。
服務器{
set＄htdocs/www/deploy/my site/on book；
聽80；
server _ name onbook.me
位置/ {
root $ htdocs
try _ files $ uri $ uri//index . html = 404；
}
}
這樣靜態網站就做好了，沒有麻煩的號，可以直接訪問刷新任意頁面。
第四，動態網站的解決方案
我們還需要修改的動態網站包括三個文件。
index . html:NG-APP的定義文件。
app . js:ng-app對應的控制文件。
server . js:express框架的路由訪問控制文件。
修改Index.html和app.js，和靜態網站的解決方案壹樣。壹般來說，動態網站不會直接通過Nginx進行路由，而是通過Web服務器進行管理。假設我們使用Node.js的Express的Web框架
打開Express framework的路由訪問控制文件server.js，增加路由配置。
app.use(function (req，res) {
console . log(req . path)；
if(req . path . index of('/API ')& gt；=0){
res.send("服務器文本")；
}else{ //angular啟動頁面
RES . sendfile(' app/index . html ')；
}
});
設置當站內路徑(req.path)不包含/api時，將轉發給AngularJS的ng-app(index.html)。所以我們直接訪問地址(/book)時，/book不包含/api，會直接轉發給AngularJS進行路由管理。我們實現了路由的優化！