Angular.js организует контроллеры в пространстве имен приложений

Я начинаю использовать Angular.js в новом проекте и из основных уроков, я вижу в основном один файл controller.js, который содержит все функции контроллера, каждый из которых привязан к объекту окна.

Кажется, что лучше использовать существующее пространство имен "myApp", чтобы добавить контроллеры, например:

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

Все контроллеры будут частью созданного объекта "myApp.controllers" или "window.myApp.controllers".

Кто-нибудь предлагает лучший или более организованный способ обработки контроллеров или других элементов, настраиваемых сервисов, директив и т.д., будет использовать ту же структуру.

В дополнение к этому, я обсуждаю вопрос о включении каждого контроллера в его собственный файл, который в конечном итоге будет объединен для производства, но в зависимости от размера приложения он может быть немного избыточным и только вызывает больше отскока работы между файлами.

Приветствуются любые предложения.

Спасибо!

Ответ 1

Отличный вопрос!

Мне не нравится, что учебники и документация применяют "пакет за слоем" подход к их коду. Я думаю, что это, вероятно, сделано для удобства преподавания концепций, что здорово, но этот подход имеет ограниченную применимость в реальном мире.

Пакет по функциям - гораздо лучший подход:

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

Внутри src/app вы можете упаковать свое содержимое на основе раздела сайта, на котором вы работаете (например, меню) и маршрутов (например, списка продуктов и деталей продукта). Каждый из них может быть объявлен следующим образом:

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. Проверьте это!

Обновление:. После этого ответа я начал проект kickstarter/template проекта AngularJS под названием ngBoilerplate, чтобы инкапсулировать эти понятия (среди многих других лучших практик) и сложной системы сборки для их поддержки.

Ответ 2

Я обычно делаю

(angular
 .module('app.controllers', ['ng', ...])
 .controller('myContrA', [
     /******/ '$scope',
     function ($scope) {
     }
 ])
 .controller('myContrB', [
     /******/ '$scope',
     function ($scope) {
     }
 ])
);

Таким образом вы можете добавить app.controllers в качестве зависимости и, таким образом, сделать все свои контроллеры доступными.