1.angular模块化
angular可以把代码分成若干模块，然后一个模块可以依赖在模块，使用子模块的功能。被依赖的模块需要在本模块之前被加载。如下所示，app模块依赖Module1和Module2模块。
var app = angular.module("app",[Module1,Module2]);
2.require
能够使应用异步按需加载模块，管理模块的依赖性。子模块加载完成后，本模块再加载，并且子模块的加载是异步的。
3.angular与require构建项目
使用angular开发单页面应用时，需要预先加载应用所需的所有子模块。
使用angular与require共同构建项目，可以实现模块加载，提高网页响应速度。把子功能分别写到子angular模块中, 当某个html页需要依赖某个或某几个模块时，使用require异步加载需要的子模块，子模块加载后，与网页对应的js文件加载，并手动启动anugular。
以下面的代码为例，一个展示用户列表的html页，在文件下面指定加载user.js文件，html与user.js依赖Paging.js和name_Filter.js文件。paging.js和name_filter.js文件加载完后再加载user.js，最后启动angular。paging.js包含一个分页自定义指令，name_filter.js包含有名字过滤器。
<html> <head> </head> <body> <div ng-controller="UserCtr"> <ul> <li ng-repeat="item in users"> name:<span ng-bind="id | nameFilter"></span> age:<span ng-bind="item.age"></span> </li> </ul> <paging num="10"> </paging> </div> </body> <script src="/user.js"></script> </html>
/* *user.js */ require(['/name_filter','/paging'],function(){ var app = angular.module("User",['NameFilter','ngPage']); app.controller('UserCtrl',[$scope,function($scope){ $scope.users = [{id:1,age:20},{id:2,age:25},{id:3,age:35}] .... }] }); //启动angular angular.bootstrap(document,[“User”]);
/* *paging.js */ define(["angular"], function(angular){ var page = angular.module("ngPage",[]); page.directive("paging",function(){ return{ restrict:"AE", scope:{ load:"&", num:"@", ... }, templateUrl:/paging.html, link:function(scope,element,attrs){ ... } } }); })
/* *name_filter.js */ define(["angular"],function(angular){ var app= angular.module("NameFilter",[]); app.filter("getName",function(){ var users={1:Lily,2:Lucy,3.Rose} return function(id){ return users(id); } }); });