UI-Router是angular路由插件，上一篇我们讲到了angularJS自带路由，可惜在路径嵌套上表现的有所欠缺，而angular-UI-Router插件正好弥补了这一点。

[示例]：

□、UIRoute3.html：                     //先写总的路由文件

<!doctype html>
<html ng-app="routerApp">

<head>
    <meta charset="utf-8">
    <link rel="stylesheet" href="css/bootstrap-3.0.0/css/bootstrap.css">
    <link rel="stylesheet" href="css/index.css">
    <script src="js/angular-1.3.0.js"></script>
    <script src="js/angular-animate.js"></script>
    <script src="js/angular-ui-router.js"></script>                                //用angular-ui-router.js代替上一篇所讲到的angular-route.js 
    <script src="UIRoute3.js"></script>                                               //自定义路由文件UIRoute3.js
</head>

<body>
    <div ui-view></div>                                                                     //在ui-view中生成视图
</body>

</html>

□、UIRoute3.js：

var routerApp = angular.module('routerApp', ['ui.router']);
routerApp.config(function($stateProvider, $urlRouterProvider) {
    $urlRouterProvider.otherwise('/index');                                    //与原生的$routerProvider写法不一样的就是$urlRouterProvider先写默认路径
    $stateProvider                                                                      //再用$stateProvider.state('',{}).state('',{})...代替$routerProvider.when()方法
        .state('index', {
            url: '/index',
            views: {
                '': {
                    templateUrl: 'tpls3/index.html'                                //看到templateUrl:后面包含了很多的模板
                },
                '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();
                }
            }
        })
        .state('index.permission', {
            url: '/permission',
            views: {
                'main@index': {
                    template: '这里是权限管理'
                }
            }
        })
        .state('index.report', {
            url: '/report',
            views: {
                'main@index': {
                    template: '这里是报表管理'
                }
            }
        })
        .state('index.settings', {
            url: '/settings',
            views: {
                'main@index': {
                    template: '这里是系统设置'
                }
            }
        })
});

□、模板文件分别如下：

1、tpls3/index.html:

<div class="container">
    <div ui-view="topbar"></div>
    <div ui-view="main"></div>
</div>

2、tpls3/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、 'tpls3/home.html'：

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

4、'tpls3/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>

5、'tpls3/highendusers.html'：

<div class="row">
    <div class="col-md-12">
        <h3>高端用户列表</h3>
    </div>
</div>
<div class="row">
    <div class="col-md-12">
        <table class="table table-bordered table-hover table-condensed">
            <thead>
                <tr>
                    <th>序号</th>
                    <th>姓名</th>
                    <th>年龄</th>
                    <th>作品</th>
                </tr>
            </thead>
            <tbody>
                <tr>
                    <td rowspan="2">1</td>
                    <td>中华烟云</td>
                    <td>29</td>
                    <td>《用AngularJS开发下一代WEB应用》</td>
                </tr>
                <tr>
                    <td>中华烟云</td>
                    <td>29</td>
                    <td>《用AngularJS开发下一代WEB应用》</td>
                </tr>
                <tr>
                    <td>2</td>
                    <td>中华烟云</td>
                    <td>29</td>
                    <td>《Ext江湖》</td>
                </tr>
                <tr>
                    <td>3</td>
                    <td colspan="2">中华烟云</td>
                    <td>《ActionScript游戏设计基础（第二版）》</td>
                </tr>
            </tbody>
        </table>
    </div>
</div>

6、'tpls3/normalusers.html'：

<div class="alert alert-success" role="alert">
    <strong>Well done!</strong>You successfully read <a href="#" class="alert-link">this important alert message</a>.
</div>
<div class="alert alert-info" role="alert">
    <strong>Heads up!</strong>This <a href="#" class="alert-link">alert needs your attention</a>, but it's not super important.
</div>
<div class="alert alert-warning" role="alert">
    <strong>Warning!</strong>Better check yourself, you're <a href="#" class="alert-link">not looking too good</a>.
</div>
<div class="alert alert-danger" role="alert">
    <strong>Oh snap!</strong> <a href="#" class="alert-link">Change a few things up</a> and try submitting again.
</div>

7、'tpls3/lowusers.html'：

<div class="btn-toolbar" role="toolbar">
    <div class="btn-group">
        <button type="button" class="btn btn-default">
            <span class="glyphicon glyphicon-align-left"></span>
        </button>
        <button type="button" class="btn btn-default">
            <span class="glyphicon glyphicon-align-center"></span>
        </button>
        <button type="button" class="btn btn-default">
            <span class="glyphicon glyphicon-align-right"></span>
        </button>
        <button type="button" class="btn btn-default">
            <span class="glyphicon glyphicon-align-justify"></span>
        </button>
    </div>
</div>
<div class="btn-toolbar" role="toolbar">
    <button type="button" class="btn btn-default btn-lg">
        <span class="glyphicon glyphicon-star"></span>Star</button>
    <button type="button" class="btn btn-default">
        <span class="glyphicon glyphicon-star"></span>Star</button>
    <button type="button" class="btn btn-default btn-sm">
        <span class="glyphicon glyphicon-star"></span>Star</button>
    <button type="button" class="btn btn-default btn-xs">
        <span class="glyphicon glyphicon-star"></span>Star</button>
</div>

8、'tpls3/addusertypeform.html'：

