url 中存在#號
第六講的時候我說過了，angular是通過瀏覽器地址欄的url（http://www.xxx.com/#/index) 號后面的部分#/index來確定當前用戶訪問的是哪個頁面，然后根據(jù)這個URL對視圖(ng-view)完成更新尿贫；并支持HTML5的歷史記錄功能拍柒。
- angular的地址欄是什么樣子钞螟？
http://www.xxx.com/
http://www.xxx.com/#/login
http://www.xxx.com/#/index
http://www.xxx.com/#/regsiter
- 這跟我們平常見到的鏈接不一樣（如http://www.xxx.com/admin/login）勤众， 這樣就區(qū)分了這個路由是由angular管理的還是由webserver管理的论寨。
總有強迫癥患者想要去掉這個 # 號赖临，那么angular可以去掉這個#號嗎胞锰？ 當然可以！＞ふァＰ衢拧！
- angular 提供了一個 HTML5模式吵聪，啟動這個路由模式就可以去掉路由中的 # 號 （即在配置路由時凌那，注入 $locationProvider 服務，路由配置中加入如下代碼 $locationProvider.html5Mode(true);）
var appH5 = angular.module('appH5', ['ngRoute']);
// 配置路由
appH5.config(['$routeProvider','$locationProvider',function($routeProvider,$locationProvider) {
$routeProvider.otherwise({redirectTo: '/index'});
$routeProvider
.when('/index', {
templateUrl: "views/index.html",
controller:'indexCtrl'
})
.when('/regsiter', {
templateUrl: "views/regsiter.html",
controller:'regsiterCtrl'
})
.when('/message/:msgid', {
templateUrl: "views/message.html",
controller:'messageCtrl'
});
$locationProvider.html5Mode(true);//啟用html5模式
}])
- 做完以上的操作吟逝，我們就可以優(yōu)雅的訪問URL了???
嘗試了之后發(fā)現(xiàn)帽蝶，當我們直接打開 http://www.xxx.com/ 路由中配置默認重置到 /index $routeProvider.otherwise({redirectTo: '/index'});；沒有問題澎办，我們在頁面中點擊鏈接和通過$location.path()跳轉(zhuǎn)也沒有問題嘲碱，但是當我們直接在地址欄輸入 http://www.xxx.com/index; 然后你會看見下邊的情況
問題原因
剛剛說過，http://www.xxx.com/#/regsiter 和 http://www.xxx.com/admin/login這兩個url用 # 區(qū)分了是angular還是webserver管理的url局蚀，當我們直接訪問 http://www.xxx.com/login 沒有#號 麦锯，這個時候 webserver就嘗試去解析，發(fā)現(xiàn)找不到對應的url琅绅，這個時候自然就拋出 404扶欣。
找到問題，既然問題出在webserver解析不了千扶，那我們何不把webserver解析不了的url都轉(zhuǎn)發(fā)到angular應用里面料祠？這不就皆大歡喜了
解決辦法 本人開發(fā)用的服務器是 nginx+js+html+css 前后端分離的方式
1、修改SPA主入口 index.html（加入<base href="/">）
<!doctype html>
<html ng-app="appH5">
<head>
<base href="/">
</head>
<body >
</body>
</html>
2澎羞、開啟html5模式
var appH5 = angular.module('appH5', ['ngRoute']);
// 配置路由
appH5.config(['$routeProvider','$locationProvider',function($routeProvider,$locationProvider) {
$routeProvider.otherwise({redirectTo: '/index'});
$routeProvider
.when('/index', {
templateUrl: "views/index.html",
controller:'indexCtrl'
})
.when('/regsiter', {
templateUrl: "views/regsiter.html",
controller:'regsiterCtrl'
})
.when('/message/:msgid', {
templateUrl: "views/message.html",
controller:'messageCtrl'
});
$locationProvider.html5Mode(true);//啟用html5模式
}])
- 配置nginx服務器（nginx-1.11.0/conf/nginx.conf）
server {
listen 8088;
server_name localhost;
#charset koi8-r;
#access_log logs/host.access.log main;
location / {
root C:\Git\app\router_demo;
try_files $uri $uri/ /index.html =404;
}
}
其他服務器（本人不用這些服務器髓绽，未經(jīng)過驗證，只做參考）
Apache的設置【.htaccess的寫法】
RewriteEngine On
# If an existing asset or directory is requested go to it as it is
RewriteCond %{DOCUMENT_ROOT}%{REQUEST_URI} -f [OR]
RewriteCond %{DOCUMENT_ROOT}%{REQUEST_URI} -d
RewriteRule ^ – [L]
# If the requested pattern is file and file doesn’t exist, send 404
RewriteCond %{REQUEST_URI} ^(/[a-z_-s0-9.]+)+.[a-zA-Z]{2,4}$
RewriteRule ^ – [L,R=404]
# otherwise use history router
RewriteRule ^ /index.html
