Блог

Главная - Вопросы по программированию - Разделение контроллеров в AngularJS

Разделение контроллеров в AngularJS

#javascript #angularjs

#javascript #angularjs

Вопрос:

Я пытаюсь разделить мои угловые контроллеры на разные файлы. Прямо сейчас каждый из них выглядит следующим образом.

AddPropertyController.js

 angular.module('myApp.controllers.addproperty', [])
    .controller(...);

SearchController

 angular.module('myApp.controllers.search', [])
.controller(...);

Теперь для каждого из них мне пришлось включить их в Angular MyApp. via:

 angular.module('myApp', [
        'myApp.controllers.search',
        'myApp.controllers.addproperty'
    ])

мой вопрос в том, есть ли способ просто включить их все сразу, вместо того, чтобы добавлять их по отдельности? Моей первой попыткой было присвоить каждому модулю одинаковое имя angular.module(‘MyApp.controllers’, …), а затем просто включить MyApp.controllers в приложение. Но, похоже, это не сработало… Я думаю, я спрашиваю, каков наилучший способ разделить файлы контроллера, но все в одном модуле. Спасибо за помощь!

Ответ №1:

Ознакомьтесь с документами angularjs для получения информации о контроллерах и добавлении их в модули уровня приложения…

Например, для вашего кода:

 var myApp = angular.module('myApp',[]);

myApp.controller('SearchController', ['$scope', function($scope) {
  $scope.search = 'Hola!';
}]);

myApp.controller('AddPropertiesController', ['$scope', function($scope) {
  $scope.props = [];
}]);

По сути, вы подключаете каждый контроллер к экземпляру MyApp, поэтому приложение знает о контроллерах.

Комментарии:

1. Я не думаю, что это помогает мне разделить контроллеры на разные файлы… Я имею в виду, что так у меня было изначально, но я использую более 20 контроллеров в сборках… Когда я разделяю их на разные файлы, у меня нет доступа к переменной MyApp, и если я пытаюсь воссоздать ее снова, я получаю ошибки.

2. @BrentAureli неверно, myApp находится в глобальном пространстве имен window. Я делаю это постоянно и имею myApp в многочисленных файлах …. директивы, контроллеры, службы и т.д. Намного проще, чем создавать модули, а затем отслеживать точки внедрения при добавлении / удалении

3. вы можете вызвать angular.module(‘MyApp’) — без второго аргумента, и он просто извлекет модуль (он не будет пытаться воссоздать его)

4. Это правда, если вы разделите вышеуказанные файлы на JS, предполагая, что myApp объявлено первым, все будет работать нормально…

5. ДА! После еще нескольких попыток ошибка определенно с моей стороны. Большое всем спасибо! Это сработало отлично!

Ответ №2:

Я бы организовал их следующим образом:

MyController1.js

   var MyController1 = ['$scope', function($scope) {

  }];

MyController2.js

   var MyController2 = ['$scope', function($scope) {
  }];

MyModule.js

   var app = angular.module('MyModule',[]);
  app.controller({
      MyController1: MyController1,
      MyController2: MyController2,
      etc
  });

Это похоже на то, как организован исходный код Angular:

  1. AngularPublic.js
  2. директивы ng