[email protected]路由插件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:后面包含了很多的模板
                },
                ‘[email protected]‘: {
                    templateUrl: ‘tpls3/topbar.html‘
                },
                ‘[email protected]‘: {
                    templateUrl: ‘tpls3/home.html‘
                }
            }
        })
        .state(‘index.usermng‘, {
            url: ‘/usermng‘,
            views: {
                ‘[email protected]‘: {
                    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: {
                ‘[email protected]‘: {
                    template: ‘这里是权限管理‘
                }
            }
        })
        .state(‘index.report‘, {
            url: ‘/report‘,
            views: {
                ‘[email protected]‘: {
                    template: ‘这里是报表管理‘
                }
            }
        })
        .state(‘index.settings‘, {
            url: ‘/settings‘,
            views: {
                ‘[email protected]‘: {
                    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个模板文件

时间: 2024-10-15 20:05:03

[email protected]路由插件UI-Router的相关文章

[email&#160;protected]路由、模块、依赖注入

以下是演示angular路由切换的demo. 主页:index.html <!doctype html><html ng-app="bookStoreApp"> <head>    <meta charset="UTF-8">    <title>BookStore</title>    <script src="framework/1.3.0.14/angular.js&quo

[email&#160;protected]登录页通过路由跳转到内页的demo

今天还是来说一下angular中的路由模块.我们实际项目中,各个页面的切换是经常会与Auth相关的.比如我网站的后台,是需要登录过的用户才能进去,那么我们用angularJS做前端路由的时候应该怎么完成这个功能呢 ------------------------------------------------------------------------ 我们还是先设想一个最简单的场景吧.我们的应用有两个页面,登录页面后内容页面,要求是必须要验证登录成功后才能进入内容页面,下面我们一起来实现一

[email&#160;protected]一个简单的UI-Router路由demo

1.index.html: <!DOCTYPE HTML><html ng-app="routerApp"><head>    <title>UI-Router路由demo</title>    <meta charset="utf-8">        <link rel="stylesheet" href="../framework/bootstrap-3

JMeter [email&#160;protected] - PerfMon Metrics Collector插件

今天来介绍一下使用JMeter监测服务器性能,一般监测服务器的四个指标:CPU,Memory,Disks I/O,NetWork I/O,,使用到的插件是[email protected] - PerfMon Metrics Collector. JMeter插件之[email protected] - PerfMon Metrics Collector 1.打开[email protected] - PerfMon Metrics Collector插件,如图 2.输入服务器地址,端口为444

学习IOS开发UI篇[email&#160;protected]中strong,weak参数的设定及runloop机制

[email protected]的参数说明 ======================================== ARC是苹果为了简化程序员对内存的管理,推出的一套内存管理机制 使用ARC机制,对象的申请和释放工作会在运行时,由编译器自动在代码中添加retain和release 1> strong:强指针引用的对象,在生命周期内不会被系统释放 在OC中,对象默认都是强指针 2> weak:弱指针引用的对象,系统会立即释放 弱指针可以指向其他已经被强指针引用的对象 @propert

用npm安装插件时报错: [email&#160;protected]^1.0.0 (node_modules\chokidar\node_modules\fsevents)

在做前端项目的时候执行命令: npm install --save-dev [email protected] --registry=https://registry.npm.taobao.org 出现错误提示: fsevents不在package.json里,但是仍然安装了,是因为你的系统是Windows系统,fsevents是苹果系统的可选依赖,你的项目有可能是团队项目,别人在他的mac上安装了fsevents相关依赖库,所以到这边你也就安装到你的windows上边了. 你可以检查你的pac

[email&#160;protected]使用方式和之前版本的差异

2018年8月10号,vue-cli3.0面世 @2.9.3的使用1.下载vue-cli和安装项目cnpm i -g vue-cli#2.9.3 vue init webpack my-app @3.0以上,目前beta版本的使用1.下载vue-cli和安装项目npm install -g @vue/cli vue create <Project Name> //文件名 不支持驼峰(含大写字母) 全局安装过旧版本的 vue-cli(1.x 或 2.x)要先卸载它,否则跳过此步: npm uni

Angularjs中UI Router全攻略

摘自:Angularjs中UI Router全攻略 温馨提示:想要了解 angular-ui-router的同学,从上往下读一遍,能带随着coding那就更好了,保证你对angular-ui-router基本全部掌握. 如何引用依赖angular-ui-router angular.module('app',["ui.router"]) .config(function($stateProvider){ $stateProvider.state(stateName, stateCofi

[email&#160;protected]初体验之前篇-回顾[email&#160;protected]创建项目的流程

模拟实际工作中的操作,假如新开启了一个vue项目,可以先看看上篇博文中的git操作,新建空仓库vue-demo,并拉取到本地,创建本地dev分支后 1. 全局安装vue-cli yarn global add vue-cli // 检查是否已安装成功 vue -V // 2.9.6 2. 使用vue init 创建项目,官方提供了6种模板,对于大多数人而言,工作中选择webpack模板 // 使用vue init 创建项目(.指当前目录) vue init webpack . ? Generat