ui-router的工作原理非常类似于Angular的路由控制，他只关注状态。

Angular模板

最简单的模板，例如main.html：

<body data-ng-app="myApp">

<h1>AngularJS Home Page</h1>

    <div ui-view></div>

</body>

ui-view代表的是一个模板的占位符，例如要在ui-view下插入内容，可以通过如下代码：

var myapp=angular.module("myApp",["ui.router"]);

myapp.config(function($stateProvider,$urlRouterProvider){

    $urlRouterProvider.when("","/pagetab");

    $stateProvider.state("pagetab",{

        url:"/pagetab",

        template:"<h1>hello,AngularJs</h>"

    })

});

当程序运行时，在模板中插入一段代码：效果如下：

模板将被插入哪里？

状态被激活时，它的模板会自动插入到父状态对应模板中包含 ui-view属性的 元素内部 ，如果是顶层状态，那么它的父模板就是index.html

激活状态

1）调用$state.go()方法

2）点击包含ui-self指令的链接；

3）导航到状态相关联的url

Templates模板

方法一：配置template属性，指定一段html字符串，例如：

$stateProvider.state("pagetab",{

        url:"/pagetab",

        template:"<h1>hello,AngularJs</h>"

    })

方法二：通过配置templateUrl属性，来加载对应的模板，例如：

$stateProvider.state("pagetab",{

        url:"/pagetab",

        templateUrl:"pagetab.html"

    })

更多模板配置方法请参考：http://bubkoo.com/2014/01/01/angular/ui-router/guide/state-manager/

综合模板与路由的知识，做一个简单的路由demo，包含的页面有main.html,pagetab.html,page1.html,page2.html,page3.html

main.html的代码如下：

<!doctype html>

<html lang="en">

<head>

    <meta charset="utf-8">

    <title>Book Store</title>

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

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

    <script src="Scripts/app.js"></script>

</head>

<body data-ng-app="myApp">

<h1>AngularJS Home Page</h1>

    <div ui-view></div>

</body>

</html>

pagetab.html代码如下,通过设置ui-sref导航到对应的page1等：

<div>

   <div>

     <span style="width:100px" ui-sref=".page1"><a href="">Page1</a></span>

   <span style="width:100px" ui-sref=".page2"><a href="">Page2</a></span>

   <span style="width:100px" ui-sref=".page3"><a href="">Page3</a></span>

   </div>

   <div>

       <div ui-view=""></div>

   </div>

</div>

page1.html:

<div>

    <div>

        <h1>Page 1 content goes here........</h1>

    </div>

</div>

page2.html:

<div>

    <div>

        <h1>Page 2 content goes here........</h1>

    </div>

</div>

page3.html:

<div>

    <div>

        <h1>page 3 content goes here......</h1>

    </div>

</div>

app.js对应的代码为：

var myapp=angular.module("myApp",["ui.router"]);

myapp.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"

    })

});

对应的效果为：

点击page1，会把page1对应的html包含在pagetab.html对应的ui-view中。