<h3>新增用户</h3>
<form class="form-horizontal" role="form">
    <div class="form-group">
        <label class="col-md-2 control-label">
            邮箱：
        </label>
        <div class="col-md-10">
            <input type="email" class="form-control" placeholder="推荐使用126邮箱">
        </div>
    </div>
    <div class="form-group">
        <label class="col-md-2 control-label">
            密码：
        </label>
        <div class="col-md-10">
            <input type="password" class="form-control" placeholder="只能是数字、字母、下划线">
        </div>
    </div>
    <div class="form-group">
        <div class="col-md-offset-2 col-md-10">
            <div class="checkbox">
                <label>
                    <input type="checkbox">自动登录
                </label>
            </div>
        </div>
    </div>
    <div class="form-group">
        <div class="col-md-offset-2 col-md-10">
            <button class="btn btn-primary" ng-click="backToPrevious()">返回</button>
        </div>
    </div>
</form>

8个模板文件

--@angularJS--路由插件UI-Router的更多相关文章

  1. 转AngularJS路由插件

    AngularJS学习笔记--002--Angular JS路由插件ui.router源码解析 标签: angular源码angularjs 2016-05-04 13:14 916人阅读 评论(0) ...

  2. angularjs ngRoute和ui.router对比

    ngRoute模块是angularjs自带的路由模块,ui.router是一个第三方路由模块,接下来将对两者进行一个对比: ng-router(angular-router.js) ng-view n ...

  3. AngularJS学习之 ui router

    1.安装 bower install --save angular_ui-router 2.在项目主页面 index.html中添加 <div ui-view="">& ...

  4. angularjs的路由ui.router

      <!-- 引入路由插件 --> <script src="vendor/angular-ui-router/release/angular-ui-router.min. ...

  5. AngularJS 使用 UI Router 实现表单向导

    Today we will be using AngularJS and the great UI Router and the Angular ngAnimate module to create ...

  6. [转]AngularJS 使用 UI Router 实现表单向导

    本文转自:http://www.oschina.net/translate/angularjs-multi-step-form-using-ui-router 今天我们将使用AngularJs和伟大的 ...

  7. [转]AngularJS+UI Router(1) 多步表单

    本文转自:https://www.zybuluo.com/dreamapplehappy/note/54448 多步表单的实现   在线demo演示地址https://rawgit.com/dream ...

  8. angular ui.router 路由传参数

    angular已经用了一段时间了,最近在做路由,做一下笔记. 路由跳转的时候进行穿参 ui.router方式 <a ui-sref="edit({id:5})"> 编辑 ...

  9. angularJS ui router 多视图单独刷新问题

    场景:视图层级如下 view1 --view11 --view111 需求:view11的一个动作过后,单独刷新view12 解决方式:修改层级设计 view1 --view11 --view111 ...

  10. Angularjs - 路由 angular-ui-router

    注意,使用的路由不是官方的,而是第三方的.因为这个更加强大支持嵌套而且大家都是这样用的 http://www.tuicool.com/articles/zeiy6ff http://www.open- ...

随机推荐

  1. HDU 2846 Repository（字典树）

    字典树较为复杂的应用,我们在建立字典树的过程中需要把所有的前缀都加进去,还需要加一个id,判断它原先是属于哪个串的.有人说是AC自动机的简化,但是AC自动机我还没有做过. #include<io ...

  2. Chapter 1 First Sight——1

    My mother drove me to the airport with the windows rolled down. 随着窗户渐渐摇下,我妈妈开着车送我去机场. It was seventy ...

  3. VS下载地址

    http://www.iplaysoft.com/vs2015.html   Microsoft Visual Studio(简称VS)是美国微软公司的开发工具包系列产品.Visual Studio ...

  4. CSS3的background-size

    DEMO一.background-size:auto; 我来看第一个DEMO,在前面的DEMO上加上和个class名为"backgroundSizeAuto",在这个Demo上我们 ...

  5. HDU 4557 非诚勿扰 队列、（记一次失败的SBT尝试）

    非诚勿扰 Time Limit: 3000/1000 MS (Java/Others)    Memory Limit: 65535/32768 K (Java/Others) [Problem De ...

  6. 转 使用 HttpClient 4 进行文件上传

    http://www.tuicool.com/articles/Y7reYb 1. 概述 本教程我们将描述如何使用 HttpClient 4进行一次多文件上传操作 . 我们将使用  http://ec ...

  7. IWorkspaceFactory接口

    When To Use Use IWorkspaceFactory when you need to create a new workspace, connect to an existing wo ...

  8. 过实现鹰眼图这个功能来进一步学习MapControl控件

    我们通过实现鹰眼图这个功能来进一步学习MapControl控件.在实现鹰眼图之前,我们需 要接口有更深入的了解. 变主动为被动-出接口(OutBound interface) COM编程类似客户端和服 ...

  9. [Unity Shader]光照模型对物体的假设

    什么是光照模型 光照模型就是模拟光在物体间的传递过程,以确保物体可见表面每一点的亮度和颜色. 当光照射到一个物体表面时,光可能被吸收.反射或折射.反射和折射的光使物体可见.如果入射光全部被吸收,物体将 ...

  10. ICE BOX 配置，使用----第一篇

    一 理论部分 (1) 为什么要使用icebox? icebox server代替了通常的server. icebox是为了方便集中管理多个ice服务而建立的. 它通过使用icebox服务器,把ice服 ...