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:'<h1>123</h1>'
})
4、 通过$urlRouterProvider配置默认路由
$urlRouterProvider
.otherwise('/myhome4');
示例
<div ng-app="myApp">
<div>
<ul>
<!--<li><a href="#!/home">home</a></li>-->
<!--<li><a href="#!/news">news</a></li>-->
<!--<li><a href="#!/other">other</a></li>-->
<!--ui-sref用来匹配路由的名称-->
<!--ui-sref-active点击以后给当前a标签添加样式-->
<li><a ui-sref="home" ui-sref-active="red">home</a></li>
<li><a ui-sref="news" ui-sref-active="red">news</a></li>
<li><a ui-sref="other" ui-sref-active="red">other</a></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:'<h1>{{text}}</h1>',
controller:function ($scope) {
$scope.text='首页'
}
})
.state('news',{
url:'/news',
template:'<h1>{{text}}</h1>',
controller:function ($scope) {
$scope.text='news'
}
})
.state('other',{
url:'/other/a/b/c/d/e/f/g',
views:{
'view1':{
template:'<h1>{{text}}</h1>',
controller:function ($scope) {
//debugger;
$scope.text='view1'
}
},
'view2':{
template:'<h1>{{text}}</h1>',
controller:function ($scope) {
$scope.text='view2'
}
}
}
})
})
</script>
路由嵌套(抽象路由)
抽象路由显示不了东西。必须配合抽象子路由显示
好处:根据路径就知道是抽象路由还是非抽象路由。灵活切换。减少ng-if ng-show。
抽象路由模板
<div ng-app="myApp">
<!--抽象路由的标签-->
<!--单有tab抽象主路由不会被渲染出来必须含有抽象子路由才可以-->
<a href="#!/tab/home">home</a>
<!--非抽象路由-->
<a href="#!/other">other</a>
<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:'<h1>home</h1>'
})
.state('tab.news',{
url:'/news',
template:'<h1>news</h1>'
})
//不属于抽象路由
.state('other',{
url:'/other',
template:'<h1>other</h1>'
})
})
</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:'<h1>home</h1>'
})
.state('tabs.news',{
url:'/news',
template:'<h1>news</h1>'
})
// 抽象路由是通过抽象路由名称来进行规划是否为抽象路由
.state('other',{
//:name表示当前参数可以变化
//?表示当前参数可以为空
url:'/other/:name?',
template:'<div><a href="#!/tabs/home">home</a><h1>other</h1></div>',
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">home</a>
<a href="#!/tabs/news">news</a>
<a href="#!/other">other</a>
</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
可以通过路由名称来进行跳转
<a ui-sref="home">home</a>