前言
我们知道默认的路由提供（Route Provider）在复杂的应用程序中是不太适合应用场景，它存在诸多限制，所以在Angular 1.2之后此时我们不得不将路由提供作为一个单独的模块当我们需要使用时即ngRoute，但是该ngRoute使用起来还是不够灵活，AngularJS团队很快意识到了这点，于是提出了ui.router作为ngRoute的完美替代品。
话题
此节我们要讨论关于Route的高级，也就是深入探讨AngularUi Router中的比较高级的内容，关于ui.router有如下强大特点：
（1）嵌套状态和嵌套视图。
（2）多个命名视图（由一个视图到另外一个视图通过引用视图的名称）。
（3）嵌套解析（一个解析等待另外一个解析完毕）。
（4）ui.sref指令（绑定超链接，并自动生成）。
......
对于本节我们则要讲述的是路由的resolve，在ngRoute中也存在resolve，ui.router中的resolve相比较更加强大，于是对于ngRoute中的Resolve未做过多探讨，有兴趣的童鞋可以自行去学习，那resolve到底是做什么的？它可以在一个路由中提前加载数据，接着这个resolve中的属性会被注入到此路由的控制器中，ui.router中的reolve应该是该路由模块中最大的特性。当resolve中的全部属性被解析完毕时，resolve才会执行，意味着是延迟执行。下面我们来一步一步看看resolve。
高级路由之resolve（返回字符串）
通过在resolve中通过函数返回一个字符串，此时会立即被解析。我们来看看。
UI
<html>
<head>
<meta charset="UTF-8">
<title></title>
<script type="text/javascript" src="../Scripts/angular.min.js"></script>
<script src="../ui-router/angular-ui-router.min.js"></script>
<script src="app.js"></script>
</head>
<body ng-app="app">
<div ui-view></div>
</body>
</html>
app.js
angular.module("app",["ui.router"])
.config(config);
function config($stateProvider,$urlRouterProvider){
$urlRouterProvider.otherwise("/resolve");
$stateProvider.state("resolve",{
url:"/resolve",
templateUrl:"resolve.html",
resolve: {
cnblogs:function(){
return "xpy0928";
}
},
controller: function($scope, cnblogs){
$scope.loadData = cnblogs;
}
});
}
我们接着在视图resolve.html中显示绑定的数据 {{loadData}} 结果毫无疑问显示xpy0928。
上述我们是在视图内部定义的控制器从而绑定数据，如果我们的Application足够大，此时路由势必会膨胀，在这种情况下，我们还是单独定义控制器并绑定数据，如下：
function config($stateProvider,$urlRouterProvider){
$urlRouterProvider.otherwise("/resolve");
$stateProvider.state("resolve",{
url:"/resolve",
templateUrl:"resolve.html",
controller:"resolveVM",
resolve: {
cnblogs:function(){
return "xpy0928";
}
}
});
}
angular.module("app").controller("resolveVM",function($scope,cnblogs){
$scope.loadData = cnblogs;
});
同时我们也应该注意，当我们没有宿主运行时，对于有些浏览器可能会出现违背了跨域，在AnuglarJS中启动跨域，可以进行如下操作：
$httpProvider.defaults.useXDomain = true;
delete $httpProvider.defaults.headers.common['X-Requested-With'];
上述对于简单使用resolve给出了一个基本的例子，我们再往下面看看。
高级Route之resolve（返回promise【推荐】）
我们首先看看一个最简单返回promise的例子。我们只需在上述app.js中的resolve进行如下修改：
resolve: {
promiseObj: function($http){
return $http({method: 'GET', url: ''});
},
貌似还是不太乐观，下面我们详细介绍下，一般对于resolve无非就是通过resource即http请求来返回数据当然或者通过服务来获取数据。上述是我们简单的返回一个promise，我们完全可以自定义一个promise。将resolve修改如下：
resolve: {
delayedData: function($q, $timeout) {
var deferred = $q.defer();
$timeout(function() {
var myData = {message: 'hello,everyone!xpy0928 from cnblogs'};
deferred.resolve(myData);
}, 1000);
return deferred.promise;
}
}
接下来我们来绑定数据：
angular.module("app").controller("resolveVM",function($scope,delayedData){
$scope.loadData = delayedData;
});
诶，貌似没图，还是演示下：
上述有说过我们利用resolve无非根据http获取数据，在AngularJS中利用ngResource来实现（推荐前面的替代品，这里只是作为演示用）。
resolve a resource's promise
我们如下修改resolve：
resolve: {
userData: function(userList) {
var list = userList.query();
return list.$promise;
}
}
创建获取用户列表服务：
angular.module("app").factory('userList', ['$resource', function ($resource) {
return $resource('http://localhost:52005/api/cnblogs/getUserlist');
}]);
angular.module("app").controller("resolveVM",function($scope,userData){
$scope.loadData = userData;
});
我们看下效果：
resolve multiple resource's promise
上述只是利用resolve解析一个promise，若我们要在路由或者状态发生改变之前解析多个promise，此时我们该如何做?我们此时利用$q.all开完成，我们来看如下代码：
resolve: {
userData: function($q,userList,blogList) {
var list = userList.query();
var bloglist = blogList.query();
return $q.all([list.$promise,blogList.$promise])
.then(function(){
})
}
}
通过resource获取数据：
angular.module("app").factory('userList', ['$resource', function ($resource) {
return $resource('http://localhost:52005/api/cnblogs/getUserlist');
}]);
angular.module("app").factory('blogList', ['$resource', function ($resource) {
return $resource('http://localhost:52005/api/cnblogs/getBloglist');
}]);
如上，就是这么简单。
总结
本节我们讲了路由中比较高级的知识resolve，建议在实际开发中利用ui.router来完成而非ngRouter中的resolve，同时本节也涉及到了$q/promise，本节未进行详细阐述，下节我们我们仔细讲讲$q或者其他知识。
补充
本打算再写一篇关于promise的文章，搜到一篇写的非常好的文章，那就不再讲述了链接如下：
AngularJS 中的Promise和设计模式： http://my.oschina.net/ilivebox/blog/293771?p=1
AngularJS之高级Route【三】（八）的更多相关文章
-
angularjs 自定义服务的三种方式
angularjs 中可通过三种($provider,$factory,$service)方式自定义服务,以下是不同的实现形式: // 定义module , module中注入$providevar ...
-
Stm32高级定时器(三)
Stm32高级定时器(三) 1 互补输出和死区插入 1.1 死区:某个处于相对无效状态的时间或空间 本来OCX信号与OCXREF时序同相同步,OCXN信号与OCXREF时序反相同步.但为了安全考虑,以 ...
-
solidity高级理论(三)：时间单位与view
solidity高级理论(三):时间单位与view 关键字:时间单位.view.Gas优化 solidity使用自己的本地时间单位 变量 now 将返回当前的unix时间戳(自1970年1月1日以来经 ...
-
C高级第三次作业
C高级第三次作业(1) 6-1 输出月份英文名 1.设计思路 (1)算法: 第一步:定义整型变量n,字符指针s,输入一个数赋给n. 第二步:调用函数getmonth将值赋给s. 第三步:在函数getm ...
-
AngularJS中的route可以控制页面元素的改变，使多页面变成一个单页面。。。
SPA(Single Page Application)指的是通单一页面展示所有功能,通过Ajax动态获取数据然后进行实时渲染,结合CSS3动画模仿原生App交互,然后再进行打包(使用工具把Web应用 ...
-
AngularJS之中级Route【二】（七）
前言 上一篇我们介绍了AngularJS内置的路由ngRoute,我们知道AngularJS被广泛应用于单页应用SPA(Single Page Application)中,此时路由对于我们来讲非常重要 ...
-
AngularJS之初级Route【一】（六）
前言 这一节我们来讲讲AngularJS中的路由以及利用AngularJS在WebAPi中进行CRUD.下面我们一起来看看. 话题 当我们需要进行路由映射时即用到$route服务,在AngularJS ...
-
AngularJs 学习笔记（三）依赖注入
一个对象可以通过三种方式来获取对依赖对象的控制权: 1.在内部创建依赖的对象 2.通过全局变量引用这个依赖对象 3.通过参数进行传递(在这里是通过函数参数) AngularJs通过$injector注 ...
-
JavaScriptDom操作与高级应用（八）
一:Dom操作基础与高级应用 Node接口也定义了一些所有节点类型都包含的属性和方法.
随机推荐
-
关于 QRCode 的问题[C# 生成二维码固定大小]
一直在纠结了一天多的问题:就是为什么生成的二维码会随着内容多少的变化而变化大小,但是为什么网上做出来的二维码内容变化但是大小却没有变化?刚开始的时候我就一直围绕着是不是根据缩略图来做的,但是这个方法行 ...
-
VMProtect使用小计【一】
文章列表 VMProtect使用小计[一] – 初次使用VMProtect使用小计[二] – 加壳查看VMProtect使用小计[三] – 权限管理 说明 VMProtect的功能我就不说了,详情大家 ...
-
[Android学习笔记]some tips
集合合并去重: listA.removeAll(listB); listA.addAll(listB); android:singleLine="true"//单行显示 andro ...
-
vsftpd3.0之匿名用户配置
有时候工作中为了方便上传下载文件,又不想在系统中添加用户并为用户创建密码,这时候就可以用匿名用户方式搭建FTP服务器,当然安全性我们不说,今天就为实现这么个简单而粗爆的FTP服务器,来看看都需要哪些配 ...
-
GLSL ES 3.0 和 2.0 的区别
GLSL ES 3.0 和 2.0 的区别 语法区别 attribute和varying. 取而代之的是 in和out 头文件多了个#version 300 es 纹理 texture2D 和 tex ...
-
sql 迈安
SELECT b.* FROM dbo.[耕地肥料_01土壤肥料机构建设基本情况]as b ,bs_org where--县(b.任务id in((select bs_task.id--,bs_org ...
-
Daily Scrum- 12/31
Meeting Minutes 更新了统计单词背诵精度的统计数字计算方法: 确定了词反转的效果的动画: Burndown Progress part 组员 今日工作 Time (h) 明日 ...
-
力扣（LeetCode）67. 二进制求和
给定两个二进制字符串,返回他们的和(用二进制表示). 输入为非空字符串且只包含数字 1 和 0. 示例 1: 输入: a = "11", b = "1" 输出: ...
-
38.spiderkeeper的配置
配置spiderkeeper管理scrapy爬虫 1.安装所需文件包pip install spiderkeeper pip install scrapyd pip install scrapy_cl ...
-
【OCP-12c】2019年CUUG OCP 071考试题库（74题）
74.View the exhibit and examine the structure of ORDERS and CUSTOMERS tables. ORDERS Name Null? ...