本文详细介绍了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部分
<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='张三';
}],
});
}]);
<div>
我的名字是：{{name}}
</div> 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); //在页面点击链接时执行此函数实现传入参数的跳转
}
}]); <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];
}
}
}
}]);
<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>'
});
}]) <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',
}
}
});
}]); <div ng-app="la">
<div ng-view="top"></div> <!--加载默认路由中的view下的top内容-->
<div ng-view="left"></div>
<div ng-view="right"></div>
</div> <a href="" ui-sref="my">我的</a>
<a href="" ui-sref="video">视频</a> <!--点击视频时会跳转到第二个video路由规则--> <a href="">我的姓名</a>
<a href="">用户信息</a> <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部分时直接加载默认的路由即可
扫一扫
464
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
