Angular-ui-router路由，View管理
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管理的更多相关文章
- angular ui.router 路由传参数
angular已经用了一段时间了,最近在做路由,做一下笔记. 路由跳转的时候进行穿参 ui.router方式 <a ui-sref="edit({id:5})"> 编辑 ...
- Angularjs ui router,路由嵌套 父controller执行问题
解决方式来源:https://stackoverflow.com/questions/25316591/angularjs-ui-router-state-reload-child-state-onl ...
- 规范 : angular ui router path & params
在seo文章中提到url的path 必须是 why-us,而不是whyUS 所以定了规范,所有的path 必须why-us path ?后尾的是用来filter的,所以可以WhyUs 如果是不需要给s ...
- angular 的ui.router 定义不同的state 对应相同的url
Angular UI Router: Different states with same URL? The landing page of my app has two states: home-p ...
- 前端MVC Vue2学习总结（八）——Vue Router路由、Vuex状态管理、Element-UI
一.Vue Router路由 二.Vuex状态管理 三.Element-UI Element-UI是饿了么前端团队推出的一款基于Vue.js 2.0 的桌面端UI框架,手机端有对应框架是 Mint U ...
- angular : $location & $state(UI router)的关系
次序:angular 的 location会先跑 $rootScope.$on("$locationChangeStart", function (scope, newUrl, o ...
- angular当router使用userhash:false时路由404问题
angular当router使用userhash:false时路由404问题 安装iis urlrewrite2.0组件 在根目录下创建 Web.config <configuration> ...
- Angular 从入坑到挖坑 - Router 路由使用入门指北
一.Overview Angular 入坑记录的笔记第五篇,因为一直在加班的缘故拖了有一个多月,主要是介绍在 Angular 中如何配置路由,完成重定向以及参数传递.至于路由守卫.路由懒加载等&quo ...
- 【原创】ui.router源码解析
Angular系列文章之angular路由 路由(route),几乎所有的MVC(VM)框架都应该具有的特性,因为它是前端构建单页面应用(SPA)必不可少的组成部分. 那么,对于angular而言,它 ...
随机推荐
- Gmail收不到邮件咋办？
http://www.ipip.net/ping.php 分别输入 imap.gmail.com pop.gmail.com smtp.gmail.com 选择 国外 , 然后点ping,找到对应的 ...
- traceroute 命令
通过traceroute我们可以知道信息从你的计算机到互联网另一端的主机是走的什么路径.当然每次数据包由某一同样的出发点(source)到达某一同样的目的地(destination)走的路径可能会不一 ...
- listView的异步加载数据
1 public class MainActivity extends Activity { 2 3 private ListView listView; 4 private ArrayList< ...
- RHEL7安装部署ZooKeeper
转载请注明出处:jiq•钦's technical Blog - 季义钦 文章说明: 分布式注冊中心(链接)须要安装的组件包括两个部分: 1.注冊中心服务(Zookeeper) 2.站点(Tomcat ...
- ios 深入讲解iOS键盘一：控制键盘隐藏显示
在iOS的开发中,我们一般使用UITextField.UITextView处理文字输入等操作,大部分情况下我们只需要一两行代码去手动管理键盘的显示隐藏:让UITextField或UITextView成 ...
- 我为什么选择采用node.js来做新一代的EasyDarwin RTSP开源流媒体服务器
在去年我们还未开始开发基于node.js的新版本EasyDarwin RTSP开源流媒体服务器的时候,我写了一篇博客<对EasyDarwin开源项目后续发展的思考:站在巨人的肩膀上再跳上另一个更 ...
- 九度OJ 1342：寻找最长合法括号序列II （DP）
时间限制:1 秒 内存限制:32 兆 特殊判题:否 提交:898 解决:366 题目描述: 假如给你一个由'('和')'组成的一个随机的括号序列,当然,这个括号序列肯定不能保证是左右括号匹配的,所以给 ...
- 1.BeanFactory解析
package org.springframework.beans.factory; import org.springframework.beans.BeansException; import o ...
- php在不同平台下路径分隔符不同的解决办法
在看phpamf时看到一个常量“DIRECTORY_SEPARATOR”,最后发现是一个全局的常量,用来定义路径分隔符的 主要解决在windows和linux下路径分隔符不同的造成代码不通用的问题,在 ...
- Android系统移植与调试之------->如何修改Android设备的桌面背景图片
1.切换到~/mx0831-0525/device/other/TBDG1073/overlay/frameworks/base/core/res/res目录 2.准备好一张相应尺寸的图片并且命名为d ...