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>