angular.js之ui.router篇

AngularJS 路由可以通过不同的 URL 访问不同的内容，实现多视图页面的跳转。

在使用ui-router路由之前一定要先载入下面两个文件

 <script type="text/javascript" src="angular-ui-router.min.js"></script>
 <script type="text/javascript" src="jquery.min.js"></script>

1，路由使用分析，默认路由和路由规则

var m=angular.module('la',['ui.router']);//定义模块时依赖注入ui.router模块
	m.config(['$stateProvider','$urlRouterProvider',function($stateProvider,$urlRouterProvider){//注入两个路由服务
		//默认路由
		$urlRouterProvider.otherwise('/my');
		//路由规则
		$stateProvider.state('default',{	//default为路由规则名，ui-sref=""中用路由规则名，href中用路由地址
			url:'/my',			//路由的地址
			template:'<h1>这个美丽的世界</h1>'	//此路由下的内容，这里也可以用templateUrl载入一个内容文件
		}).state('home',{
			url:'/home',
			template:'<h1>首页</h1>'
		}).state('second',{
			url:'/second',
			tempalte:'<h1>第二页</h1>'
		}).state('three',{
			url:'/three',
			template:'<h1>第三页</h1>'
		});
	}]);

html部分

<div ng-view>您访问的页面不存在!</div>			<!--加载默认的路由，当找不到默认路由的时候显示里面的内容-->
<ul>
    <li><a href="" ui-sref="home">首页</a></li>		<!--当点击这个链接的时候便会跳转到指定路由地址显示其内容-->
    <li><a href="" ui-sref="second">第二页</a></li>
    <li><a href="" ui-sref="three">第三页</a></li> 
</ul>

2.路由中使用控制器的两种方式

    1）直接在路由规则中定义控制器模块

	var m=angular.module('la',['ui.router']);
	m.config(['$stateProvider','$urlRouterProvider',function($stateProvider,$ulrRouterProvider){
		//默认路由
		$urlRouterProvider.otherwise('');
		//路由规则
		$stateProvider.state('default',{
			url:'',
			templateUrl:'1.html',
			controller:['$scope',function($scope){	//路由中定义控制器
				$scope.name='张三';
			}],
		});
	}]);

      1.html部分

	<div>
		我的名字是：{{name}}
	</div>

      2）外部定义控制器，路由规则中调用

	var m=angular.module('la',['ui.router']);
	m.config(['$stateProvider','$urlRouterProvider',function($stateProvider,$ulrRouterProvider){
		//默认路由
		$urlRouterProvider.otherwise('');
		//路由规则
		$stateProvider.state('default',{
			url:'',
			templateUrl:'1.html',
			controller:'ctrl',		//调用外部定义的控制器
		});
	}]);
	m.controller('ctrl',['$scope',function(){
		$scope.name="张三";
	}]);

