ui-router基本使用
ngRoute 官方路由和 ui-router 第三方社区区别
- UI-Router被认为是AngularUI为开发者提供的最实用的一个模块，它是一个让开发者能够根据URL状态或者说是'机器状态'来组织和控制界面UI的渲染，而不是仅仅只改变路由（传统AngularJS应用实用的方式）。
ui-router优点:
- 该模块为开发者提供了很多最视图（view）额外的控制。开发者可以创建嵌套分层的视图、在同一个页面使用多个视图、让多个视图控制某个视图等更多的功能。即使是非常复杂的web应用，UI-Router也可以极佳地驾驭。
安装
$ bower install angular-ui-router
1.导入文件, 注入模块 ui.router
<script src="angular1.6.js"></script>
<script src="angular-ui-router.js"></script>
<script>
//1.创建模块, 导入模块
var app = angular.module('app', ['ui.router']);
</script>
2.绑定视图
- 和ngRoute一样，为特定状态指定的模板将会放在<div ui-view></div>元素中。在这些模板中也可以包含自己的ui-view,这就是在同一个路由下实现嵌套视图的方法。
<div class="content" ui-view>
</div>
3.配置路由
- 要定义一个路由，与传统的方法相同：使用.config方式，但使用的不是
stateProvider。监听状态改变使用state(), 而不是when()
app.config(['$stateProvider', '$urlRouterProvider', function ($stateProvider, $urlRouterProvider) {
//代码中路由切换不是监听锚点, 监听state
$stateProvider.state('home', {
url:'/home', //url显示地址
template:'<h1>首页</h1>'
}).state('my', {
url:'/my',
template:'<h1>关于我们</h1>'
}).state('contact', {
url:'/contact',
template:'<h1>联系我们</h1>'
});
//设置默认url
$urlRouterProvider.otherwise('home');
}]);
- 上面代码定义了一个叫start的状态。设置对象stateConfig和路由设置对象的选项是非常相似的。
4.设置路由跳转
- ui-sref-active 把当前选中的路由添加样式没有选中没有样式
- 通过ui-sref监听状态改变, 路由跳转
<div class="header">
<ul>
<!--4.设置路由跳转 -->
<li><a ui-sref-active="active" ui-sref="home">首页</a></li>
<li><a ui-sref-active="active" ui-sref="my">关于我们</a></li>
<li><a ui-sref-active="active" ui-sref="contact">联系我们</a></li>
</ul>
</div>
