未加星标

AngulerJS学习之按需动态加载文件

字体大小 | |
[前端(javascript) 所属分类 前端(javascript) | 发布者 店小二05 | 时间 | 作者 红领巾 ] 0人收藏点击收藏

在此之前我们首先要先了解几个东西:

$q

简介:

$q:主要解决的是异步编程的问题,是指描述通过一个承诺行为与对象代表的异步执行的行动结果的交互,可能会也可能不会再任何时候完成。

我们通过一个小故事理解 $q 服务。

中午点外买,打电话要了份炒饭,要求送到公司并给了老板具体地址。这个过程就是 $q.defer;
饭菜不可能立即送到,因此这是一个延期响应的请求;
老板说尽快送到。也就是老板给了我一个承诺 promise;
我可以边工作边等待,说明这个请求是个异步执行的过程。
这样这个延期异步请求就算建立完成了。就是一个deferred。
饭菜送到我去接受,这个过程称为 deferred.resolve(data) 响应事件;
如果米饭卖完了老板会告诉我做不了了,也就是拒绝我的请求了,就是 deferred.reject(error);
老板可以再任何时候跟我说做不了,只要在他还没把饭送来之前都可以。
快到楼下了,通知我去取。这就是通知 deferred.notify(data) 这样整个异步回调过程就完成了。
第二天我们好多人都要订餐。所以我就可以发起 $q.all(req1,req2,req3.);

使用

我们在服务中这样定义,在请求开始之间建立deferred,然后return deferred.promise.在获取到数据的时候deferred.resolve(data)。同样我们在中间可以收到通知或者拒绝等。

var def = $q.defer();
def.resolve(data);
return def.promise;

按需加载

首先我们要了解一下几点:

1、什么时机下加载:
在 ngRoute 和 uiRoute 中都提供了 resolve 属性里的值会在路由成功前被预先设定好,然后注入到控制器中。通俗地将,就是等数据都“就位”后,才进行路由(其实我觉得也不能叫路由,因为路由是一些列的操作,其中就包括了设置 resolve 属性等等)。可以参考我的上篇文章。
2、加载后的文件如何注册:
angular有个启动函数,叫做bootstrap。 根据angular的代码设计,你需要在启动之前定义所有的controller。就好似有个袋子,你在bootstrap之前想往里塞什么就塞什么。可是一旦bootstrap了,他就不再接受你任何往里塞的controller了。
解决这个问题,只有一个方法,就是利用主模块的provider主动注册controller。但是由于provider不能直接使用,所以我们把它存在主模块下面。通过存下来的方法,可以用来注册异步加载回来的页面组件。
通过上述我们知道了需要异步加载文件

实现

// controller
define(["app"], function(app) {
app.config(["$stateProvider", "$urlRouterProvider", "$controllerProvider",
function($stateProvider, $urlRouterProvider, $controllerProvider) {
// angular有个启动函数,叫做bootstrap;
// 根据angular的代码设计,你需要在启动之前定义所有的controller;
// 就好似有个袋子,你在bootstrap之前想往里塞什么就塞什么;
// 可是一旦bootstrap了,他就不再接受你任何往里塞的controller了;
// 解决这个问题,只有一个方法,就是利用主模块的provider主动注册controller;
// 但是由于provider不能直接使用,所以我们把它存在主模块下面;
// 通过存下来的方法,可以用来注册异步加载回来的页面组件。
app.registerController = $controllerProvider.register;
app.loadFile = function(js) {
return function($rootScope, $q) {
//通过$q服务注册一个延迟对象 deferred
var def = $q.defer(),deps = [];
angular.isArray(js) ? (deps = js) : deps.push(js);
require(deps, function() {$rootScope.$apply(function() { // 成功 def.resolve(); // def.reject() 不成功 // def.notify() 更新状态});
});
//通过deferred延迟对象,可以得到一个承诺promise,而promise会返回当前任务的完成结果
return def.promise;
};
}
$urlRouterProvider.otherwise('/index');
$stateProvider.state("index", {
url: "/index",
template: "这是首页页面"
});
$stateProvider.state("computers", {
url: "/computers",
template: "这是电脑分类页面{{title}}",
controller: "ctrl.file",
resolve: {
loadFile: app.loadFile("file")
}
});
$stateProvider.state("printers", {
url: "/printers",
template: "这是打印机页面"
});
$stateProvider.state("blabla", {
url: "/blabla",
template: "其他"
});
}
]);
});

// file.js
define(["app"], function(app) {
app.registerController("ctrl.file", function($scope) {
$scope.title = "--测试 ";
});
});
源码:requireLearn_jb51.rar

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持脚本之家。

本文前端(javascript)相关术语:javascript是什么意思 javascript下载 javascript权威指南 javascript基础教程 javascript 正则表达式 javascript设计模式 javascript高级程序设计 精通javascript javascript教程

主题: 数据求是其实
分页:12
转载请注明
本文标题:AngulerJS学习之按需动态加载文件
本站链接:http://www.codesec.net/view/533026.html
分享请点击:


1.凡CodeSecTeam转载的文章,均出自其它媒体或其他官网介绍,目的在于传递更多的信息,并不代表本站赞同其观点和其真实性负责;
2.转载的文章仅代表原创作者观点,与本站无关。其原创性以及文中陈述文字和内容未经本站证实,本站对该文以及其中全部或者部分内容、文字的真实性、完整性、及时性,不作出任何保证或承若;
3.如本站转载稿涉及版权等问题,请作者及时联系本站,我们会及时处理。
登录后可拥有收藏文章、关注作者等权限...
技术大类 技术大类 | 前端(javascript) | 评论(0) | 阅读(69)