3.$state服务ui路由控制器中执行路由跳转 

	var m=angular.module('la',['ui.router']);
	m.config(['$stateProvider','$urlRouterProvider',function($stateProvider,$urlRouterProvider){
		//默认路由
		$urlRouterProvider.otherwise('/home');
		//路由规则
		$stateProvider.state('home',{
			url:'/home',
			templateUrl:'1.html',
		}).state('game',{
			url:'/game',
			template:'<h1>游戏</h1>'
		});
	m.controller('ctrl',['$scope','$state',function($scope,$state){
		$scope.go=function(url){
			$state.go(url);		//在页面点击链接时执行此函数实现传入参数的跳转
		}
	}]);

   html部分

   <div ng-view></div>
   <li>
	<a href="" ng-click="go('/game')">跳转</a>
   </li> 





4.路由参数的设置和$stateParams服务接收参数
	var m=angular.module('la',['ui.router']);
	m.config(['$stateProvider','$urlRouterProvider',function($stateProvider,$ulrRouterProvider){
		//默认路由
		$urlRouterProvider.otherwise('/home');
		//路由规则
		$stateProvider.state('home',{
			url:'/home',
			templateUrl:'1.html',
			controller:'ctrl',
		}).state('user',{
			url:'/user/{id}',		//在链接中传递参数
			template:'<h1>用户详情{{user.name}}</h1>',
			controler:'ctrl',
		});
	}]);
	m.controller('ctrl',['$scope','$stateParams',function($scope,$stateParams){
		$scope.user=[
			{id:1,name:'张三'},
			{id:2,name:'李四'}
		];
		
		id=$stateParams.id; 			//控制器中通过此服务获取参数
		
		if(id){					//只有在页面中点击a标签之后跳转路由才有此参数
			for(var i=0;i<$scope.user.length;i++){
				if(id==$scope.user[i].id){
					$scope.user=$scope.user[i];
				}
			}
		}
	}]);
     1.html部分，
	<li ng-repeat="v in user">  			
		<a href="" ui-sref="user({id:v.id})">{{v.name}}</a>
	</li>
	//遍历控制器中的数据，每一个超链接标签内容为数据名，当点击之后跳转到第二个路由，并且传递参数，在路由名之后带括号传递参数




5.uiRouter路由定义高效的父子级嵌套路由，嵌套跳转到子级路由时父级路由内容不消失

 两种方法：第一种在定义路由名时指明是父级路由名下的路由，第二种是在state属性对象里面指明其父级路由


	var m=angular.module('la',['ui.router']);
	m.config(['$stateProvider','$urlRouterProvider',function($stateProvider,$urlRouterProvider){
		//默认路由
		$urlRouterProvider.otherwise('/home');
		//路由规则
		$stateProvider.state('home',{
			url:'/home',
			templateUrl:'1.html',
		}).state('home.news',{			//定义路由规则名时指明其父级路由
			url:'news',
			template:'<h1>新闻</h1>',
		}).state('game',{
			url:'/game',
			parent:'home',			//属性里面指明其父级路由
			template:'<h1>游戏</h1>'
		}).state('login',{
			url:'/login',
			template:'<h1>登录</h1>'
		});
	}])
    1.html是其默认加载的父级路由内容，在父级路由内容中必须指明加载子级路由的地方
	<div ng-view></div>

6.通过view属性定义超灵活的嵌套路由,
	var m=angular.modlue('la',['ui.router']);
	m.config(['$stateProvider','$urlRouterProvider',function($stateProvider,$urlRouterProvider){
		//默认路由
		$urlRouterProvider.otherwise('/my');
		//路由规则
		$stateProvuder.state('my'{
			url:'/my',
			views:{			//view可以定义多个视图内容，在html的不同区块中加载
				top:{
					templateUrl:'view/top.html',
				},
				left:{
					templateUrl:'view/my.html',
				},
				right:{
					templateUrl:'view/about.html'
				}
			}
		}).state('video',{
			views:{
				top:{
					templateUrl:'view/top.html',
				},
				left:{
					templateUrl:'view/video.html',
				},
				right:{
					templateUrl:'view/about.html',
				}
			}
		});
	}]);
       html部分

        <div ng-app="la">
		<div ng-view="top"></div>	<!--加载默认路由中的view下的top内容-->
		<div ng-view="left"></div>
		<div ng-view="right"></div>	
	</div>
         top.html示例
	<a href="" ui-sref="my">我的</a>
	<a href="" ui-sref="video">视频</a>	<!--点击视频时会跳转到第二个video路由规则-->
         my.html

	<a href="">我的姓名</a>
	<a href="">用户信息</a>
         about.html
	<a href="">关于</a>
	<a href="">帮助</a>

7.ui.router路由view下的父子级嵌套

	var m=angular.module('la',['ui.router']);
	m.config(['$stateProvider','$urlRouterProvider',function($stateProvider,$urlRouterProvider){
		//默认路由
		$urlRouterProvider.otherwise('/my');
		//路由规则
		$stateProvider.state('my',{
			url:'/my',
			view:{
				'@':{
					templateUrl:'video/my.html',
				},
				'content':{
					template:'欢迎来到此'
				}
			}.state('my.video',{
				url:'/video',
				view:{
					'son@my':{
						templateUrl:'view/video.html',
					},
					'content@':{
						template:'',
					}
				}
			})
		})
	}])



注：当为指明具体的html部分时直接加载默认的路由即可