angular与requireJs构建项目

Posted 2020-07-31 spring

1.angular模块依赖

angular可以把代码分成若干模块，然后一个模块可以依赖在模块，使用子模块的功能。被依赖的模块需要在本模块之前被加载。如下所示，app模块依赖Module1和Module2模块。

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

2.requireJs

能够使应用异步按需加载模块，管理模块的依赖性。子模块加载完成后，本模块再加载，并且子模块的加载是异步的。

3.按需加载

使用单页面开发时，应用启动时，主模块所依赖的子模块都要预先加载完。使用angular与requireJs共同构建项目，可以实现模块按需加载，提高网页响应速度。

require([‘/nameFilter‘,‘/Paging‘],function(nameFtl,ngPaging){
    var app = angular.module("User",[‘nameFtl‘,‘ngPaging‘]);
    app.controller(‘UserCtrl‘,[$scope,function($scope){
     ....
    }]
});

//启动angular
angular.bootstrap(document,["User"]);

<div ng-controller="UserCtr">
     <lable ng-bind="id | nameFilter"></lable>
</div>
<paging num="pageNum">
</paging>