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

Question

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

Предположим, у меня есть экран с некоторым input (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);  
   }            

• Это будет работать как контроллер-в первую очередь. Сначала вы создаете контроллер, имея возможность перевести его в нужное состояние; после этого представление создается.

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

 var self = this;
 onClick = function(){
          self.$locationService.path('approve');       
 }

• Это работает как View-first. Вы говорите, к какому виду / маршруту перемещаться, контроллер создается фреймворком.

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

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

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

Answer 1

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

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

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

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

• Отправляйте сообщения напрямую между контроллерами, используя разницу между this а также $scope
• Отправлять сообщения, используя события
• Отправка сообщений с использованием общей системы (Примечание: та же ссылка, что и выше, ответ показывает оба метода)

или же

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

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

Answer 2

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

Answer 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/

Answer 4

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

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

"/page2/param1/param2"

Маршрут Page2:

$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 вашей страницы2.