AngularJS——ui-router
深究AngularJS——ui-router详解
1.配置使用ui-router
1.1导入js文件
需要注意的是：必须导入angular.min.js这个文件，且angular.min.js必须导入在angular-ui-router.min.js前面。
<script type="text/javascript" src="JS/angular.min.js"></script>
<script type="text/javascript" src="JS/angular-ui-router.min.js"></script>1.2注入angular模块
var app = angular.module('myApp', ['ui.router']);注入的名字“ui.router”，可在angular-ui-router.min.js里找到，如下图：
1.3定义视图
ui-view替代的是ngroute路由的ng-view。
<div ui-view></div>1.4配置路由状态
app.config(["$stateProvider", function ($stateProvider){
$stateProvider
.state("home", { //导航用的名字，如<a ui-sref="login">login</a>里的login
url: '/', //访问路径
template:'<div>模板内容......</div>'
})
}]);2.简单示例
<html>
<head>
<title>ui-router</title>
<meta http-equiv="pragma" content="no-cache">
<meta http-equiv="cache-control" content="no-cache">
<meta http-equiv="expires" content="0">
<meta http-equiv="keywords" content="keyword1,keyword2,keyword3">
<meta http-equiv="description" content="This is my page">
<!-- 导入JS -->
<script type="text/javascript" src="JS/angular.min.js"></script>
<script type="text/javascript" src="JS/angular-ui-router.min.js"></script>
</head>
<body >
<div ng-app="myApp">
<div ui-view></div> <!-- 视图 -->
</div>
</body>
<script type="text/javascript">
//定义模板，并注入ui-router
var app = angular.module('myApp', ['ui.router']);
//对服务进行参数初始化，这里配stateProvider服务的视图控制
app.config(["$stateProvider", function ($stateProvider) {
$stateProvider
.state("home", {
url: '/',
template:'<div>模板内容......</div>'
})
}]);
</script>
</html>3.嵌套路由的实现
通过url参数的设置实现路由的嵌套（父路由与子路由通过”.“连接就形成了子路由）。嵌套路由可实现多层次的ui-view。
<body >
<div ng-app="myApp" >
<a ui-sref="parent">点我显示父view内容</a>
<a ui-sref="parent.child">点我显示父view与子view内容</a>
<div ui-view></div> <!-- 父View -->
</div>
</body>
<script type="text/javascript">
var app = angular.module('myApp', ['ui.router']);
app.config(["$stateProvider", function ($stateProvider) {
$stateProvider
.state("parent", {//父路由
url: '/parent',
template:'<div>parent'
+'<div ui-view><div>'// 子View
+'</div>'
})
.state("parent.child", {//子路由
url: '/child',
template:'<div>child</div>'
})
}]);
</script>上面的是相对路径方式：
‘parent’将匹配…./index.html#/parent； ‘parent.child’将匹配…./index.html#/parent/child。
若改成绝对路径方式，则需要在子url里加上^:
.state("parent.child", {
url: '^/child',
template:'<div>child</div>'
}) 此时，’parent’将匹配…./index.html#/parent； ‘parent.child’将匹配…./index.html#/child。
4. 通过views实现多视图
多个示图时，使用views属性。该属性里包含了哪些ui-view，则对应的template或templateUrl里的内容就会填充该ui-view。
同一个状态下有多个视图示例：
<body >
<div ng-app="myApp" >
<a ui-sref="index">点我显示index内容</a>
<div ui-view="header"></div>
<div ui-view="nav"></div>
<div ui-view="body"></div>
</div>
</body>
<script type="text/javascript">
var app = angular.module('myApp', ['ui.router']);
app.config(["$stateProvider", function ($stateProvider) {
$stateProvider
.state("index", {
url: '/index',
views:{
'header':{template:"<div>头部内容</div>"},
'nav':{template:"<div>菜单内容</div>"},
'body':{template:"<div>展示内容</div>"}
}
})
}]);
</script>5.ui-view的定位
@的作用 是用来绝对定位view，即说明该ui-view属于哪个模板。如：’header@index’表示名为header的view属于index模板。绝对和相对路径的效果一样，请看如下代码：
<body >
<div ng-app="myApp" >
<a ui-sref="index">show index</a>
<a ui-sref="index.content1">content111111</a>
<a ui-sref="index.content2">content222222</a>
<div ui-view="index"><div>
</div>
</body>
<script type="text/javascript">
var app = angular.module('myApp', ['ui.router']);
app.config(["$stateProvider", function ($stateProvider) {
$stateProvider
.state("index", {
url: '/index',
views:{
'index':{template:"<div><div ui-view='header'></div> <div ui-view='nav'></div> <div ui-view='body'></div> </div>"},
//这里必须要绝对定位
'header@index':{template:"<div>头部内容header</div>"},
'nav@index':{template:"<div>菜单内容nav</div>"},
'body@index':{template:"<div>展示内容contents</div>"}
}
})
//绝对定位
.state("index.content1", {
url: '/content1',
views:{
'body@index':{template:"<div>content11111111111111111</div>"}
//'body@index'表时名为body的view使用index模板
}
})
//相对定位：该状态的里的名为body的ui-view为相对路径下的（即没有说明具体是哪个模板下的）
.state("index.content2", {
url: '/content2',
views:{
'body':{template:"<div>content2222222222222222222</div>"}//
}
})
}]);
</script>由上面代码可知，相对定位不能找到的ui-view需要用@来绝对定位。
6.URL路由传参（通过$stateParams服务获取参数）
有url: '/index/:id',和url: '/index/{id}',两种形式传参
<body >
<div ng-app="myApp" >
<a ui-sref="index({id:30})">show index</a>
<a ui-sref="test({username:'peter'})">show test</a>
<div ui-view></div>
</div>
</body>
<script type="text/javascript">
var app = angular.module('myApp', ['ui.router']);
app.config(["$stateProvider", function ($stateProvider) {
$stateProvider
.state("home", {
url: '/',
template:"<div>homePage</div>"
})
.state("index", {
url: '/index/:id',
template:"<div>indexcontent</div>",
controller:function($stateParams){
alert($stateParams.id)
}
})
.state("test", {
url: '/test/:username',
template:"<div>testContent</div>",
controller:function($stateParams){
alert($stateParams.username)
}
})
}]);
</script>7.Resolve（预载入）
参考资料：
使用预载入功能，开发者可以预先载入一系列依赖或者数据，然后注入到控制器中。在ngRoute中resolve选项可以允许开发者在路由到达前载入数据保证（promises）。在使用这个选项时比使用angular-route有更大的自由度。
预载入选项需要一个对象，这个对象的key即要注入到控制器的依赖，这个对象的value为需要被载入的factory服务。
如果传入的时字符串，angular-route会试图匹配已经注册的服务。如果传入的是函数，该函数将会被注入，并且该函数返回的值便是控制器的依赖之一。如果该函数返回一个数据保证（promise），这个数据保证将在控制器被实例化前被预先载入并且数据会被注入到控制器中。
<body >
<div ng-app="myApp" >
<a ui-sref="index">show index</a>
<div ui-view></div>
</div>
</body>
<script type="text/javascript">
var app = angular.module('myApp', ['ui.router']);
app.config(["$stateProvider", function ($stateProvider) {
$stateProvider
.state("home", {
url: '/',
template:"<div>homePage</div>"
})
.state("index", {
url: '/index/{id}',
template:"<div>indexcontent</div>",
resolve: {
//这个函数的值会被直接返回，因为它不是数据保证
user: function() {
return {
name: "peter",
email: "audiogroup@qq.com"
}
},
//这个函数为数据保证, 因此它将在控制器被实例化之前载入。
detail: function($http) {
return $http({
method: 'JSONP',
url: '/current_details'
});
},
//前一个数据保证也可作为依赖注入到其他数据保证中！（这个非常实用）
myId: function($http, detail) {
$http({
method: 'GET',
url: 'http://facebook.com/api/current_user',
params: {
email: currentDetails.data.emails[0]
}
})
}
},
controller:function(user,detail,myId$scope){
alert(user.name)
alert(user.email)
console.log(detail)
}
})
}]);
</script>AngularJS——ui-router的更多相关文章
- [转]AngularJS+UI Router(1) 多步表单
本文转自:https://www.zybuluo.com/dreamapplehappy/note/54448 多步表单的实现 在线demo演示地址https://rawgit.com/dream ...
- angularJS ui router 多视图单独刷新问题
场景:视图层级如下 view1 --view11 --view111 需求:view11的一个动作过后,单独刷新view12 解决方式:修改层级设计 view1 --view11 --view111 ...
- Angularjs ui router,路由嵌套 父controller执行问题
解决方式来源:https://stackoverflow.com/questions/25316591/angularjs-ui-router-state-reload-child-state-onl ...
- angularjs ngRoute和ui.router对比
ngRoute模块是angularjs自带的路由模块,ui.router是一个第三方路由模块,接下来将对两者进行一个对比: ng-router(angular-router.js) ng-view n ...
- AngularJS 使用 UI Router 实现表单向导
Today we will be using AngularJS and the great UI Router and the Angular ngAnimate module to create ...
- [转]AngularJS 使用 UI Router 实现表单向导
本文转自:http://www.oschina.net/translate/angularjs-multi-step-form-using-ui-router 今天我们将使用AngularJs和伟大的 ...
- ngRoute 和 ui.router 的使用方法和区别
在单页面应用中要把各个分散的视图给组织起来是通过路由机制来实现的.本文主要对 AngularJS 原生的 ngRoute 路由模块和第三方路由模块 ui.router 的用法进行简单介绍,并做一个对比 ...
- angularjs UI Libraries
angularjs UI Libraries ● ng-bootstrap is currently available. ● PrimeNG has largest number of compon ...
- 【原创】ui.router源码解析
Angular系列文章之angular路由 路由(route),几乎所有的MVC(VM)框架都应该具有的特性,因为它是前端构建单页面应用(SPA)必不可少的组成部分. 那么,对于angular而言,它 ...
- angular : $location & $state(UI router)的关系
次序:angular 的 location会先跑 $rootScope.$on("$locationChangeStart", function (scope, newUrl, o ...
随机推荐
- PyCharm2018.3.5下载和安装及永久破解详解（成功案例）
靓仔靓女,你是否在网上找了很多的方法都破解不了PyCharm,是有原因的!无论什么编程工具都不要下载近一到/两年内的版本,人家即把网上的一些破解方法修复了,而且还在测试阶段,不稳定就完事了我装的是20 ...
- PHP图片压缩类，高清无损直接用就ok啦
这个不完全是我自己写的-_-!,但是好用呀 <?php /** * Created by PhpStorm. * Note:文件介绍 * User: Lynly * Date: 2018/11/ ...
- JSP2.2自定义标签、EL函数
简介 JSTL是一个JSP标准标签库,可以解决大部分问题,但是如果我们需要一些更特殊的功能,就需要自定义类似JSTL中标签的标签.如果EL表达式无法满足我们的需求,我们也可以自定义EL函数. tld后 ...
- Emgu.CV怎么加载Bitmap
EmguCV 在4.0.1版本之后没办法用Bitmap创建Image了. 我给大家说下 EmguCV怎么加载Bitmap 下边是 EmguCV 官方文档写的,意思是从4.0.1以后的版本不能直接Bit ...
- Clover 引导 Windows 及 Linux 双系统
Clover 引导 Windows 及 Linux 双系统UEFI cnblogs @ Orcim 此 文比较详细地介绍了通过修改 Clover 的配置文件,添加 Clover 启动项的方法(添加 ...
- 002 01 Android 零基础入门 01 Java基础语法 01 Java初识 02 Java简介
002 01 Android 零基础入门 01 Java基础语法 01 Java初识 02 Java简介 学习Java的基础语法 Java是一门编程语言,学习的逻辑其实和现实世界的语言是一样的,需要了 ...
- CF471D MUH and Cube Walls
Link 一句话题意: 给两堵墙.问 \(a\) 墙中与 \(b\) 墙顶部形状相同的区间有多少个. 这生草翻译不想多说了. 我们先来转化一下问题.对于一堵墙他的向下延伸的高度,我们是不用管的. 我们 ...
- CF741D Arpa’s letter-marked tree and Mehrdad’s Dokhtar-kosh paths 树上启发式合并（DSU ON TREE）
题目描述 一棵根为\(1\) 的树,每条边上有一个字符(\(a-v\)共\(22\)种). 一条简单路径被称为\(Dokhtar-kosh\)当且仅当路径上的字符经过重新排序后可以变成一个回文串. 求 ...
- requests基本用法
首先,确认一下:已安装 requests 从一些简单的示例开始吧. 发送请求 使用 Requests 发送网络请求非常简单. 一开始要导入 Requests 模块: >>> impo ...
- TP5上传图片到七牛云，并且删除七牛云的图片
一,通过composer 下载七牛云 sdk composer require qiniu/php-sdk 二,手动下载七牛云sdk 1,https://developer.qiniu.com/kod ...