angular中按需加载js

  按需加载估计是你们在使用angular以后最想解决的问题吧,由于angular的依赖机制,致使了必须在第一次加载的时候就加载全部js文件,小项目还好,稍大一点的项目若是有上百个js文件,无论是从效率仍是写法都至关很差。因此此次我使用了$ocLazyLoad来实现懒加载。文档看这里html

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

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

2.对$ocLazyLoad进行基础配置github

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.根据模块配置路由app

$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的使用,只有下次用过了再来补充吧。ionic

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

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

相关文章
相关标签/搜索