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);
          }
    });
}); 

 

查看更多关于angular与require构建项目的详细内容...