项目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 })