关于angular项目按需加载文件的两种方法(oclazyload&require)

关于angular文件按需加载做个总结;

声明:使用ui-router配置路由,angular v1.5.11;

第一种:oclazyload.js

文件结构为:


所有的**.controller.js都在scripts下,css在styles下

index.html需引入app.js,主要内容为定义的angular.module,以及路由配置:

//数组添加方法,判断是否包含指定参数,有则返回true
    Array.prototype.contains = function(obj) {
        var i = this.length;
        while (i--) {
            if (this[i] === obj) {
                return true;
            };
        };
        return false;
    };
//封装函数,返回一个数组,指定要懒加载的文件
    var loadMyCtrl = function(obj){
        var arr1 = ['account_change', 'prepayment', 'repayment', 'repayment_account', 'repayment_info', 'repayment_plan', 'voicemail'];
            if(arr1.contains(obj)){
                return ['$ocLazyLoad', function($ocLazyLoad){
                    return $ocLazyLoad.load(['scripts/'+obj+'.controller.js','styles/'+obj+'.css']);
                }]
            }else{
                return ['$ocLazyLoad', function($ocLazyLoad){
                    return $ocLazyLoad.load(['scripts/'+obj+'.controller.js']);
                }]
            } 
    };
//部分代码,路由配置时添加resolve属性(详细请自行百度)
app.config(function($stateProvider, $urlRouterProvider) {
             $stateProvider
                 .state('contract', {
                     url: '/contract',
                     templateUrl: 'app/contract/contract.html',
                     controller: 'contractController',
                     controllerAs: 'contract',
                     resolve: {
                         loadMyCtrl: loadMyCtrl('contract')
                     }
                 })
                 .state('contract_list', {
                     url: '/contract_list',
                     templateUrl: 'app/contract_list/contract_list.html',
                     controllerAs: 'contract_list',
                     controller: 'contract_listController',
                     title: '合同列表',
                     resolve: {
                         loadMyCtrl: loadMyCtrl('contract_list')
                     }
                 })................

这种方法编写比较简单,程序会先编写所有路由的resolve属性,每个执行一遍loadMyCtrl函数返回对应的路由需要预加载的文件路径。

注意:oclazyload.js在angularjs后引入

第二种:require.js

文件结构:

这里所有文件都是自定义文件;


下面是index.html 引入的文件:bower为类似于npm的包管理工具,输入下载指令后自动下载到bower_components文件夹下<script src="../bower_components/requirejs/require.js"></script>                             <script src="app/main.js"></script>
==================对这个编辑器绝望了====分割线=================
//main.js内容
require.config({
    baseUrl: 'app',
    paths: {
        'app': 'app',
        'angular': '../bower_components/angular/angular.min',
        'router': '../bower_components/angular-ui-router/release/angular-ui-router.min'
    },
    shim: {
        'angular': {
            exports: 'angular'
        },
        // 'app': {
        // 	exports: 'app'
        // },
        'router': {
            deps: ['angular']
        },
        'app': {
            deps: ['router']
        }
    }
})
// 初始化myModule模块
require(['app'], function() {
    angular.bootstrap(document, ['app'])
})

//app.js内容
define([], function() {
    var app = angular.module('app', ['ui.router']);
    app.config(function($controllerProvider, $compileProvider, $filterProvider, $provide) {
//这段代码在这里是必须加  
 app.register = {
            //得到$controllerProvider的引用
            controller: $controllerProvider.register,
            //同样的,这里也可以保存directive/filter/service的引用
            directive: $compileProvider.directive,
            filter: $filterProvider.register,
            service: $provide.service
        };
    })
    app.config(['$stateProvider', '$urlRouterProvider', function($stateProvider, 		$urlRouterProvider) {
        $stateProvider
            .state("list", {
                url: "/list",
                controller: 'listCtrl',
                templateUrl: 'app/list/list.html',
                resolve: {
                    loadCtrl: ["$q", function($q) {
                        var deferred = $q.defer();
                        //异步加载controller/directive/filter/service
                        require([
                            'list/list.controller'
                        ], function() { deferred.resolve(); });
                        return deferred.promise;
                    }]
                }
            })
            .state("show", {
                url: "/show",
                controller: 'showCtrl',
                templateUrl: 'app/show/show.html',
                resolve: {
                    loadCtrl: ["$q", function($q) {
                        var deferred = $q.defer();
                        //异步加载controller/directive/filter/service
                        require([
                            'show/show.controller'
                        ], function() { deferred.resolve(); });
                        return deferred.promise;
                    }]
                }
            })
    }])
    return app;
});
 //控制器controller.js内容
define(['app'],function(app){
	app.register.controller('listCtrl', function($scope){
		$scope.title = 'listlist'
		console.log(1111)
	})
});
html内容就不用展示了吧!       以上;;;

  写了demo;这里放上链接:

requirejs方式                oclazyload方式

不知道是我太笨还是怎么,这个编辑器让我很无奈,结构感觉很乱;如果有什么问题可以提出来,虽然不是立刻回复但肯定也不会隔太长时间;
阅读更多
想对作者说点什么?

博主推荐

换一批

没有更多推荐了,返回首页