前言
简单说明一下遇到场景：内网调试，没有环境，没有构建工具gulp grunt webpack，所以没有办法整合打包。
但是要求项目分模块，好维护等。
...
解决方案：
通过路由模块懒加载
下面开始一一步搭建工程
angular思想还是挺不错的，前几年来说。
工程结构
demo
---css //公共css
---common.css
---directive //指令
---echartsBar.js
---images
---lib
---node_module
---server
---server.js
---views
---main_tpl.html
---mainCtrl.js
---header//头部
---header_tpl.html
---headerCtrl.js
---header_tpl.css
---navBar//左侧导航
---navBar_tpl.html
---navBarCtrl.js
---navBar.css
---index//主页
---index_tpl.html
---indexCtrl.js
---index.css
---app.js
---index.html
---package.json
基础代码index.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>angularjs</title>
<link rel="stylesheet" type="text/css" href="css/style.css">
</head>
<body>
<div ui-view=""></div>
<script type="text/javascript" src="node_modules/angular/angular.min.js"></script>
<script type="text/javascript" src="node_modules/@uirouter/angularjs/release/angular-ui-router.min.js"></script>
<script type="text/javascript" src="node_modules/oclazyload/ocLazyLoad.min.js"></script>
<script type="text/javascript" src="app.js"></script>
</body>
</html>
基础代码main_tpl.html（主要看ui-view即可）
<div class="layui-layout layui-layout-admin">
<div ui-view="header" class="layui-header"></div>
<div ui-view="navBar" class="layui-side layui-bg-black"></div>
<div ui-view="content" class="layui-body"></div>
</div>
基础代码header_tpl.html和navBar_tpl.htm、index_tpl.html等文件就偷懒了
重点是注入和注册，路由配置，在路由中引用$ocLazyLoad进行模块懒加载
var app = angular.module('app', ["ui.router", "oc.lazyLoad"]);
app.config(["$provide", "$compileProvider", "$controllerProvider", "$filterProvider",
function($provide, $compileProvider, $controllerProvider, $filterProvider) {
app.controller = $controllerProvider.register;
app.directive = $compileProvider.directive;
app.filter = $filterProvider.register;
app.factory = $provide.factory;
app.service = $provide.service;
app.constant = $provide.constant;
}
]);
app.constant('Modules_Config', [{
name: 'treeControl',
serie: true,
files: []
}]);
app.config(["$ocLazyLoadProvider", "Modules_Config", routeFn]);
function routeFn($ocLazyLoadProvider, Modules_Config) {
$ocLazyLoadProvider.config({
debug: false,
events: false,
modules: Modules_Config
});
}
app.config(function($stateProvider, $urlRouterProvider, $locationProvider){
$locationProvider.hashPrefix(''); // 解决路由出现!的情况 /#!/
$urlRouterProvider.otherwise(''); //默认跳转
$stateProvider.state("main",{
url: '/main',
views: {
'': {
templateUrl: './views/mian_tpl.html',
controller: "mainCtrl",
controllerAs: "main",
resolve: {
deps: ["$ocLazyLoad", function($ocLazyLoad) {
return $ocLazyLoad.load([
"views/mainCtrl.js"
]);
}]
}
},
'header@wifi': {
templateUrl: './views/header/header_tpl.html',
controller: "headerCtrl",
controllerAs: "header",
resolve: {
deps: ["$ocLazyLoad", function($ocLazyLoad) {
return $ocLazyLoad.load([
"views/header/headerCtrl.js",
"views/header/hearder.css"
]);
}]
}
},
'navBar@wifi': {
templateUrl: './views/navBar/navBar_tpl.html',
controller: "navbarCtrl",
controllerAs: "navbar",
resolve: {
deps: ["$ocLazyLoad", function($ocLazyLoad) {
return $ocLazyLoad.load([
"views/navBar/navBarCtrl.js",
"server/server.js", //服务
"views/navBar/navBar.css"
]);
}]
}
}
}
})
}
补充说明一下：
1、模块中，所有内容，样式、指令、服务、控制器等都可以通过在路由中懒加载引入即可，当然公共的内容可以在index.html中引入，例如一些common.css等。
2、到这里注意到没有，index.html中只引入一个app.js，这个为什么这样做我就不多累赘了什么加载问题了。
3、敲黑板，看这里 这里var app = angular.module('app', ["ui.router", "oc.lazyLoad"]); app作为一个全局模块，可以看作一个全局变量处理,控制器服务指令等写法如下：
app.controller("mainCtrl",['$scope',function ($scope) {
}]);
app.factory("aServer", [ function() {
return {};
}]);
app.directive('adire', [
function() {
return {};
}
]);
好了，大神勿喷，有什么不足的欢迎留言哦，一起学习
