ui

ui

1.Angularjs按需加载

AngularJS主要应用开发SPA(Single Page Application)项目，所以在小型http://项目中，services、filters和controllers都在index.html中加载。Google给的AngularJS官方的angular-seed和angular-phonecat都是这样。

对于复杂一点，大型的项目，如果所有的内容一开始就加载，对首页的性能影响比较大，即使静态javascript文件使用CDN，对性能还是有很大的影响。所有需要引入按需加载机制，而Angular1.x版本中，ocLazyLoad是一个不错的按钮加载解决方案。

2.ocLazyLoad的功能

ocLazyLoad: your solution for lazy loading with Angular 1.x

入门可以参照：ocLazyLoad快速入门，代码也非常简单：

1.引入ocLazyLoad文件，可以使用npm和bower来进行安装

http://

2.注入 oc.lazyLoad模块

var myAphttp://p = angular.module("MyApp", ["oc.lazyLoad"]);

3. 在控制器中加载一个指定的模块

myApp.controller("MyCtrl", function($ocLazyLoad) {

$ocLazyLoad.loadhttp://('testModule.js');

});

在实际项目中service和controller文件都是通过ocLazyLoad加载，并且是放在resolve中加载。代码示例如下：

.state('detail',{

url:"/detail/:bookId",

templateUrl:"/templates/detail.html",

controller:"DetailController",

controllerAs:'ctrl',

resolve:{

load:['$ocLazyLoad',function($ocLazyLoad){

return $ocLazyLoad.load([

'services/dataService.js'

]);

}],

currentBook:['$ocLazyLoad','$stateParams','$injector',function($ocLazyLoad,$stateParams,$injector){

var bookId=$stateParams.bookId;

return $ocLazyLoad.load('services/booksService.js').then(function(){

return $injector.get('booksService').getBookById(bookId);;

});

}]

}

})

3.resolve属性

resolve在state配置参数中，是一个对象(key-value)，每一个value都是一个可以依赖注入的函数，并且返回的是一个promise(当然也可以是值，resloved defer)。

4.resolve中加载service

resolve中加载services,但是请求都是异步的，返回的顺序不是按照顺序来的。在currentBook中需要调用booksService里面的getBookById()方法。这个时候虽然在load里面已经加载dataService.js，但是在currentBook中是无法使用getBookById()方法，所以在currentBook对象中，所以必须重新加载booksService.js。这个时候就需要$injector中的get()方法。$injector

5.图书列表和详细页demo

6.参考网址

ocLazyLoad

ui-router中resolve属性

综合示例：//jb51.net/article/92624.htm

版权声明：本文内容由网络用户投稿，版权归原作者所有，本站不拥有其著作权，亦不承担相应法律责任。如果您发现本站中有涉嫌抄袭或描述失实的内容，请联系我们jiasou666@gmail.com 处理，核实后本网站将在24小时内删除侵权内容。