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. NYOJ 10 skiing (深搜和动归)

    skiing 时间限制:3000 ms  |  内存限制:65535 KB 难度:5 描写叙述 Michael喜欢滑雪百这并不奇怪. 由于滑雪的确非常刺激.但是为了获得速度.滑的区域必须向下倾斜.并且 ...

  2. 0xffff0000颜色表示

    0xffff0000表红色,意思是: A:ff=255 R:ff=255 G:00=0 B:00=0 可如下将(255,0,0,255)转成0xffff0000并输出: inline DWORD RG ...

  3. 深入理解C#学习笔记之走出误区

    通过学习深入理解C#这本书,发现自己对于C#这门语言一直存在着三个误区. 第一个误区:结构是轻量级的类: 我一直认为值类型不应该具有方法或其他有意义的行为,它们只应该具有一些简单的属性.但书中总结了一 ...

  4. atitit.提升研发效率的利器---重型框架与类库的区别与设计原则

    atitit.提升研发效率的利器---重型框架与类库的区别与设计原则 1. 框架的意义---设计的复用 1 1.1. 重型框架就是it界的重武器. 1 2. 框架 VS. 库 可视化图形化 1 2.1 ...

  5. 品茗论道说广播(Broadcast内部机制讲解)(上)

    1 概述 我们在编写Android程序时,常常会用到广播(Broadcast)机制.从易用性的角度来说,使用广播是非常简单的.不过,这个不是本文关心的重点,我们希望探索得再深入一点儿.我想,许多人也不 ...

  6. JS事件类型详解

    一般事件 onclick IE3.N2 鼠标点击时触发 此事件 ondblclick IE4.N4 鼠标双击时触发 此事件 onmousedown IE4.N4 按下鼠标时触发 此事件 onmouse ...

  7. error while loading shared libraries错误解决

    在编译引用了第三方库的代码后,执行出现了以下错误 [work@xxx zktest]$ ./a.out ./a.out: error while loading shared libraries: l ...

  8. nyoj 742 子串和再续 类似 HDU 1024

    子串和再续 时间限制:1000 ms  |  内存限制:65535 KB 难度:4 描述 给你一个序列 S1, S2, S3, S4 ... Sx, ... Sn (1 ≤ x ≤ n ≤ 1,000 ...

  9. hMailServer之发送附件大小限制

    hMailServer发送附件大小限制有以下几个地方: 1.php配置 参考 .post_max_size = 10M 表单提交最大数据为10M.此项不是限制上传单个文件的大小,而是针对整个表单的提交 ...

  10. 浅谈HTTPS协议和SSL、TLS之间的区别与关系

    HTTP可能是我们见到过最多的一个字符串了,应该没有之一,而对于HTTPS到来和趋势,我们又开始看到SSL/TLS,所以对于一般不只做技术的人来说这或许还是一个疑问,那么子凡就趁最近在折腾这方面来给大 ...