--@angularJS--路由插件UI-Router

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:

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'：

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'：

8、'tpls3/addusertypeform.html'：

8个模板文件

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

转AngularJS路由插件
AngularJS学习笔记--002--Angular JS路由插件ui.router源码解析标签: angular源码angularjs 2016-05-04 13:14 916人阅读评论(0) ...
angularjs ngRoute和ui.router对比
ngRoute模块是angularjs自带的路由模块,ui.router是一个第三方路由模块,接下来将对两者进行一个对比: ng-router(angular-router.js) ng-view n ...
AngularJS学习之 ui router
1.安装 bower install --save angular_ui-router 2.在项目主页面 index.html中添加 <div ui-view="">& ...
angularjs的路由ui.router
 <script src="vendor/angular-ui-router/release/angular-ui-router.min. ...
AngularJS 使用 UI Router 实现表单向导
Today we will be using AngularJS and the great UI Router and the Angular ngAnimate module to create ...
[转]AngularJS 使用 UI Router 实现表单向导
本文转自:http://www.oschina.net/translate/angularjs-multi-step-form-using-ui-router 今天我们将使用AngularJs和伟大的 ...
[转]AngularJS+UI Router(1) 多步表单
本文转自:https://www.zybuluo.com/dreamapplehappy/note/54448 多步表单的实现在线demo演示地址https://rawgit.com/dream ...
angular ui.router 路由传参数
angular已经用了一段时间了,最近在做路由,做一下笔记. 路由跳转的时候进行穿参 ui.router方式 <a ui-sref="edit({id:5})"> 编辑 ...
angularJS ui router 多视图单独刷新问题
场景:视图层级如下 view1 --view11 --view111 需求:view11的一个动作过后,单独刷新view12 解决方式:修改层级设计 view1 --view11 --view111 ...
Angularjs - 路由 angular-ui-router
注意,使用的路由不是官方的,而是第三方的.因为这个更加强大支持嵌套而且大家都是这样用的 http://www.tuicool.com/articles/zeiy6ff http://www.open- ...

随机推荐

USACO Section 1.2 Name That Number 解题报告
题目题目描述在一个农场里面,每一头牛都有一个数字编号,但是现在这些牛不喜欢这种编号,它们想把这些数字编号转化成为可以接受的字母的形式.数字与字母的转换表如下: 2: A,B,C 5: J,K,L ...
CG之refract函数简单实现
CG的refract函数定义如下: refract(I, N, eta) 根据入射光线方向I,表面法向量N和折射相对系数eta,计算折射向量.如果对给定的eta,I和N之间的角度太大,返回(0,0,0 ...
php url 伪静态
手册上说: 'PATH_INFO' 包含由客户端提供的.跟在真实脚本名称之后并且在查询语句(query string)之前的路径信息,如果存在的话.例如,如果当前脚本是通过 URL http ...
JS对象引用
对象和函数都是引用的关系(改变后者会改变前者) 但是下面这个列子情况不一样了.刚开始的时候 B 引用了 A的地址,后来B又重新赋值,新占了一个地址,A B俩的关系已经脱离. 那么有的时候,我们只有 ...
读《我为什么放弃Go语言》有感
最近又熟悉了下go语言,发现go语言还有许多设计不好的地方,然后又读到了<我为什么放弃Go语言>这篇文章, 对于某些方面,我还是比较认同的. 这篇文章总结了十六点,如下: 1.1 不允许左 ...
设置gridcontrol的焦点行
private void gridView1_DoubleClick(object sender, EventArgs e) { try { ...
笔记：利用 Cocos2dx 3.2 与 Box2D制作一个跑酷游戏（上）
最近写lua写得没有力气了,所以想让脑袋放松一下,刚好看到有人在用swift做游戏: Swift游戏实战-跑酷熊猫于是脑子一短路,就想到了利用这些素材来做一个游戏. 本来不想记笔记的,但是由于选择物 ...
Android新手入门
本博客出自公众号安卓应用频道:http://mp.weixin.qq.com/s?__biz=MzA3MDMyMjkzNg==&mid=2652261947&idx=1&sn= ...
ngx_http_core_module模块提供的变量
ngx_http_core_module模块在处理请求时,会有大量的变量,这些变量可以通过访问日志来记录下来,也可以用于其它nginx模块.在我们对请求做策略如改写等等都会使用到一些变量,顺便对ngx ...
Cookie mapping技术
摘要: RTB竞价中的cookie mapping技术解决DSP的cookie跟ad change的cookie匹配问题. Cookie mapping分为两步:(1)google ad exchan ...

--@angularJS--路由插件UI-Router

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

随机推荐

热门专题