基於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
})

相關標籤/搜索

每日一句

每一个你不满意的现在，都有一个你没有努力的曾经。