当前位置： 移动技术网 > IT编程>脚本编程>AngularJs > ui-router中使用ocLazyLoad和resolve的具体方法

ui-router中使用ocLazyLoad和resolve的具体方法

2017年12月12日  | 移动技术网IT编程  | 我要评论

1.angularjs按需加载

angularjs主要应用开发spa(single page application)项目，所以在小型项目中，services、filters和controllers都在中加载。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来进行安装

<script src="//ajax.googleapis.com/ajax/libs/angularjs/1.3.0/angular.min.js"></script>
<script src="libs/angular-ui-router/angular-ui-router.js"></script>
<script src="libs/oclazyload/oclazyload.js"></script>

2.注入 oc.lazyload模块

var myapp = angular.module("myapp", ["oc.lazyload"]);

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

myapp.controller("myctrl", function($oclazyload) {
 $oclazyload.load('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

综合示例：

以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持移动技术网。

您可能感兴趣的文章:

如对本文有疑问， 点击进行留言回复！！

相关文章:

验证码：
最近更新的文章
大家感兴趣的文章
移动技术网