angular中按需加载js

　　按需加载估计是大家在使用angular之后最想解决的问题吧，因为angular的依赖机制，导致了必须在第一次加载的时候就加载所有js文件，小项目还好，稍大一点的项目如果有上百个js文件，不管是从效率还是写法都相当不好。所以这次我使用了$ocLazyLoad来实现懒加载。 文档看这里

1.引入js文件，并注入$ocLazyLoad服务

<script src= "  lib/ocLazyLoad.min.js  " ></script>

2.对$ocLazyLoad进行基础配置

angular.module( '  starter  '  )
.config([  "  $provide  " ,  "  $compileProvider  " ,  "  $controllerProvider  " ,  "  $filterProvider  "  ,
    function ($provide, $compileProvider, $controllerProvider, $filterProvider) {
        app.controller  =  $controllerProvider.register;
        app.directive  =  $compileProvider.directive;
        app.filter  =  $filterProvider.register;
        app.factory  =  $provide.factory;
        app.service  =  $provide.service;
        app.constant  =  $provide.constant;
    }
]) 

3.根据模块配置路由

 $stateProvider
    .state(  '  login  '  , {
        url:   '  /login  '  ,    
        templateUrl:   '  template/login/login.html  '  ,
        controller:  '  loginCtrl  '  ,
        resolve:{
            deps:[  "  $ocLazyLoad  "  ,function($ocLazyLoad){
                  return  $ocLazyLoad.load( "  template/login/login.js  "  );
            }]
        }
    }) 

 　　关于第三方js文件ocLazyLoad就无能为力了，它是用来懒加载angular module的，而不是第三方的js库。所以如果考虑到这些可以使用requireJS来加载，之所以在这个项目中没有用过是因为ocLazyLoad比起来更小一些，压缩过后只有15k大小，而且requireJS移植性不好且侵入性高(其实我也不知道什么意思，哈哈哈)。还有一点主要的是这个一次配置不用处处引用，挺契合angular模块化的特点的。至于requireJS的使用，只有下次用过了再来补充吧。

-----------------------------2016-12-15--------------------------------------

　　上一次使用ocLazyLoad是在ionic项目中，这次在angularWEB项目中使用，搭建的时候出了angular is not defined的问题，怎么找也解决不掉问题，结果最后改变了一下ui-router和oclazyload的引入位置，问题解决~记住一定要先引入ui-router再引入oclazyload啊

查看更多关于angular中按需加载js的详细内容...