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. ubuntu下配置.net core运行环境

    Ubuntu 16.4执行: sudo sh -c 'echo "deb [arch=amd64] https://apt-mo.trafficmanager.net/repos/dotne ...

  2. geopandas python地图绘制

    #geopandas python地理数据处理 瓦片地图:瓦片地图金字塔模型是一种多分辨率层次模型,从瓦片金字塔的底层到顶层,分辨率越来越低,但表示的地理范围不变.首先确定地图服务平台所要提供的缩放级 ...

  3. C#代码覆盖率 -vsinstr和OpenCover

    最近接触的项目涉及到C#开发的应用,测试过程中我们需要去分析C#的代码覆盖率,问了一些人,在网上也搜了一些,零碎的找到很多资料,但是都不是很完整,实际使用的过程中还是走了不少弯路.到现在为止,有两种可 ...

  4. jquery.zclip实现点击拷贝文字功能

    <script type="text/javascript" src="http://www.sitejs.cn/templets/skins/js/jquery- ...

  5. C++程序设计项目开发——银行自己主动提款机（二）

    函数的有关知识在后面章节会讲到,先提前了解下.在没有系统的学习完之前,咱们先来模仿着写一个样例,尝试这样的有效的学习方法.   尝试下这种学习方法. 显示功能选项 1.查询 2.取款 3.存款 4.转 ...

  6. 从零搭建Web网站

    前言 工作也有几多年了,无论是身边遇到的还是耳间闻到的,多多少少也积攒了自己的一些经验和思考,当然,博主并没有太多接触高大上的分布式架构实践,相对比较零碎,随时补充.俗话说得好,冰冻三尺非一日之寒,滴 ...

  7. poj2392 Space Elevator（多重背包问题）

    Space Elevator   Time Limit: 1000MS   Memory Limit: 65536K Total Submissions: 8569   Accepted: 4052 ...

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

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

  9. linux命令之高级使用 service

    service命令,顾名思义,就是用于管理Linux操作系统中服务的命令. 1. 声明:这个命令不是在所有的linux发行版本中都有.主要是在redhat.fedora.mandriva和centos ...

  10. mysql唯一主键生成代码

    <insert id="insertPeople" parameterType="PeopleSchedule">     <selectKe ...