angular与require构建项目
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);
}
});
});