AngularJS 学习笔记 08：ngRoute 实现 SPA单页面开发
- 只有一个页面，链接使用锚点(哈希)
- 引入
angular-route.js路由模块 - 在子页定义控制器 ng-controller
- 使用 $rootScope 全局属性
<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)支持链式调用
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...
}])