angulr ui-router路由
angularJS里面的ngRoute并不能满足我们的开发需求
因为angular的ng-view在写多个的情况下，不能控制内容的显示，渲染出来的内容都是一样的。
所以用第三方插件ui-router
ui-router
- 由第三方编写的路由模块，相比之前的ngRoute更加灵活多变
- 网址： http://angular-ui.github.io/
- 可以在页面挖多个坑,填不同的内容
- ui-rotuer把不同的url锚点值称之为不同的状态(state)
- 模块名为
ui.router
通过 npm 安装
npm install angular-ui-router
ui-router使用步骤
1、 引用angularjs和angular-ui-router
2、 在模块中引入ui.router
3、 创建config，通过$stateProvider来配置路由表
$stateProvider.state({
name:'myhome2', //路由的名称
url:'/myhome4', //路由匹配的地址
template:'123
'
})
4、 通过$urlRouterProvider配置默认路由
$urlRouterProvider
.otherwise('/myhome4');
示例
<div ng-app="myApp">
<div>
<ul>
<li><a ui-sref="home" ui-sref-active="red">homea>li>
<li><a ui-sref="news" ui-sref-active="red">newsa>li>
<li><a ui-sref="other" ui-sref-active="red">othera>li>
ul>
div>
<div>
<ui-view name="view1">ui-view>
<ui-view name="view2">ui-view>
<ui-view name="view3">ui-view>
div>
div>
<script src="node_modules/angular/angular.js"></script>
<script src="node_modules/angular-ui-router/release/angular-ui-router.js"></script>
<script>
var app=angular.module('myApp',['ui.router']);
app.config(function ($stateProvider) {
//第一个参数是路由的名字
$stateProvider
.state('home',{
url:'/home',
template:'{{text}}
',
controller:function ($scope) {
$scope.text='首页'
}
})
.state('news',{
url:'/news',
template:'{{text}}
',
controller:function ($scope) {
$scope.text='news'
}
})
.state('other',{
url:'/other/a/b/c/d/e/f/g',
views:{
'view1':{
template:'{{text}}
',
controller:function ($scope) {
//debugger;
$scope.text='view1'
}
},
'view2':{
template:'{{text}}
',
controller:function ($scope) {
$scope.text='view2'
}
}
}
})
})
</script>
路由嵌套(抽象路由)
抽象路由显示不了东西。必须配合抽象子路由显示
好处：根据路径就知道是抽象路由还是非抽象路由。灵活切换。减少ng-if ng-show。
抽象路由模板
<div ng-app="myApp">
<a href="#!/tab/home">homea>
<a href="#!/other">othera>
<div>
<ui-view>ui-view>
div>
div>
<script src="node_modules/angular/angular.js"></script>
<script src="node_modules/angular-ui-router/release/angular-ui-router.js"></script>
<script>
var app=angular.module('myApp',['ui.router']);
app.config(function ($stateProvider) {
//第一步创建抽象主路由
$stateProvider
.state('tab',{
url:'/tab',
abstract:true, //通过abstract 标记当前路由为抽象主路由
templateUrl:'template.html'
})
//抽象子路由
.state('tab.home',{
url:'/home',
template:'home
'
})
.state('tab.news',{
url:'/news',
template:'news
'
})
//不属于抽象路由
.state('other',{
url:'/other',
template:'other
'
})
})
</script>
传参~~
<div ng-app="myApp">
<ui-view>
ui-view>
div>
<script src="node_modules/angular/angular.js"></script>
<script src="node_modules/angular-ui-router/release/angular-ui-router.js"></script>
<script>
var app=angular.module('myApp',['ui.router']);
app.config(function ($stateProvider,$urlRouterProvider) {
$stateProvider
.state('tabs',{
url:'/tabs',
abstract:true, //通过abstract 标记当前路由为抽象主路由
templateUrl:'template.html'
})
// /tabs/home
.state('tabs.home',{
url:'/home',
template:'home
'
})
.state('tabs.news',{
url:'/news',
template:'news
'
})
// 抽象路由是通过抽象路由名称来进行规划是否为抽象路由
.state('other',{
//：name表示当前参数可以变化
//？表示当前参数可以为空
url:'/other/:name?',
template:'homeother
',
controller:'myCtrl'
// controller:function ($routeParams) {
// console.log($routeParams);
// }
});
//默认跳转
$urlRouterProvider
.otherwise('/other')
});
app.controller('myCtrl',['$location',function (ab) {
console.log($location);
}])
</script>
template.html文件内容 :
<h1>抽象主路由内容h1>
<ul>
<li>
<a href="#!/tabs/home">homea>
<a href="#!/tabs/news">newsa>
<a href="#!/other">othera>
li>
ul>
<ui-view>ui-view>
对比ngRoute来看
1、ui-view => ng-view
2、$stateProvider.state => $routeProvider.when()
3、$urlRouterProvider.otherwise =>$routeProvider.otherwise
4、多了abstract 抽象路由
5、跳转方式多了 ui-sref
可以通过路由名称来进行跳转
home