angular-route.js
路由模块
<html ng-app="App">
<head>
<meta charset="UTF-8">
<title>{{title}}<title>
head>
<body>
<div>
<ul>
<li><a href="#home">homea>li>
<li><a href="#link">linka>li>
<li><a href="#about">abouta>li>
ul>
<div class="content">
<div ng-view>div>
div>
div>
<script src="angular.min.js">script>
<script src="angular-route.min.js">script>
<script src="app.js">script>
body>
<html>
$routeProvider.when('path', option)
支持链式调用 template
:模板templateUrl
:模板路径controller
:指定控制器redirectTo
:跳转到其他路由,更新$location path的值app.js
:
// 依赖于路由模块
var app = angular.module('App', ['ngRoute']);
// 配置路由
app.config(['$routeProvider', function($routeProvider) {
$routeProvider.when('/',{
templateUrl: './views/index.html'
controller: 'mainCtrl'
})
//根据位置传参
.when('/home/:name/:age',{
templateUrl: './views/home.html',
controller: 'homeCtrl'
})
.when('/like',{
templateUrl: './views/like.html',
controller: 'linkCtrl'
})
.when('/about',{
templateUrl: './views/about.html'
controller: 'about'
})
// 若无匹配时使用的路由定义
.otherwise({
template: '404
',
redirectTo: './views/404.html'
})
}])
// 定义控制器
app.controller('mainCtrl', ['$scope', '$rootScope', function($scope, $rootScope){
$rootScope.title='默认页';
// code...
}])
app.controller('homeCtrl', ['$scope', '$rootScope', '$routeParams', function($scope, $rootScope, $routeParams){
$rootScope.title='主页';
// 获取传参
$scope.user = $routeParams;
}])
app.controller('linkCtrl', ['$scope', $rootScope, function($scope, $rootScope){
$rootScope.title='联系';
// code...
}])
app.controller('aboutCtrl', ['$scope', '$rootScope', function($scope, $rootScope){
$rootScope.title='关于';
// code...
}])