ui-router和同属AngularJS框架一部分的ng-route一样强大. ui-router提供了让我们可以做路由嵌套和视图命名的特性，嵌套路由功能主要是依赖$stateProvider服务,$urlRouterProvider服务与 ui-view实现。

.

先创建一个叫PageTab的html文件

<!DOCTYPE html>

<html lang="en" ng-app="app">

<head>

    <meta charset="UTF-8">

    <title>Title</title>

    <script src="../angular/angular.min.js"></script>

    <script src="../angular/angular-ui-route.js"></script>

    <script>

        var app = angular.module('app',['ui.router']);

        app.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>

</head>

<body>

<div ui-view></div>

</body>

</html>

PageTab.html

<div>

       <a href="#/page1" ui-sref=".page1">tab1</a>

       <a href="#/page2" ui-sref=".page2">tab2</a>

       <a href="#/page3" ui-sref=".page3">tab3</a>

    <div ui-view></div>

</div>

然后再创建三个子页面

page1.html

<div>

    page1

</div>

page2.html

<div>

   page2

</div>

page3.html

<div>

   page3

</div>

Angular ui-route的用法的更多相关文章

  1. angular路由——ui.route

    angular路由 使用案例 <!DOCTYPE html> <html lang="en"> <head> <meta charset= ...

  2. 基于angular的route实现单页面cnodejs

    Angular ui-router 前言 之前不太理解前端怎么实现路由功能,以前知道有一种方式使用html5的pushState可以操作url才实现路由的功能,在实践项目中也用过一次,后来这种操作叫成 ...

  3. kendo ui template的用法

    kendo ui template的用法: Kendo UI 框架提供了一个易用,高性能的JavaScript模板引擎.通过模板可以创建一个HTML片段然后可以和JavaScript数据合并成最终的H ...

  4. [mobile angular ui 1.2]桌面环境下如何自动隐藏左侧的sidebar？how to hide left sidebar on desktop browser by default?

    使用mobile angular ui 1.2开发,在默认情况下,桌面浏览器中sidebar-left是默认打开的,怎么才能在程序初始打开时关闭sidebar-left呢? 目前我找到的唯一可行办法就 ...

  5. nodejs express route 的用法

    express 中文社区:http://expressjs.jser.us/community.html nodejs express route 的用法 1. 首先是最基本的用法. 1 2 3 4 ...

  6. [译]发布ABP v0.19包含Angular UI选项

    发布ABP v0.19包含Angular UI选项 ABP v0.19已发布,包含解决的~90个问题和600+次提交. 新功能 Angular UI 终于,ABP有了一个SPA UI选项,使用最新的A ...

  7. Angular -ui - BootStrap组件的解释以及使用

    关于UI BootStrap UI BootStrap 是angularUI团队用纯粹angularJS语法编写的Bootstrap组件. 1. 关于ng-router(angular-router. ...

  8. [Angular2 Router] Exiting an Angular 2 Route - How To Prevent Memory Leaks

    In this tutorial we are going to learn how we can accidentally creating memory leaks in our applicat ...

  9. Angular @HostBinding()和@HostListener()用法

    @HostBinding()和@HostListener()在自定义指令时非常有用.@HostBinding()可以为指令的宿主元素添加类.样式.属性等,而@HostListener()可以监听宿主元 ...

  10. angular中$q.all用法

    $q.all是用于执行多个异步任务进行回调,它可以接受一个promise的数组,或是promise的hash(object).任何一个promise失败,都会导致整个任务的失败. 例1:接受一个pro ...

随机推荐

  1. HTTP 状态码总结 (HTTP Status Codes)

    今天与同事聊天中提及到HTTP状态码的问题,突然发现工作这么些年对这个天天打交道的东西也没有一个详细的了解.日常最常见的状态码莫过于500和404了,几乎从事IT的应该都知道或许不从事的都知道,呵呵! ...

  2. 【转载】Java 日常开发 - 常见异常

    转自 http://blog.sina.com.cn/s/blog_ab345e5d01010zaq.html 算术异常类:ArithmeticExecption 空指针异常类:NullPointer ...

  3. maven分开打包jar文件和依赖jar包和资源文件

    <properties> <project.build.sourceEncoding>UTF-8</project.build.sourceEncoding> &l ...

  4. Bash中的括号（二）

    双方括号[[]]的用法: 1.先举个例子说明: 假如你要再判断某个目录是否存在,又想当然写成: $ [ -f exists.txt && -d exists_folder ]; ech ...

  5. Resources.FindObjectsOfTypeAll<T>()的坑(Ghost prefab)

    今天遇到了一个Bug,因为调用Resources.FindObjectsOfTypeAll<T>()遍历整个场景,结果遍历出的对象不对.比较哈希一查果然是两个.原来prefab本身和pre ...

  6. thread_线程创建

    创建线程的2种方式,一种是直接继承Thread,另外一种就是实现Runnable接口. 这2种方式都有一个缺陷就是:在执行完任务之后无法获取执行结果.如果需要获取执行结果,就必须通过共享变量或者使用线 ...

  7. iOS直播-播放基于RTMP协议的视频

    iOS直播-播放基于RTMP协议的视频 流媒体协议介绍 1. 伪流媒体: 渐进式下载 : 边下边存, 文件会保存 使用http协议,也能够实现视频播放, 也能快进快退等, 体验上跟流媒体很像. 优酷, ...

  8. django的html模板中获取字典的值

    在django的html模板中获取字典中的值应当直接使用 字典.[key] 的方式 {% for i in lists %} <li id="{{i.id}}" class ...

  9. Makefile 13——理解make的解析行为

    make是以从上到下的顺序读入Makefile中的内容的.然而,处理Makefile中的语句却并非完全从上到下. 大体上,make处理一个Makefile分为两个阶段.第一个阶段包含: 1.make读 ...

  10. java @override 报错处理

    转载自:http://blog.sina.com.cn/s/blog_9c7605530101kl9r.html 一.java @override 报错处理 做项目的时候,同事那边电脑上编译通过的ja ...