注意，使用的路由不是官方的，而是第三方的。因为这个更加强大支持嵌套而且大家都是这样用的

http://www.tuicool.com/articles/zeiy6ff

http://www.open-open.com/lib/view/open1416878937309.html

http://angular-ui.github.io/

安装

npm install angular-ui-router

或者直接使用

<script src="https://cdn.bootcss.com/angular-ui-router/1.0.0-alpha0/angular-ui-router.min.js"></script>

练习1：（在指定url和templateUrl路径时。好像不能用相对路径，当时我是必须使用‘/’才能正常使用的。另外注意单词拼写templateUrl,并且config的两个参数是固定形式，就和$scope一样必须写死）

main.html

<!DOCTYPE html>
<html ng-app = 'myapp'>
    <head>
        <meta charset="UTF-8">
        <title></title>
        <link href="https://cdn.bootcss.com/bootstrap/3.3.6//css/bootstrap.min.css" rel="stylesheet">
    </head>
    <body>

         <h3>AngularJS Home Page (Ui-router Demonstration)</h3>
            <div data-ui-view=""></div> 

        <script src="https://cdn.bootcss.com/angular.js/1.5.0/angular.min.js"></script>
        <script src="https://cdn.bootcss.com/angular-ui-router/1.0.0-alpha0/angular-ui-router.min.js"></script>
        <script type="text/javascript">
            var myApp = angular.module("myapp",["ui.router"]);
            myApp.config(function($stateProvider,$urlRouterProvider)
            {
                $urlRouterProvider.when("","/pageTab"); 

                $stateProvider
                    .state("pageTab",{url:"/pageTab",templateUrl:"pageTab.html"})
                    .state("pageTab.page1",{url:"/page1",templateUrl:"page1.html"})
                    .state("pageTab.page2",{url:"/page2",templateUrl:"page2.html"})
                    .state("pageTab.page3",{url:"/page3",templateUrl:"page3.html"})
            })
        </script>
    </body>
</html>

pageTab.html

<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title></title>
    </head>
    <body>
        <div>
             <div>
                 <span style="width:100px" ui-sref=".page1"><a href="">page1</a></span>
                 <span style="width:100px" ui-sref=".page2"><a href="">page2</a></span>
                 <span style="width:100px" ui-sref=".page3"><a href="">.page3</a></span>
             </div>
              <div>
                  <div ui-view=""></div>
             </div>
        </div>
    </body>
</html>

page1.html + page2.html + page3.html

<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title>page-1</title>
    </head>
    <body>
        page-1
    </body>
</html>

练习2：（比起上一个练习，这个路由规则更加体现出多层次嵌套）

main.html

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

<head>
    <meta charset="utf-8">
</head>

<body>
    <div ui-view></div>
    <a ui-sref="state1">State 1</a>
    <a ui-sref="state2">State 2</a>
</body>
       <script src="https://cdn.bootcss.com/angular.js/1.5.0/angular.min.js"></script>
      <script src="https://cdn.bootcss.com/angular-ui-router/1.0.0-alpha0/angular-ui-router.min.js"></script>
      <script type="text/javascript">
        var myUIRoute = angular.module('MyUIRoute', ['ui.router']);
        myUIRoute.config(function($stateProvider, $urlRouterProvider) {
            $urlRouterProvider.when("","/state1");
            $stateProvider
                .state('state1', {
                    url: "/state1",
                    templateUrl: "tpls/state1.html"
                })
                .state('state1.list', {
                    url: "/list",
                    templateUrl: "tpls/list_1.html",
                    controller: function($scope) {
                        $scope.items = ["喵", "了", "个", "咪"];
                    }
                })
                .state('state2', {
                    url: "/state2",
                    templateUrl: "tpls/state2.html"
                })
                .state('state2.list', {
                    url: "/list",
                    templateUrl: "tpls/list_2.html",
                    controller: function($scope) {
                        $scope.things = ["哔", "了","狗"];
                    }
                });
        });
        </script>
</html>

tpl/state1.html + state2.html (新建一个目录，添加两个页面，内容大体如下、修改可以区分页面的内容就可以了)

<h1>State 1</h1>
<hr/>
<a ui-sref="state1.list">Show List</a>
<div ui-view></div>

tpl/list_1.html + list_2.html (在tpl，添加两个页面，内容大体如下、修改可以区分页面的内容就可以了)

<h3>List of State 1 Items</h3>
<ul>
    <li ng-repeat="item in items">{{item}}</li>
</ul>

 练习3：（再进一步复杂的嵌套）

main.html

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

<head>
    <meta charset="utf-8">
    <link rel="stylesheet" href="css/bootstrap-3.0.0/css/bootstrap.css">

</head>

<body style="margin-top: 50px;">
    <div ui-view></div>
    <script src="https://cdn.bootcss.com/jquery/2.2.1/jquery.min.js"></script>
    <script src="https://cdn.bootcss.com/bootstrap/4.0.0-alpha.2/js/bootstrap.min.js"></script>
    <script src="https://cdn.bootcss.com/angular.js/1.5.0/angular.min.js"></script>
    <script src="https://cdn.bootcss.com/angular-ui-router/1.0.0-alpha0/angular-ui-router.min.js"></script>
    <script type="text/javascript">
        var routerApp = angular.module('routerApp', ['ui.router']);
        routerApp.config(function($stateProvider, $urlRouterProvider)
        {
            $urlRouterProvider.when("",'/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();
                        }
                    }
                })
        });

    </script>
