1. Hashbang Mode
2. HTML Mode
===============
Hashbang Mode
這種模式是Angular用來做deep-link的手法以相容AngularApp. 在這種模式下,
所有的URL路徑都會被加上"#".而這種模式也是AngularJS預設的模式.
路徑看起就像下面這樣:
http://yoursite.com/#!/inbox/all
可以利用$locationProvider來設定前置字元以相容舊的browser
angular.module('myApp', ['ngRoute'])
.config(['$locationProvider', function($locationProvider) {
$locationProvider.html5Mode(false);
$locationProvider.hashPrefix('!');
}]);
================
HTML5 Mode
在這種模式下, URL就是一般的樣式
http://yoursite.com/inbox/all
且$location的服務會使用HTML5的 history API,所以允許我們的app使用一般的URL.
而假設browser不支援HTML history API, 那$location的服務會自動fallback到Hashbang Mode.
另外,在HTML5 mode下,若browser不支援history API, 那AngularJS會去覆寫掉在<a href"">中的連結網址.
比如說
//original code
<a href="/person/42?all=true">Person</a>
//被改寫
<a href="/index.html#!/person/42?all=true">Person</a>
但在這種情況下,server side必需支援URL重寫的功能,才能支援所有的browser.
要是server無法支援,那AngularJS將無法支援這種狀況. 但另一種可能的作法是在<Head>中加入
<base> tag, 並將預設的base路徑設定好.
<base href="/" />
那預設的網址就會指向 http://yoursite.com
1. 設定HTML5 mode開啟的方式1
$locationProvider.html5Mode(true);
但這會產生錯誤:
Error: error:nobase
$location in HTML5 mode requires a tag to be present!
解決方法有2種
1-1 將requireBase設為false, 但IE9以下會不相容.
$locationProvider.html5Mode({
enabled: true,
requireBase: false
});
2. 在<Head>中加入<base> tag
<base href="/" />
沒有留言:
張貼留言