ui-router的使用

ui-router是为实现多视图与视力的嵌套而开发出来的第三方的AngularJS插件。大多数的开发都不使用AngularJS自带的路由模块，而使用ui-router路由。

准备工作

额外引入文件<script src="lib/angular-ui-router.min.js"></script>

Example

html页面

1、入口页面–index.html

<!--页面中只需要在一个DIV中添加ui-view。在控制器中视图的改变会不断更换DIV中的内容。--><div ui-view></div>

2、导航模板–topbar.html

<nav class="navbar navbar-inverse" role="navigation">    <div class="navbar-header">        <a class="navbar-brand" ui-sref="#">ui-router综合实例</a>    </div>    <ul class="nav navbar-nav">        <li>            <a ui-sref="index">首页</a>        </li>        <li>            <a ui-sref="index.usermng">用户管理</a>        </li>        <li>            <a ui-sref="index.permission">权限管理</a>        </li>        <li>            <a ui-sref="index.report">报表管理</a>        </li>        <li>            <a ui-sref="index.settings">系统设置</a>        </li>    </ul></nav>

3、首页模板 – home.html

<div class="jumbotron text-center">    <h2>首页</h2>    <p>        首页的形式一般比较<span class="text-danger">灵活</span>，而且可能随时发生变化。    </p></div>

4、用户管理页面模板–usermng.html

<div class="row">    <div class="col-md-3">        <div class="row">            <div class="col-md-12">                <div class="list-group">                    <a ui-sref="#" class="list-group-item active">用户分类</a>                    <a ui-sref="index.usermng.highendusers" class="list-group-item">高端用户</a>                    <a ui-sref="index.usermng.normalusers" class="list-group-item">中端用户</a>                    <a ui-sref="index.usermng.lowusers" class="list-group-item">低端用户</a>                    <a ui-sref="#" class="list-group-item">黑名单</a>                </div>            </div>        </div>        <div class="row">            <div class="col-md-12">                <button class="btn btn-primary" ng-click="addUserType()">新增用户</button>            </div>        </div>    </div>    <div class="col-md-9">        <div ui-view></div>    </div></div>

还有highendusers.html,normalusers.html,lowusers.html模板，纯HTML展示内容

js文件

var routerApp = angular.module('routerApp', ['ui.router']);routerApp.config(function($stateProvider, $urlRouterProvider) {    $urlRouterProvider.otherwise('/index');    $stateProvider        .state('index', {            url: '/index',            views: {                '': {                    templateUrl: 'tpls3/index.html'                },                'topbar@index': {                    templateUrl: 'tpls3/topbar.html'                },                'main@index': {                    templateUrl: 'tpls3/home.html'                }            }        })        .state('index.usermng', {            url: '/usermng',            views: {                'main@index': {                    templateUrl: 'tpls3/usermng.html',                    controller: function($scope, $state) {                        $scope.addUserType = function() {                            $state.go("index.usermng.addusertype");                        }                    }                }            }        })        .state('index.usermng.highendusers', {            url: '/highendusers',            templateUrl: 'tpls3/highendusers.html'        })        .state('index.usermng.normalusers', {            url: '/normalusers',            templateUrl: 'tpls3/normalusers.html'        })        .state('index.usermng.lowusers', {            url: '/lowusers',            templateUrl: 'tpls3/lowusers.html'        })        .state('index.usermng.addusertype', {            url: '/addusertype',            templateUrl: 'tpls3/addusertypeform.html',            controller: function($scope, $state) {                $scope.backToPrevious = function() {                    window.history.back();                }            }        })    });

参数介绍