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

时间 2019-12-05

标签基于 requirejs oclazyloadjs 实际按需加载 angular 项目栏目 JavaScript 繁體版

原文原文链接

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

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"jquery

加载了main.jsgit

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

// 初始化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动态定义bootstrap

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

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

        app.register = { //获得$controllerProvider的引用  controller : $controllerProvider.register, //一样的，这里也能够保存directive／filter／service的引用  directive: $compileProvider.directive, filter: $filterProvider.register, service: $provide.service };

接下来就是route的设置了，ide

根据resolve中的requirejs

app.js中设置了路由ui

$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
})