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. 绑定网关mac，防arp攻击

    netsh i i show innetsh -c i i add neighbors 16 192.168.1.1 08-57-00-51-19-7c

  2. cc2530启动流程---广播发送数据

    //操作系统任务初始化 void osalInitTasks( void ) { uint8 taskID = ; // 分配内存,返回指向缓冲区的指针 tasksEvents = (uint16 * ...

  3. HDU 4287 Intelligent IME（字典树）

    在我没用hash之前,一直TLE,字符串处理时间过长,用了hash之后一直CE,(请看下图)我自从经历我的字典树G++MLE,C++AC以后,一直天真的用C++,后来的CE就是因为这个,G++才支持这 ...

  4. HDU 1711 Number Sequence（KMP匹配数字串）

    这个就是kmp的数组形式,不用来处理字符串还真有点不习惯呢... #include<iostream> using namespace std; ,MAXM = ; int T[MAXN] ...

  5. Chapter 1 First Sight——6

    "You didn't need to do that, Dad. I was going to buy myself a car." 你不需要这样,父亲,我会自己买一辆车的 &q ...

  6. 转html5语义化标签总结一

    HTML 5的革新之一:语义化标签一节元素标签. 在HTML 5出来之前,我们用div来表示页面章节,但是这些div都没有实际意义.(即使我们用css样式的id和class形容这块内容的意义).这些标 ...

  7. USACO1.3.4 Combination Lock

    题目链接:1.3.4 为了防止有重复的数字,我开了个三维数组来标记,爆内存,又用vector标记,爆内存... 不得不感慨这份代码. /* ID:wang9621 PROG:combo LANG:C+ ...

  8. svn branching and merging

    the svn switch command is an alternative way to creating a working copy of a branch :) You can merge ...

  9. particles.js 一个非常酷炫的粒子动画库

    GIT 地址:https://github.com/VincentGarreau/particles.js/ 效果:

  10. javascript 中的this

    he scope of all functions is window. (The reason why is you are invoking f as a function(类,全局的类) and ...