angular路由——ui.route
angular路由
###使用案例 ``` 首页游戏 ``` `time.html` ```
金刚葫芦娃
```路由控制器使用
- 注：不需要在html中定义控制器
var app = angular.module("myApp", [\'ui.router\']);
app.config([\'$stateProvider\',\'$urlRouterProvider\',function($stateProvider,$urlRouterProvider){
//默认路由，与下面定义的路由匹配
$urlRouterProvider.otherwise(\'/lol\');
//路由定义规则
$stateProvider
.state(\'lol\', {
url:\'/lol\',
templateUrl: \'time.html\',
controller: [\'$scope\',function($scope){ //直接在内部写控制器
}]
})
.state(\'dota\', {
url:\'/dota\',
template: \'<h1>王者荣耀</h1>\',
controller: \'ctrl\' //引入外部控制器
})
app.controller("ctrl", [\'$scope\', function($scope){
}]);
$state服务
- 实现路由中转
- 判断用户是否登录，若未登录，则跳转到登录页面
app.controller("ctrl", [\'$scope\',\'$state\', function($scope,$state){
$scope.go = function(url){ //这里的方法随便命名
$state.go(url); //$state的go方法实现跳转，这个方法必须是go方法
}
time.html
<button ng-click="go(\'dota\')">跳转</button> <!-- 这里的方法随便命名,点击后跳转到指定路由，不要加‘/ ’-->
$stateParams
- 在dota路由处加上{id}，显示数据id
- 模板处加上
ui-sref="dota({id:v.id})，实现 跳转到dota路由，并显示id
var app = angular.module("myApp", [\'ui.router\']);
app.config([\'$stateProvider\',\'$urlRouterProvider\',function($stateProvider,$urlRouterProvider){
//默认路由，与下面定义的路由匹配
$urlRouterProvider.otherwise(\'/lol\');
//路由定义规则
$stateProvider
.state(\'lol\', {
url:\'/lol\',
templateUrl: \'time.html\',
controller: [\'$scope\',function($scope){ //直接在内部写控制器
}]
})
.state(\'dota\', {
url:\'/dota{id}\', //要加上{id}，才会显示id
template: \'<h1>王者荣耀</h1>\',
controller: \'ctrl\' //引入外部控制器
})
app.controller("ctrl", [\'$scope\',\'$stateParams\', function($scope,$stateParams){
$scope.data = [
{id:1,name:"刘恺威",title:"王鸥"},
{id:2,name:"飞刀又见飞刀",title:"李元芳"}
];
var id = $stateParams.id;
if(id){
for(var i=0;i<$scope.data.length;i++){
if(id==$scope.data[i].id){
$scope.name=$scope.data[i].name;
}
}
}
}]);
time.html
<ul ng-repeat="v in data">
<li><a href="" ui-sref="dota({id:v.id})">{{v.name}}</a></li> <!-- 跳转到dota路由，并显示id -->
</ul>
<p>{{name}}</p>
父子嵌套路由
- 将父级路由模板内加入
<div ui-view></div>，子级模板内容会在父级模板中显示，最后一起通过父级路由加载到首页的<div ui-view></div> - 写法一
lol.dota,父级下的路由 - 写法二
parent:lol,指定该路由的父级
<!DOCTYPE html>
<html >
<head>
<meta charset="UTF-8">
<title>test</title>
</head>
<body ng-app="myApp">
<a href="" ui-sref="lol">首页</a> <!-- ui-serf的值对应state的第一个参数 -->
<a href="" ui-sref="lol.dota">游戏</a> <!-- ui-serf的值对应state的url参数 -->
<a href="" ui-sref="youku">视频</a>
<div ui-view></div> <!-- 首页的<div ui-view></div> -->
<script src="angular.min.js"></script>
<script src="jquery-3.1.1.min.js"></script>
<script src="http://cdn.bootcss.com/angular-ui-router/1.0.0-beta.3/angular-ui-router.min.js"></script>
<script>
var app = angular.module("myApp", [\'ui.router\']);
app.config([\'$stateProvider\',\'$urlRouterProvider\',function($stateProvider,$urlRouterProvider){
//默认路由，与下面定义的路由匹配
$urlRouterProvider.otherwise(\'/lol\');
//路由定义规则
$stateProvider
.state(\'lol\', {
url:\'/lol\',
templateUrl: \'time.html\',
})
.state(\'lol.dota\', { //父级下的路由写法
url:\'/lol.dota\',
template: \'<h1>王者荣耀</h1>\',
})
.state(\'youku\', {
url:\'/youku\',
template: \'<h1>黑海夺金</h1>\',
parent:\'lol\' //指定该路由的父级
})
}])
</script>
</body>
</html>
time.html
<h1>金刚葫芦娃{{name}}</h1>
<div ui-view></div> <!-- 将父级路由模板内加入<div ui-view></div>，子级模板内容会在父级模板中显示 -->
ui.route视图概念——ui-view
- 本案例效果为T字型网页，点击左侧导航栏，改变右侧显示
- views里写
ui-view对应的视图 - 左侧模板，可以点击跳转到不同路由，从而改变右侧视图显示
<!DOCTYPE html>
<html >
<head>
<meta charset="UTF-8">
<title>test</title>
<style>
div[ui-view="left"]{background-color: #ccc; float:left;}
div[ui-view="right"]{}
</style>
</head>
<body ng-app="myApp">
<div ui-view="top"></div>
<div ui-view="left"></div>
<div ui-view="right"></div>
<script src="angular.min.js"></script>
<script src="jquery-3.1.1.min.js"></script>
<script src="http://cdn.bootcss.com/angular-ui-router/1.0.0-beta.3/angular-ui-router.min.js"></script>
<script>
var app = angular.module("myApp", [\'ui.router\']);
app.config([\'$stateProvider\',\'$urlRouterProvider\',function($stateProvider,$urlRouterProvider){
//默认路由，与下面定义的路由匹配
$urlRouterProvider.otherwise(\'/my\');
//路由定义规则
$stateProvider
.state(\'my\', {
url:\'/my\',
views: { //显示ui-view中的视图
top:{templateUrl: \'time.html\'},
left:{templateUrl: \'left.html\'},
right:{templateUrl: \'right.html\'}
}
})
.state(\'game\', {
url:\'/game\',
views: {
top:{templateUrl: \'time.html\'},
left:{templateUrl: \'left.html\'},
right:{templateUrl: \'game.html\'}
}
})
}])
</script>
</body>
</html>
time.html
<h1>童年</h1>
left.html
<div><a href="#/my">动画</a></div> <!-- 点击切换到不同的路由 -->
<div><a href="" ui-sref="game">游戏</a></div>
right.html
<h1>金刚葫芦娃</h1>
game.html
<h1>超级玛丽</h1>
