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. unity3d贴图2D

    在GUI上绘制图片步骤如下: 1.定义一个2D图片纹理变量: public Texture2D pic; 2.关联变量和贴图的关系: 在布局界面选中MainCamera,找到右侧属性列表中的pic选项 ...

  2. ASP.NET 之XML：要插入的节点出自不同的文档上下文

    异常详细信息:   System.ArgumentException:   要插入的节点出自不同的文档上下文. 产生状况:现在有两个xml文件,我想把这两个xml合并,在给xml节点插入一个子节点时出 ...

  3. mysql启动与关闭

    撰于:http://wenku.baidu.com/link?url=QV3mEJWnU4c8VZPjKGxz4A8gSmdjO2HZY7n963UaVx4l_uPKrh16tGxLyqjf5i3MA ...

  4. POJ 1258：Agri-Net（最小生成树&amp;&amp;prim）

    Agri-Net Time Limit: 1000MS   Memory Limit: 10000K Total Submissions: 38918   Accepted: 15751 Descri ...

  5. EHCache 在WEB项目的使用方法

    EHCache 是一个纯java的在进程中的缓存,它具有下面特性:高速,简单,为Hibernate2.1充当可插入的缓存,最小的依赖性,全面的文档和測试.官方站点http://ehcache.sour ...

  6. linux中的系统服务--daemon

    简单的说,系统为了某些功能必须要提供一些服务 (不论是系统本身还是网络方面),这个服务就称为 service . 但是 service 的提供总是需要程序的运行吧!否则如何运行呢?所以达成这个 ser ...

  7. [svc][jk][mem]linux 内存清理/释放命令

    1.清理前内存使用情况 free -m 2.开始清理  echo 1 > /proc/sys/vm/drop_caches 3.清理后内存使用情况 free -m 4.完成! 查看内存条数命令: ...

  8. Python学习之warn()函数

    warn()函数位于warnings模块中,用来发出警告,或者忽略它或引发异常. def warn(message, category=None, stacklevel=, source=None) ...

  9. 奇怪的string

    代码1: #include <iostream> //#include <string> using namespace std; int main(int argc, cha ...

  10. eclipse导入svn中的maven工程项目

    Eclipse导入现有的maven工程 第一步:右键如图 new->other 进入other->输入svn->从svn检索项目,如图 点击next>如下图,如是第一次则选择创 ...