Передавать данные между контроллерами

Я заявляю, что изучаю AngularJS, исходя из множества различных структур MV *. Мне нравится фреймворк, однако у меня возникают проблемы с передачей данных между контроллерами.

Предположим, что у меня есть экран с некоторым вводом (input.html) и контроллер, пусть говорят InputCtrl.

Там есть кнопка на этом представлении, которая выводит вас на другой экран, допустим утвердить (approve.html) с помощью контроллера ApproveCtrl.

Для этого ApproveCtrl нужны данные из InputCtrl. Это похоже на очень распространенный сценарий в больших приложениях.

В моих предыдущих структурах MV * это обрабатывалось бы как (псевдокод):

   var self = this;
   onClick = function() {
          var approveCtrl = DI.resolve(ApproveCtrl);
          approveCtrl.property1 = self.property1;
          approveCtrl.property1 = self.property2;
          self.router.show(approveCtrl);  
   }
  • Сначала это будет работать как Controller. Сначала вы создаете контроллер, имея возможность поместить его в правильное состояние; после этого создается представление.

Теперь, в AngularJS, я обрабатываю это как:

 var self = this;
 onClick = function(){
          self.$locationService.path('approve');       
 }
  • Это работает как View-first. Вы говорите, какой вид/маршрут для навигации, контроллер создается каркасом.

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

  • Ввести общую службу в InputCtrl и ApproveCtrl и поместить все данные в эту службу
    • Это похоже на грязную работу; состояние в общей службе становится глобальным состоянием, а мне просто нужно передать данные в ApproveCtrl
    • Срок службы этой общей службы длиннее, чем для нее, - просто для передачи данных в ApproveCtrl
  • Передайте данные в $routeParams
    • Это становится довольно беспорядочным, когда у вас много параметров.
  • Использовать события $scope
    • Концептуально, это не то, что я использовал бы для событий - мне просто нужно передать данные в ApproveCtrl, ничего event-ish
    • Это довольно громоздко; Я должен сначала отправить событие родительскому, которое затем передало бы ему его детям.

Я что-то упустил? Я создаю слишком много маленьких контроллеров? Я слишком много стараюсь придерживаться привычек из других фреймворков?

Ответы

Ответ 1

В терминах структуры AngularJS является более модульным, чем MVC.

Классический MVC описывает 3 простых слоя, которые взаимодействуют друг с другом таким образом, что контроллер строит модель с представлением (а модель не должна работать с View напрямую или наоборот).

В Angular у вас могут быть несколько, совершенно необязательных объектов, которые могут взаимодействовать друг с другом несколькими способами, например:

Possible Interactions

Вот почему существует несколько способов передачи данных между различными объектами. Вы можете:

или

  • Отправка сообщений с использованием бэкэнда AJAX
  • Отправка сообщений с использованием внешней системы (например, MQ)

... и многое другое. Благодаря своему разнообразию Angular разработчик/дизайнер может выбрать способ, которым они наиболее удобны и несут. Я рекомендую прочитать Руководство разработчика AngularJS, где вы можете найти благословенные решения для некоторых распространенных проблем.

Ответ 2

Если вы намерены просто обмениваться данными между двумя видами, возможно, это сервис. Если вы заинтересованы в сохранении хранилища данных, вам может потребоваться какая-то вспомогательная служба, такая как REST API. Взгляните на сервис $http для этого.

Ответ 3

Даже если XLII дал полный ответ, я нашел этот учебник, используя сервис. Это очень интересный и простой способ обмена данными между контроллерами, используя свойство 2-х связывания: https://egghead.io/lessons/angularjs-sharing-data-between-controllers

Я до сих пор не использовал его.

В противном случае существует и этот другой способ, основанный на событиях: http://www.objectpartners.com/2013/08/21/using-services-and-messages-to-share-data-between-controllers-in-angularjs/

Ответ 4

Если вы хотите передать простые строковые данные с одной страницы (стр. 1) на другую страницу (стр. 2), одним из решений является использование традиционных параметров URL. Вызовите URL-адрес маршрута page2 с параметром, например "/page2/param1/param2" . Контроллер страницы2 получит параметры в " routeParams". Вы сможете получить доступ к параметрам как routeParams.param1 и routeParams.param2. Код ниже принят из: Как получить параметры URL с помощью angular js

Вызовите маршрут page2 из контроллера page1 (js) или url в своем html с параметрами как:

"/page2/param1/param2"

Page2 route:

$routeProvider.when('/page2/:param1/:param2', {
    templateUrl: 'pages/page2.html',    
    controller: 'Page2Ctrl'
});

И контроллер:

.controller('Page2Ctrl', ['$scope','$routeParams', function($scope, $routeParams) {
  $scope.param1 = $routeParams.param1;
  $scope.param2 = $routeParams.param2;
  ...
}]);

Теперь вы можете получить доступ к параметрам (param1 и param2) в вашем html/template page2.