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. ADB 高级应用

    一.利用无线来查看adb shell > adb tcpip 5555   连接: > adb connect IP:5555   见后文<调试注意事项>   二.模拟按键   ...

  2. 纯CSS弹出层，城市切换效果

    <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/ ...

  3. 要练习的lambda

    取list的id 放入新List<Integer> List<Integer> list1 = list.stream().map(albumGroup1 -> albu ...

  4. PHP的CURLOPT_POSTFIELDS参数使用数组和字符串的区别

    手册上解释: CURLOPT_POSTFIELDS  全部数据使用HTTP协议中的"POST"操作来发送.要发送文件,在文件名前面加上@前缀并使用完整路径.这个参数可以通过urle ...

  5. sell学习

    Linux Shell编程入门 从程序员的角度来看, Shell本身是一种用C语言编写的程序,从用户的角度来看,Shell是用户与Linux操作系统沟通的桥梁.用户既可以输入命令执行,又可以利用 Sh ...

  6. 85. Insert Node in a Binary Search Tree【easy】

    Given a binary search tree and a new tree node, insert the node into the tree. You should keep the t ...

  7. JS高程3：DOM-节点层次

    DOM是一个API,通过该API可以操作HTML文档或者XML文档. DOM将HTML或者XML文档描绘成一个多层节点结构. 文档节点是HTML或者XML文档的根节点,同时也是其他节点的根节点,因为每 ...

  8. 河南省第七届ACM程序设计大赛赛后总结

    我们学校ACM集训开始于4月5号(清明节),5月25日在郑州解放军信息工程大学举办,集训耗时50天,但是感觉效果还行,但是也不是太好:我们也已经尽力了,虽然说只拿了个银牌,每份收获的背后,都会有辛勤的 ...

  9. H3C-WA2210升级

    前几天升级了2210固件,做个记录 首先吐槽一点:华为官方给出的公共下载账号yx800根本没用..下不了官方提供的固件资料 组网准备: 升级之前要先看看原机版本(dis ver): 在升级版本之前,请 ...

  10. CCNA2.0笔记_IPv6

    IPv6地址表示方法: 连续的零字段可表示为:: (每个地址只能用一次) 示例: 2031:0000:130F:0000:0000:09C0:876A:130B –可表示为2031:0:130f::9 ...