Angular-ui-router路由，View管理的更多相关文章

  1. angular ui.router 路由传参数

    angular已经用了一段时间了,最近在做路由,做一下笔记. 路由跳转的时候进行穿参 ui.router方式 <a ui-sref="edit({id:5})"> 编辑 ...

  2. Angularjs ui router,路由嵌套 父controller执行问题

    解决方式来源:https://stackoverflow.com/questions/25316591/angularjs-ui-router-state-reload-child-state-onl ...

  3. 规范 : angular ui router path & params

    在seo文章中提到url的path 必须是 why-us,而不是whyUS 所以定了规范,所有的path 必须why-us path ?后尾的是用来filter的,所以可以WhyUs 如果是不需要给s ...

  4. angular 的ui.router 定义不同的state 对应相同的url

    Angular UI Router: Different states with same URL? The landing page of my app has two states: home-p ...

  5. 前端MVC Vue2学习总结（八）——Vue Router路由、Vuex状态管理、Element-UI

    一.Vue Router路由 二.Vuex状态管理 三.Element-UI Element-UI是饿了么前端团队推出的一款基于Vue.js 2.0 的桌面端UI框架,手机端有对应框架是 Mint U ...

  6. angular : $location & $state(UI router)的关系

    次序:angular 的 location会先跑 $rootScope.$on("$locationChangeStart", function (scope, newUrl, o ...

  7. angular当router使用userhash:false时路由404问题

    angular当router使用userhash:false时路由404问题 安装iis urlrewrite2.0组件 在根目录下创建 Web.config <configuration> ...

  8. Angular 从入坑到挖坑 - Router 路由使用入门指北

    一.Overview Angular 入坑记录的笔记第五篇,因为一直在加班的缘故拖了有一个多月,主要是介绍在 Angular 中如何配置路由,完成重定向以及参数传递.至于路由守卫.路由懒加载等&quo ...

  9. 【原创】ui.router源码解析

    Angular系列文章之angular路由 路由(route),几乎所有的MVC(VM)框架都应该具有的特性,因为它是前端构建单页面应用(SPA)必不可少的组成部分. 那么,对于angular而言,它 ...

随机推荐

  1. [译]GLUT教程 - 鼠标

    Lighthouse3d.com >> GLUT Tutorial >> Input >> The Mouse 上一节我们讨论了怎么用GLUT的键盘函数跟OpenG ...

  2. 挑战--asp.net 文件夹上传

    今天遇到一个有趣的问题,公司让平安做一个上传文件夹的功能,这个任务具有一定的挑战性哦.上传文件夹,我第一次看到有人这样做,以前都是上传压缩文件,从来就没有见人上传过文件夹,我也从来就没有尝试过.先不讨 ...

  3. window mysql安装步骤

    window安装mysql(本人系统win10 64位 安装mysql-5.7.10-winx64) 1. 官网下载mysql zip安装包,然后解压到你想安装的目录,假设解压的目录是P:\mysql ...

  4. php7.0 出现 curl_setopt(): Disabling safe uploads is no longer supported in 报错！

    项目换成php7.0,进行了测试,使用curl时,出现: curl_setopt(): Disabling safe uploads is no longer supported in xxx.定位到 ...

  5. linux 进程线程

    linux下进程的最大线程数.进程最大数.进程打开的文件数   ＝＝＝＝＝＝＝＝＝＝＝最大线程数＝＝＝＝＝＝＝＝＝＝＝＝＝＝ linux 系统中单个进程的最大线程数有其最大的限制 PTHREAD_TH ...

  6. 查看tcp各个连接状态的数量

    4. 查看tcp各个连接状态的数量 下面对的 netstat -tan|awk '$1~/tcp/{aa[$NF]++}END{for (h in aa)print h,aa[h]}' SYN_SEN ...

  7. Mysql----MySQL的mysql_insert_id和LAST_INSERT_ID(转)

    本文介绍的是mysql中last_insert_id和mysql_insert_id的区别 1 mysql_insert_id 一.PHP获取MYSQL新插入数据的ID mysql_insert_id ...

  8. 使用Istio治理微服务入门

    近两年微服务架构流行,主流互联网厂商内部都已经微服务化,初创企业虽然技术积淀不行,但也通过各种开源工具拥抱微服务.再加上容器技术赋能,Kubernetes又添了一把火,微服务架构已然成为当前软件架构设 ...

  9. Jmeter 03 Jmeter脚本开发

    JMeter 工作区介绍 JMeter Http 协议录制 JMeter 脚本调测 JMeter 关联 JMeter 参数化 JMeter 检查点 JMeter 事务 JMeter 集合点 JMete ...

  10. 体验DNN演示平台《A Neural Network Playground》（一）

    0 本次博客内容简介 本次博客标(一),是因为我自知有些地方还是不理解.本篇博客仅暂时记录第一次玩 A Neural Network Playground的体验,如果后面有了进一步体会,会更新新的内容 ...