组织AngularJS模块

时间:2014-08-22 20:16:50

标签: angularjs

我刚刚开始使用Angular并试图了解模块。

我的项目有两部分,我会考虑模块(名称和地点),我也有一般在网站上使用的通用控制器。

我的问题是,如何组织这些? (代码示例)

例如,我有这个通用控制器:

fb.controller( 'textareaGrow', function( $scope, $element ) {
var update = function() {
    var s = $element[0].scrollHeight;
    var h = $element[0].offsetHeight;
    if( s > h )
        $element.css( 'height', ( s - 26 ) + 'px' );
}
$element.bind( 'keyup keydown keypress change', update );
update();
});

我只需将其更改为:

angular.module('fb.generic', []).controller( 'textareaGrow',

或者,正如我所看到的那样,是按类型分组到模块中的礼仪吗?我正在查看的示例包含以下模块:控制器,工厂,服务等。

1 个答案:

答案 0 :(得分:2)

按模块拆分应用程序最明显的方法是按类型划分模块。

我们需要将这些模块作为主应用程序的依赖项注入,这使得它非常容易 为每个模块类型设置测试,并隔离和细分我们需要的功能 在编写规范时考虑到。 例如,我们可以为每个Angular对象类型创建一个模块:

angular.module('myApp.directives', []);
    angular.module('myApp.services', []);
    angular.module('myApp.filters', []);
    // Often time we'll want to use our services
    // inside of our controllers, so we'll inject
    // those into our 'myApp.controllers' module
    angular.module('myApp.controllers', [
   'myApp.services'
]);
angular.module('myApp', [
   'myApp.directives',
   'myApp.controllers',
   'myApp.filters',
   'myApp.services'
]);

这种方法的一个问题是它有时会给我们留下一堆非常小的模块。

这个结果不会影响性能,但开发起来可能很麻烦。 在路线上进行模块化

我们可以用来分解我们的应用程序的另一种方法是按路线划分我们的模块。这个细分 允许我们编写专注于每条路径功能的独立测试。通过路线模块化可以 根据项目的不同,更有意义;它允许我们有效地划分我们的功能 当我们处理很多独立路线时。 例如:

angular.module('myApp.home', []);
angular.module('myApp.login', []);
angular.module('myApp.account', []);
angular.module('myApp', [
   'myApp.home',
   'myApp.login',
   'myApp.account'
]);

当我们处理大量路线时,这种模块化特别有意义 和/或当我们在路线之间没有太多交叉时

来自ng-book