- 標籤模式
- Hash URL， URL路徑會以#符號開頭。
- 與config函數中的$routeProvider進行配置。
<!--標籤模式-->
<div
class="pull-left">
<span><a href="#/">Default Route</a></span>
</div>
<div
class="pull-right">
<span
ng-hide="mainCtrl.userService.isLoggedIn">
<a href="#/login">Login</a>
</span>
<span
ng-show="mainCtrl.userService.isLoggedIn">
<!--
server-side route, not a client-side route -->
<a href="/api/logout">Logout</a>
</span>
</div>
<script type="text/javascript">
<script type="text/javascript">
angular.module('myApp',
['ngRoute'])
.config(function
($routeProvider) {
$routeProvider
.when('/',
{
templateUrl: 'views/home.html',
controller: 'HomeController'
})
.when('/login',
{
templateUrl: 'views/login.html',
controller: 'mainCtrl'
})
.when('/api/logout', {
templateUrl: 'views/logout.html',
controller: 'mainCtrl'
})
.otherwise({
redirectTo: '/'
});
});
</script>
- HTML5模式
- URL看起來與一般server side route無異。
- 啟用HTML5模式
- $locationProvider.html5Mode(true)
- index.html增加含有herf屬性的<base>標籤來告知瀏覽器相關URL的所在位置
- server side支援url重寫，並確保所有請求都返回index.html(nodejs)
<!--HTML5模式-->
<html>
<head>
<base herf="/app"
/>
<title>HTML5 Mode</title>
</head>
<body>
<script
type="text/javascript">
angular.module('myApp',
['ngRoute']).
config(['$locationProvider',
'$routeProvider', function
($locationProvider, $routeProvider) {
$locationProvider.html5Mode(true);
$routeProvider
.when('/',
{ //指到<base>設定的地方=>即為/app
templateUrl: 'views/home.html',
controller: 'HomeController'
})
.otherwise({
redirectTo: '/'
});
}]);
</script>
</body>
</html>
</body>
</html>
