angular與require構建項目

時間 2020-03-21

標籤 angular require 構建項目欄目 AngularJS 简体版

原文原文鏈接

1.angular模塊化html

angular能夠把代碼分紅若干模塊，而後一個模塊能夠依賴在模塊，使用子模塊的功能。被依賴的模塊須要在本模塊以前被加載。以下所示，app模塊依賴Module1和Module2模塊。bootstrap

var app = angular.module("app",[Module1,Module2]);app

2.require異步

可以使應用異步按需加載模塊，管理模塊的依賴性。子模塊加載完成後，本模塊再加載，而且子模塊的加載是異步的。模塊化

3.angular與require構建項目ui

使用angular開發單頁面應用時，須要預先加載應用所需的全部子模塊。spa

使用angular與require共同構建項目，能夠實現模塊加載，提升網頁響應速度。把子功能分別寫到子angular模塊中, 當某個html頁須要依賴某個或某幾個模塊時，使用require異步加載須要的子模塊，子模塊加載後，與網頁對應的js文件加載，並手動啓動anugular。rest

如下面的代碼爲例，一個展現用戶列表的html頁，在文件下面指定加載user.js文件，html與user.js依賴Paging.js和name_Filter.js文件。paging.js和name_filter.js文件加載完後再加載user.js，最後啓動angular。paging.js包含一個分頁自定義指令，name_filter.js包含有名字過濾器。code

<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

項目管理與構建

require

grunt+require+angular

gulp+require+angular

angular+require+ngroute+bootstrap

每日一句

每一个你不满意的现在，都有一个你没有努力的曾经。