Daten zwischen Controllern übergeben

Question

Ich behaupte, AngularJS zu lernen, von vielen verschiedenen MV * Frameworks. Ich mag das Framework, aber ich habe Probleme mit der Weitergabe von Daten zwischen Controllern.

Angenommen, ich habe einen Bildschirm mit einigen Eingaben (input.html) und einem Controller, sagen wir InputCtrl.
Es gibt eine Schaltfläche in dieser Ansicht, die Sie zu einem anderen Bildschirm führt, sagen wir genehmigen (approve.html) mit einem Controller ApproveCtrl.
Diese ApproveCtrl benötigt Daten von der InputCtrl. Dies scheint ein sehr häufiges Szenario in größeren Anwendungen zu sein.

In meinem vorherigen Rahmen MV *, würde dies wie (Pseudo-Code) werden behandelt:

var self = this; 
    onClick = function() { 
      var approveCtrl = DI.resolve(ApproveCtrl); 
      approveCtrl.property1 = self.property1; 
      approveCtrl.property1 = self.property2; 
      self.router.show(approveCtrl); 
    }    

• Es wäre zunächst wie Controller- arbeiten. Sie erstellen zuerst den Controller und haben eine Chance, ihn in den richtigen Zustand zu versetzen. Danach wird die Ansicht erstellt.

nun in AngularJS, ich bin der Handhabung dieses wie:

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

• Dies funktioniert wie View-zuerst. Sie sagen, zu welcher Ansicht/Route navigiert werden soll, der Controller wird vom Framework erstellt.

Ich finde es schwierig, den Zustand des erstellten Controllers zu steuern und Daten an ihn zu übergeben. Ich habe folgende Ansätze gesehen und versucht, aber alle haben es eigene Probleme meiner Meinung nach ist:

1. Injizieren eines Shared-Service in InputCtrl & ApproveCtrl und setzen alle Daten auf diesen Dienst geteilt werden
   • Das sieht wie ein schmutziges Work-around; der Zustand, in dem Shared Service wird globalen Zustand, während ich brauche es nur Daten
   • Die Lebensdauer dieser gemeinsamen Dienst an der ApproveCtrl passieren ist viel mehr als das, was ich brauche es für - nur Daten an die ApproveCtrl
   passieren
2. Führen Sie die Daten in $ routeParams
   • Dies wird ziemlich chaotisch, wenn
     • Con viele Parameter
   • Verwenden $ Umfang Ereignisse den Pass mit Zeptually, das ist nicht etwas, wofür ich Ereignisse verwenden würde - ich muss nur Daten an die ApproveCtrl übergeben, nichts ereignis-ish
   • Dies ist ziemlich umständlich; Ich habe zuerst ein Ereignis an die Eltern zu schicken, das wäre es dann zu übertragen, um es Kindern

ist Bin ich hier etwas fehlt? Erstelle ich zu viele kleine Controller? Versuche ich hier zu sehr, Gewohnheiten von anderen Frameworks zu halten?

Answer 1

In Bezug auf die Struktur AngularJS ist mehr Modular als MVC eins.

Klassische MVC beschreibt 3 einfache Ebenen, die so miteinander interagieren, dass der Controller Modell mit Ansicht (und Modell sollte nicht lieber direkt mit Ansicht arbeiten oder umgekehrt).

In Angular können Sie mehrere haben, Organisationen einige völlig optional, die untereinander in vielfältiger Weise, beispielsweise in Wechselwirkung treten können:

Deshalb gibt es mehrere Möglichkeiten der Kommunikation Ihre Daten zwischen verschiedenen Entitäten. Sie können:

• Nachrichten senden direkt zwischen Controllern difference between this and $scope
• Nachrichten senden using events
• Nachrichten senden using shared system (Hinweis: gleiche Verbindung wie oben Antwort zeigt beide Techniken)

oder

• Senden Sie Nachrichten mit AJAX-Back-End
• Senden von Nachrichten mit externem System (zB MQ)

... und vieles mehr. Aufgrund seiner Vielfältigkeit erlaubt es Angular dem Entwickler/Designer zu entscheiden, wie er sich am wohlsten fühlt und weiter macht. Ich empfehle zu lesen AngularJS Developer Guide, wo Sie gesegnete Lösungen für einige häufige Probleme finden können.

Answer 2

Wenn Sie Ihre Daten einfach zwischen zwei Ansichten teilen möchten, ist wahrscheinlich ein Dienst der richtige Weg. Wenn Sie an einem Datenspeicher weiterarbeiten möchten, sollten Sie eine Art Back-End-Dienst wie eine REST-API in Erwägung ziehen. Werfen Sie einen Blick auf den $ http-Dienst dafür.

Answer 3

Auch wenn XLII eine vollständige Antwort gab, fand ich dieses Tutorial mit einem Service. Es ist sehr interessant und eine einfache Möglichkeit, Daten zwischen Controllern zu teilen, die die 2-Wege-Bindungseigenschaft verwenden: https://egghead.io/lessons/angularjs-sharing-data-between-controllers

Ich habe es immer noch nicht für jetzt verwendet.

Ansonsten gibt es auch diese andere Art und Weise, basierend auf Ereignissen: http://www.objectpartners.com/2013/08/21/using-services-and-messages-to-share-data-between-controllers-in-angularjs/

Answer 4

Wenn Sie Daten einfacher String von einer Seite zu übergeben (Seite1) auf eine andere Seite (Seite 2), einer Lösung traditionellen URL-Parameter verwenden . Rufen Sie die Route2-URL mit Parametern wie "/ page2/param1/param2" auf. Der Controller von page2 empfängt die Parameter in "routeParams". Sie können auf Parameter wie routeParams.param1 und routeParams.param2 zugreifen.Der folgende Code wird von angenommen: How to get the url parameters using angular js

Invoke der page2 Route von Seite1 des Controllers (js) oder einer URL in seiner html mit Parametern wie:

"/page2/param1/param2" 

Page2 Route:

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

Und die Steuerung:

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

Jetzt können Sie auf die Parameter zugreifen (param1 und pa ram2) Werte in der HTML/Vorlage Ihrer Seite2.