javascript – Angular.js将控制器整理到App命名空间中

我开始在一个新项目中使用Angular.js,从基本教程,我看到大多数一个controllers.js文件包含所有的控制器函数,每个都绑定到窗口对象。

似乎更好的做法是使用现有的“myApp”命名空间,添加控制器,例如:

myApp.controllers = {};
myApp.controllers.userItem = function($scope) {}

所有控制器都将是创建的“myApp.controllers”对象或“window.myApp.controllers”的一部分。

有人建议更好或更有条理的方式来处理控制器或其他项目,定制服务,指令等将使用相同的结构。

除此之外,我辩论关于将每个控制器放入自己的文件,最终将结合生产,但根据应用程序的大小,它可能有点过分,只会导致更多的工作弹跳在文件之间。

任何建议将不胜感激。

谢谢!

伟大的问题!

我不喜欢的教程和文档采取“逐层”的方法到他们的代码。我认为这可能是为了方便教学概念,这是伟大的,但这种方法在现实世界有限的适用性。

逐包特性是一个更好的方法:

|- README
|- src/
   |- app/
      |- app.js
      |- feature1/
      |- feature2/
      |- ...
   |- vendor/
      |- angular/
      |- bootstrap/
      |- ...
   |- assets/
   |- less/
   |- index.html

在src /应用程式中,您可以根据所处理网站的部分(例如菜单)和路线(例如产品清单和产品详情)封装您的内容。每个都可以这样声明:

angular.module( 'products', [
  'productCatalog',
  ...
])

每个模块可以有自己的路由:

.config( [ '$routeProvider', function( $routeProvider ) {
  $routeProvider.when( '/products', { ... } );
  $routeProvider.when( '/products/:id', { ... } );
});

和控制器等:

.controller( 'ProductListCtrl', [ '$scope', function ( $scope ) { ... } ]);

因此,所有的东西都在一起包装在同一个目录。你可以将所有的组件放在单独的文件中,每个文件一个模块(如果你愿意;我通常做)。在您的顶级应用程序中,您只需声明您的依赖关系:

angular.module( 'app', [
  'products',
  ...
]);

你也可以自己捆绑通用指令,以保持你的测试和文档一起 – 再次,通过功能!这些组件中的每一个都可以在将来的项目中拖放使用。

一个伟大的参考实现是angular-app.检查出来!

更新:自从这个答案,我开始一个AngularJS项目kickstarter /模板称为ngBoilerplate封装这些概念(许多其他最佳实践)和一个复杂的构建系统来支持他们。

http://stackoverflow.com/questions/14597062/angular-js-organize-controllers-into-app-namespace

本站文章除注明转载外,均为本站原创或编译
转载请明显位置注明出处:javascript – Angular.js将控制器整理到App命名空间中