<!--
路由設置對象
AngularJS 路由也可以通過不同的模板來實現。
$routeProvider.when 函數的第一個參數是 URL 或者 URL 正則規則，第二個參數爲路由配置對象。
路由配置對象語法規則如下：
$routeProvider.when(url, {
template: string,
templateUrl: string,
controller: string, function 或 array,
controllerAs: string,
redirectTo: string, function,
resolve: object<key, function>
});
參數說明：
template:
如果我們只需要在 ng-view 中插入簡單的 HTML 內容，則使用該參數：
.when('/computers',{template:'這是電腦分類頁面'})
templateUrl:
如果我們只需要在 ng-view 中插入 HTML 模板文件，則使用該參數：
$routeProvider.when('/computers', {
templateUrl: 'views/computers.html',
});
以上代碼會從服務端獲取 views/computers.html 文件內容插入到 ng-view 中。
controller:
function、string或數組類型，在當前模板上執行的controller函數，生成新的scope。
controllerAs:
string類型，爲controller指定別名。
redirectTo:
重定向的地址。
resolve:
指定當前controller所依賴的其他模塊。
-->
<html>
<head>
<meta http-equiv="content-type" content="text/html; charset=UTF-8">
<script src="https://cdn.bootcss.com/angular.js/1.4.6/angular.min.js"></script>
<script src="https://apps.bdimg.com/libs/angular-route/1.3.13/angular-route.js"></script>
<script type="text/javascript">
angular.module('ngRouteExample', ['ngRoute'])
.controller('HomeController', function ($scope, $route) { $scope.$route = $route;})
.controller('AboutController', function ($scope, $route) { $scope.$route = $route;})
.config(function ($routeProvider) {
$routeProvider.
when('/home', {
templateUrl: 'embedded.home.html',
controller: 'HomeController'
}).
when('/about', {
templateUrl: 'embedded.about.html',
controller: 'AboutController'
}).
otherwise({
redirectTo: '/home'
});
});
</script>
</head>
<body ng-app="ngRouteExample" class="ng-scope">
<script type="text/ng-template" id="embedded.home.html">
<h1> Home </h1>
</script>
<script type="text/ng-template" id="embedded.about.html">
<h1> About </h1>
</script>
<div>
<div id="navigation">
<a href="#/home">Home</a>
<a href="#/about">About</a>
</div>
<div ng-view="">
</div>
</div>
</body>
</html>33-路由設置對象
發表評論
所有評論
還沒有人評論，想成為第一個評論的人麼? 請在上方評論欄輸入並且點擊發布.
相關文章