</body>

</html>

tpl3/index.html（核心页面）

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

tpl3/home.html （默认主页）

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

tpl3/topbar.html (头部组件)

<nav class="navbar navbar-inverse navbar-fixed-top">
    <div class="container">
        <div class="navbar-header">
            <a href="#" class="navbar-brand">品牌LOGO</a>
            <button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#cy_tp_ul">
                <span class="icon-bar"></span>
                <span class="icon-bar"></span>
                <span class="icon-bar"></span>
            </button>
        </div>
        <div class="collapse navbar-collapse" id="cy_tp_ul">
            <ul class="nav navbar-nav navbar-right" style="margin-top: 0px;">
                <li><a ui-sref="index"><span class="glyphicon glyphicon-home"></span> 首页</a></li>
                <li><a ui-sref="index.usermng"><span class="glyphicon glyphicon-user"></span> 用户管理</a></li>
            </ul>
        </div>
    </div>
</nav>

<div style="margin:10px 0px 10px 0px;border:1px solid #e5e5e5;"></div>

tpl3/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 ng-click="addUserType()" class="list-group-item">新增用户</a>
                </div>
            </div>
        </div>
    </div>
    <div class="col-md-9">
        <div ui-view></div>
    </div>
</div>

tpl3/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>

tpl3/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>

tpl3/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>

tpl3/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>

Angularjs - 路由 angular-ui-router的更多相关文章

  1. angular ui.router 路由传参数

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

  2. angularjs ngRoute和ui.router对比

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

  3. 规范 : angular ui router path & params

    在seo文章中提到url的path 必须是 why-us,而不是whyUS 所以定了规范,所有的path 必须why-us path ?后尾的是用来filter的,所以可以WhyUs 如果是不需要给s ...

  4. AngularJS学习之 ui router

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

  5. angular 的ui.router 定义不同的state 对应相同的url

    Angular UI Router: Different states with same URL? The landing page of my app has two states: home-p ...

  6. 转AngularJS路由插件

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

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

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

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

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

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

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

  10. angular当router使用userhash:false时路由404问题

    angular当router使用userhash:false时路由404问题 安装iis urlrewrite2.0组件 在根目录下创建 Web.config <configuration> ...

随机推荐

  1. web页面版权部分的显示问题

    网站开发中绝大部分页面底部都需要版权信息,一般都是Copyright ©域名 2014 - 2015. All Rights Reserved.这种格式,当然也有其他的,有时候不太注意会发现做出的这个 ...

  2. 【动态规划】The Triangle

    问题 E: [动态规划]The Triangle 时间限制: 1 Sec  内存限制: 128 MB提交: 24  解决: 24[提交][状态][讨论版] 题目描述 73 88 1 02 7 4 44 ...

  3. [小细节,大BUG]记录一些小问题引起的大BUG(长期更新....)

    [小细节,大BUG] 6.问题描述:当从Plist文件加载数据,放入到tableView中展示时,有时有数据,有时又没有数据.这是为什么呢?相信很多大牛都想到了:我们一般将加载的数据,转换成模型,放入 ...

  4. c++ static及const（开发者在线）

    static 是c++中很常用的修饰符,它被用来控制变量的存储方式和可见性,下面我将从 static 修饰符的产生原因.作用谈起,全面分析static 修饰符的实质. static 的两大作用: 一. ...

  5. UML从需求到实现----包图

    上接:UML中图出现顺序 上回讲到用例图,UML中各个图之间的关系.接着根据UML建模中图出现的顺序来总结包图. 用例图确定以后.用户的需求基本上就确定了.接下来要根据用户的要求去设计系统.建模的顺序 ...

  6. .NET 下各种Resource的读取方式

    1) Embedded Resource (Build Action 设置为 Embedded Resource) 在运行时使用GetManifestResourceStream读取 Image.Fr ...

  7. ThinkPHP3.2判断是否为手机端访问并跳转到另一个模块的方法

    目录结构 公共模块Common,Home模块,Mobile模块 配置Application/Common/Conf/config.php文件 'MODULE_ALLOW_LIST' => 'Ho ...

  8. js实现快速排序（in-place）简述

    快速排序,又称划分交换排序.以分治法为策略实现的快速排序算法. 本文主要要谈的是利用javascript实现in-place思想的快速排序 分治法: 在计算机科学中,分治法是建基于多项分支递归的一种很 ...

  9. struts乱码问题

    我觉得很有必要记录一下,在我搜便了网上乱码问题的解决方案无果之后几乎绝望. 一定要在提交的form 加上 methd =  post

  10. 枚举GC Roots的实现

    枚举根节点 从可达性分析中从GC Roots节点找引用链这个操作为例,可作为GC Roots的节点主要在全局性的引用(例如常量或类静态属性)与执行上下文(例如栈帧中的本地变量表)中,现在很多应用仅仅方 ...