基于requirejs和oclazyloadjs的实际按需加载的angular项目

项目github地址：https://github.com/xingkongwuyu/angular-require-oclazyload

index.html
<!DOCTYPE html >
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
<div ui-view ></div>
<script src="js/lib/require.js" data-main="./js/main"></script>
</body>
</html>

首先angular项目中加载必须模块；通过requirejs来进行设置进口：data-main="main"

加载了main.js

main.js 对js的地址进行了配置简化 主要代码

// 初始化myModule模块
require(['app'], function () {
    angular.bootstrap(document, ['qiyepeixun'])

})

注意这里的app指的是require.config中配置的app其指向的是app.js文件
require.config({
    //baseUrl: 'js',
    paths: {
        'app': 'app',
        'angular': 'lib/angular.min',
        'router': 'lib/angular-ui-router',
        'oclazyload':'lib/oclazyload',
        'cookies': 'lib/angular-cookies',
        'jquery':'lib/jquery-3.1.0.min',

    },
    shim: {
        'angular': {
            exports: 'angular'
        },
        'jquery':{
            exports:'jquery'
        },
        'router': {
            deps: ['angular']
        },
        'app': {
            deps: ['router']
        }
    }
})
// 初始化myModule模块
require(['app'], function () {
    angular.bootstrap(document, ['qiyepeixun'])

})

 

module.controller的controller定义方式无法满足App启动之后的controller动态定义

$controllerProvider的register方法来动态定义controller

相对应的这段代码，    动态加载控制器，指令，服务，过滤

        app.register = {
            //得到$controllerProvider的引用
            controller : $controllerProvider.register,
            //同样的，这里也可以保存directive／filter／service的引用
            directive: $compileProvider.directive,
            filter: $filterProvider.register,
            service: $provide.service
        };

接下来就是route的设置了，

根据resolve中的

app.js中设置了路由

$ocLazyLoadProvider.config({
            loadedModules: ['qiyepeixun'],
            jsLoader: require
})
这个表示设置oclazyload的参数，模块，依赖于require加载，模块的名称
然后就是路由的设置了，这里有设置controller：为相应resolve中文件中的controller

$urlRouterProvider.otherwise("/index");
$stateProvider
    .state('index', {
        url: "/index",
        templateUrl: "view/login/login.html",
        controller:"appCtrl",
        resolve: {
            deps:["$ocLazyLoad",function($ocLazyLoad){
                return $ocLazyLoad.load('js/controller/login/appCtrl.js');
            }]
        }
    });
define(['angular','router', 'oclazyload'],function() {
    var app = angular.module("qiyepeixun", ['ui.router', 'oc.lazyLoad']);
    //定义全局变量
    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(['$ocLazyLoadProvider','$stateProvider','$urlRouterProvider',function($ocLazyLoadProvider,$stateProvider, $urlRouterProvider){
        $ocLazyLoadProvider.config({
            loadedModules: ['qiyepeixun'],
            jsLoader: require
        })

        $urlRouterProvider.otherwise("/index");
        $stateProvider
            .state('index', {
                url: "/index",
                templateUrl: "view/login/login.html",
                controller:"appCtrl",
                resolve: {
                    deps:["$ocLazyLoad",function($ocLazyLoad){
                        return $ocLazyLoad.load('js/controller/login/appCtrl.js');
                    }]
                }
            });
    }]);
    return app
})

 

posted @ 2017-03-20 20:27  莺哥  阅读(349)  评论(0)  编辑  收藏  举报