当前位置:   article > 正文

angular.js之ui.router篇_angularjs ui router

angularjs 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部分

  1. <div ng-view>您访问的页面不存在!</div> <!--加载默认的路由,当找不到默认路由的时候显示里面的内容-->
  2. <ul>
  3. <li><a href="" ui-sref="home">首页</a></li> <!--当点击这个链接的时候便会跳转到指定路由地址显示其内容-->
  4. <li><a href="" ui-sref="second">第二页</a></li>
  5. <li><a href="" ui-sref="three">第三页</a></li>
  6. </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部分
  1. <div>
  2. 我的名字是:{{name}}
  3. </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服务接收参数

  1. var m=angular.module('la',['ui.router']);
  2. m.config(['$stateProvider','$urlRouterProvider',function($stateProvider,$ulrRouterProvider){
  3. //默认路由
  4. $urlRouterProvider.otherwise('/home');
  5. //路由规则
  6. $stateProvider.state('home',{
  7. url:'/home',
  8. templateUrl:'1.html',
  9. controller:'ctrl',
  10. }).state('user',{
  11. url:'/user/{id}', //在链接中传递参数
  12. template:'<h1>用户详情{{user.name}}</h1>',
  13. controler:'ctrl',
  14. });
  15. }]);
  16. m.controller('ctrl',['$scope','$stateParams',function($scope,$stateParams){
  17. $scope.user=[
  18. {id:1,name:'张三'},
  19. {id:2,name:'李四'}
  20. ];
  21. id=$stateParams.id; //控制器中通过此服务获取参数
  22. if(id){ //只有在页面中点击a标签之后跳转路由才有此参数
  23. for(var i=0;i<$scope.user.length;i++){
  24. if(id==$scope.user[i].id){
  25. $scope.user=$scope.user[i];
  26. }
  27. }
  28. }
  29. }]);
    1.html部分,
  1. <li ng-repeat="v in user">
  2. <a href="" ui-sref="user({id:v.id})">{{v.name}}</a>
  3. </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部分
  1. <div ng-app="la">
  2. <div ng-view="top"></div> <!--加载默认路由中的view下的top内容-->
  3. <div ng-view="left"></div>
  4. <div ng-view="right"></div>
  5. </div>
         top.html示例
  1. <a href="" ui-sref="my">我的</a>
  2. <a href="" ui-sref="video">视频</a> <!--点击视频时会跳转到第二个video路由规则-->
         my.html
  1. <a href="">我的姓名</a>
  2. <a href="">用户信息</a>
         about.html
  1. <a href="">关于</a>
  2. <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部分时直接加载默认的路由即可微笑




声明:本文内容由网友自发贡献,转载请注明出处:【wpsshop博客】
推荐阅读
相关标签
  

闽ICP备14008679号