在不使用构建工具的前提下，多人开发使用一个js或css文件开发是很不好的，对性能也不太好，
因为有可能文件太大而所需的内容又占比很小，每个页面要用到的内容少，但全部页面的内容合在一起
这样就不太好的，有点冗余，所以按需加载是最好的，每个文件的功能也明确。
而angularJs有指令，过滤器，服务，控制器，路由，这些明确分配的功能。
使用requireJs、oclazyload、angular-ui-router配合使用，构建一个按需加载的项目。
目录:
以这个目录为基础。
当然网上还有很多关于angular目录。
如果可以使用webpack，可以直接脚手架，angular-cli。
index.html
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="initial-scale=1,maximum-scale=1,minimum-scale=1,user-scalable=no"> <title>webapp</title> <link rel="stylesheet" href="./style/index.css" media="screen" title="no title" charset="utf-8"> </head> <body> <div ui-view></div> <script> document.querySelector("html").style.fontStyle = window.screen.width / 10 + "px"; </script> <script src="./vendor/require.js" data-main="./script/main.js" charset="utf-8"></script> </body> </html>
main.js
require.config({ paths: { "angular": "../vendor/angular/angular.min", "router": "../vendor/angular-ui-router/release/angular-ui-router.min", "cookies": "../vendor/angular-cookies/angular-cookies.min", "validation": "../vendor/angular-validation/dist/angular-validation", "animate": "../vendor/angular-animate/angular-animate.min", "ocLazyLoad": "../vendor/ocLazyLoad.require", "app": "./app", "config-router": "./config/router" }, shim: { "router": ["angular"], "cookies": ["angular"], "validation": ["angular"], "animate": ["angular"], "ocLazyLoad": ["angular"], "app": ["ocLazyLoad","router","cookies","validation","animate"], "config-router": ["app"] } }); require(["config-router"],function(){ angular.bootstrap(document.body, ['app']); });
app.js
'use strict'; var app = angular.module("app",["ui.router","oc.lazyLoad","ngCookies","validation","ngAnimate"]);
router.js
/* 如果要配置公共的指令和过滤器或者服务要到main.js配置依赖，直接加载 */ /* 配置动态加载文件的配置对象，这里加载都是去缓存的 */ var routerConfigObj = [ { 'name': 'main', 'controller：''mainCtrl', 'templateUrl': 'view/main.html', 'files': ["./style/main.css","./script/controller/mainCtrl.js","./script/directive/head.js","./script/directive/foot.js","./script/service/cache.js"] }, { 'name': 'login', 'controller：''loginCtrl', 'templateUrl': 'view/main.html', 'files': ["./style/main.css","./script/controller/loginCtrl.js","./script/directive/head.js","./script/directive/foot.js","./script/service/cache.js"] } ]; //config里面注入的都是服务带Provider后缀 app.config(['$stateProvider', '$urlRouterProvider','$controllerProvider','$compileProvider','$filterProvider','$provide','$ocLazyLoadProvider', function($stateProvider,$urlRouterProvider,$controllerProvider,$compileProvider,$filterProvider,$provide,$ocLazyLoadProvider){ /* controller需要在config重新注册后才能使用resolve生效按需加载 其他的按需加载以一样，如指令directive */ app = { controller: $controllerProvider.register, directive: $compileProvider.directive, filter: $filterProvider.register, factory: $provide.factory, service: $provide.service }; $ocLazyLoadProvider.config({ debug: true }); routerRegsiter($stateProvider,routerConfigObj); // 默认重定向路径 $urlRouterProvider.otherwise('main'); }]); /*$ocLazyLoad 的require版本使用的是require加载js，所以cache去除缓存不生效，要在require里去除缓存*/ /*resolve 会先加载后注入到controller里,所它的键值对的键就是注入名*/ function routerRegsiter($stateProvider,objArr){ objArr.forEach(function(item){ $stateProvider.state(item.name,{ url: '/'+item.name, templateUrl: item.templateUrl, controller: item.controller, resolve: { deps: ["$ocLazyLoad",function($ocLazyLoad){ return $ocLazyLoad.load([{ files:item.files.map(function(t){return t+"?"+(new Date()).getTime();}) }]); }] } }); }); }
routerConfigObj 变量是配置路由、控制器等按需加载的配置地方。
routerRegsiter会循环routerConfigObj 配置路由。
以上是所有的代码，剩下的就是按需加载文件的编写。
这只是初步的使用，具体的使用还是要按照项目的需求建构，比如子页面的加载，多页面的配置，多控制器等。