route
AngularJS 路由允许我们通过不同的 URL 访问不同的内容。
通过 AngularJS 可以实现多视图的单页Web应用（single page web application，SPA）。
通常我们的URL形式为 http://hairecord.com/first/page，但在单页Web应用中 AngularJS 通过 # + 标记 实现，例如：
http://hairecord.com/#/first http://hairecord.com/#/second http://hairecord.com/#/third
当我们点击以上的任意一个链接时，向服务端请的地址都是一样的 (http://hairecord.com/)。 因为 # 号之后的内容在向服务端请求时会被浏览器忽略掉。 所以我们就需要在客户端实现 # 号后面内容的功能实现。 AngularJS 路由 就通过 # + 标记 帮助我们区分不同的逻辑页面并将不同的页面绑定到对应的控制器上。
在route(路由)中，提供了两个依赖性服务：location、routeParams；location、routeParams均可在controller中使用，可通过routeParams获取路由时所传参数，可通过$location进行路由跳转。
讲解一下实例
1、载入了实现路由的 js 文件：angular-route.js。
2、包含了 ngRoute 模块作为主应用模块的依赖模块。
var app = angular.module('appModule',['ngRoute']);
3、使用 ngView 指令。
<div ng-view></div>
该 div 内的 HTML 内容会根据路由的变化而变化。
4、配置 routeProvider，AngularJSrouteProvider 用来定义路由规则。
app.config(function($routeProvider){
$routeProvider.when(.......).when(.....)
})
以下是数组模式的写法，为了是防止压缩转移
module.config(['routeProvider', function (routeProvider) {
$routeProvider.when('/', {template: '首页页面'}).when('/computers', {template: '分类页面'}).when('/printers', {template: '列表页面'}).otherwise({redirectTo: '/'});
}]);
AngularJS 模块的 config 函数用于配置路由规则。通过使用 configAPI，我们请求把routeProvider注入到我们的配置函数并且使用routeProvider.whenAPI来定义我们的路由规则。
$routeProvider 为我们提供了 when(path,object) & otherwise(object) 函数按顺序定义所有路由，函数包含两个参数:
- 第一个参数是 URL 或者 URL 正则规则。
第二个参数是路由配置对象。
5、在route(路由)中，提供了两个依赖性服务：location、routeParams；location、routeParams均可在controller中使用，如上otherDetailCtrl中，可通过routeParams获取路由时所传参数，可通过$location进行路由跳转。
<div ng-controller="ctrl">
<a href="#home">主页</a>
<a href="#list">列表</a>
<a href="#settings">设置</a>
<div ng-view></div>
</div>
<script src="../angular.js"></script>
<script type="text/javascript" src="../angular-route.js"></script>
<script>
var app = angular.module('appModule',['ngRoute']);
app.controller('ctrl', function (scope,location,routeParams) {scope.go = function(){
console.log(location)location.path('settings/10/manster')
}
});
app.config(function(routeProvider){//配置routeProvider，AngularJS routeProvider 用来定义路由规则。routeProvider.when('/home',{
template:'<div>这是主页</div><button ng-click="go()">go-settings</button>',
controller:'ctrl',
}).when('/list',{
template:'<div>这是列表</div>',
controller:function(scope,routeParams){
},
}).when('/settings',{
template:'<div>这是设置</div>',
controller:'ctrl',
}).when('/settings/:id/:name',{
template:'<div>设置{{id}}-{{name}}</div>',
controller:function(scope,routeParams){
console.log(routeParams)scope.id = routeParams.id;scope.name = $routeParams.name;
}
}).otherwise('/home')
})
ui-router
ui-router和route的不同之处
<span ui-sref="home">主页</span> <span ui-sref="user">用户</span> <div ui-view></div>
app.config(function(stateProvider,urlRouterProvider){ stateProvider.state('home',{ url:'/home', template:'<span ui-sref="home.video">视频</span>/<span ui-sref="home.audio">音频</span><div ui-view></div>', }).state('home.video',{ url:'/home/video', template:'<span>电视</span>/<span>电影</span>' }).state('home.audio',{ url:'home/audio', template:'<span>唱片</span>/<span>歌曲</span>' }).state('user',{ url:'/user', template:'<span ui-sref="user.u1">用户一</span>、<span ui-sref="user.u2">用户二</span> <div ui-view></div>' }).state('user.u1',{ url:'/user/u1', template:'<span>Manster</span>' }).state('user.u2',{ url:'/user/u2', template:'<span>Alex</span>' })urlRouterProvider.otherwise('home')
监听路由的变化，应该放到 run方法中，因为run方法是主方法，所以会默认执行，这样就能实时监听了，如果放在controller中，只要controller不执行就没用了
路由变化的时候默认会向上级发射事件，所以在$rootScope中用on捕获到就好了。
路由变化的时候默认会向上级发射事件，所以在$rootScope中用on捕获到就好了。
app.run(function(rootScope){ //监控路由变化rootScope.on('stateChangeStart',function(event,toState,toParams,fromState,fromParams){ }); //监听不存在的路由 rootScope.on('stateNotFound',function(event,toState,toParams,fromState,fromParams){ }); //切换出错rootScope.on('stateChangeError', function (event) { alert('没有此模板'); $state.go('user'); }); })
路由嵌套-多视图
<a ui-sref="home.user">子内容</a> <a ui-sref="home.profile">子内容</a> <div ui-view></div> <div ui-view="tmp1"></div>//指定名称 <div ui-view="tmp2"></div>
module.config(['routeProvider', function (routeProvider) { routeProvider.when('/', {template: '首页页面'}).when('/computers', {template: '分类页面'}).when('/printers', {template: '列表页面'}).otherwise({redirectTo: '/'}); }]); app.config(function(stateProvider,urlRouterProvider){stateProvider.state('home',{ url:'/home/:id', views:{ '':{//默认模板 templateUrl:'1.html', controller: function (scope,stateParams) { scope.id =stateParams.id//获得url中的参数 } }, 'tmp1@home':{ //名称@url template:'<div>tmpl1</div>' }, 'tmp2@home':{ template:'<div>tmpl2</div>' }, }, }) })
文章评论