<!doctype html>
<html lang="en" ng-app='myApp' >
<head>
<meta charset="UTF-8">
<title>路由一</title>
<script type="text/javascript" src="angular.min.js"></script>
<script type="text/javascript" src="angular-route.min.js"></script>
<script type="text/javascript">
//在子產品中的[]中引入ngRoute
var myApp = angular.module('myApp', ['ngRoute'])
//在配置中引入$routeProvider
myApp.config(['$routeProvider',function($routeProvider){
$routeProvider
//根據哈希值确定ng-view視圖的内容
//:num擷取傳遞過來的參數
.when('/aaa/:num',{
template : '<p>首頁的内容</p>`name`',
controller : 'one'
})
.when('/bbb',{
template : '<p>分頁一的内容</p>`name`',
controller : 'two'
.when('/ccc/:num',{
template : '<p>分頁二的内容</p>`name`',
controller : 'three'
//設定預設值
.otherwise({
redirectTo :'/aaa'
});
}]);
myApp.controller('one',['$scope','$location','$routeParams',function($scope,$location,$routeParams){
$scope.name='hello';
$scope.$location=$location;
//可以擷取傳遞過來的參數
console.log($routeParams);
}]);
myApp.controller('two',['$scope',function($scope){
$scope.name='hi';
//$scope.$location=$location;
myApp.controller('three',['$scope','$routeParams',function($scope,$routeParams){
$scope.name='你好';
</script>
</head>
<body ng-controller='one'>
<a href="" ng-click='$location.path("aaa/123")'>首頁</a>
<a href="" ng-click='$location.path("bbb")'>分頁一</a>
<a href="" ng-click='$location.path("ccc/333")'>分頁二</a>
<div ng-view></div>
</body>
</html>
<code><</code><code>br</code><code>></code>
本文轉自 沉迷學習中 51CTO部落格，原文連結：http://blog.51cto.com/12907581/1933205，如需轉載請自行聯系原作者
![主流浏覽器四大綜合性能測試[圖]](data:image/gif;base64,R0lGODlhAQABAIAAAP///wAAACwAAAAAAQABAAACAkQBADs=)