### 问题描述：
我们写文件时候都是要拆分文件的。 controller放到controller.js里 route放到router.js里 service放到service.js里 angularjs都是依据模块而生的。基础就是模块。然而一个单页应用的话只有一个模块对应许多的路由、控制、服务、指令什么的。（至少我这个项目就是一个模块） 单独的一个js文件放这么多内容不觉得臃肿吗。（肯定臃肿） 现在想问的问题就是如果拆分这个js文件分成很多不同的js文件。如何保证其在一个模块中应用呢。 查了很多资料都没有很好的解释。来个前辈给解释下吧。
### 环境配置和组件：
MEAN+angular-ui-router+requirejs angular是1.4.6
### 自己的一些尝试：
angularAMD没看明白。如果有大神给节食下最好了。 然后尝试使用了requirejs 封装成了以下代码
js文件 app.js
define(function(){ var app=angular.module(‘index’,[]); return app; })
html文件index.html
<!DOCTYPE html> <html ng-app=“index”> <head ng-controller=“setTitle”> <title ng-bind=“title”></title> <script type=“text/javascript” src=“javascripts/angular-1.4.6/angular.js”></script> <script type=“text/javascript” src=“angular-ui-router/release/angular-ui-router.js”></script> <ng-include src="’/public.html’"></ng-include> </head> <body>
<header ng-controller=“body”> <h1 ng-bind=“title”></h1> <p>Welcome to <span ng-bind=“title”></span></p> <p ng-bind=“returnStr”></p> </header> <section ng-controller=“changeLocation”> <input class=“btn btn-success” type=“button” value=“login” ng-click=“toLogin()”/> <input class=“btn btn-danger” type=“button” value=“register” ng-click=“toRegister()”/> </section> <section ui-view=""></section> </body> <script src=“requirejs/require.js” data-main=“javascripts/JF_index.js”></script> <!–<script type=“text/javascript”> require.config({ baseUrl:’/public’ }) require(’’); </script>–> <!–<script type=“text/javascript” src=“javascripts/service/commVal.js”></script> <script type=“text/javascript” src=“javascripts/Users/JF_login.js”></script>–>
</html>
然后报错。。
在node社区问angular问题。我也是独一份了。但是这个问题困扰了我很长时间所以抱着死马当作活马医的心态提的问题。 此问题我已经找到替代方案。 虽然这里都是大拿但是也备不住有新人跟我有同样的疑问。我就在此记录下。 首先angularAMD是个好东西，学习能力强的小伙伴可以去看下。绝对能解决我问的这个问题。 除此之外。
ocLazyLoad.js
是个好东西。可以解决angular按需加载的要求，将angular的js文件拆分。 如果有其他的好东西，请留言分享。
各种 controller service … 之类都可以无序引入的，所以工作中我一般的做法是分文件写，最后 src/**/*.js 用 gulp 一股脑打包即可。 然后 bootstrap 启动放最后
说句题外话，现在 ng1 已经过时了
angularjs里比较小的应用的话我就是直接一个模块，自己的代码全写在一个模块里，最后gulp成一个main.js. 比较大的angular应用在4.0之后的版本有支持lazyload,根据不同功能加载不同模块。具体写法官方文档也是有的 至少目前我工作里是根据路由划分模块的,公用的写在一个share模块里。强烈建议尝试下angular,毕竟ng1确实是过去时了
1.0+ 一般用gulp 打包的吧 var loadModules = [‘ngRoute’，‘mouduleName’]; var myApp = angular.module(‘myApp’, loadModules); myApp.run(function ($rootScope, $state) { }); var mouduleName = angular.module(‘mouduleName’, []);
mouduleName.controller(‘LoginController’, function ($scope, $rootScope, $state) { });
