Schwere Controller-Kommunikation in AngularJS
Ich habe eine einseitige Anwendung mit AngularJS implementiert. Die Seite besteht aus einem Inhaltsbereich in der Mitte und Abschnitten, die um das Zentrum herum angeordnet sind, die zusätzliche Informationen anzeigen und Mittel zum Manipulieren des Zentrums bereitstellen.
Jedem Abschnitt (namens Side Info ) und dem Inhaltsbereich ist ein separater AngularJS-Controller zugewiesen. Derzeit kommuniziere ich über $rootScope.$broadcast und $scope.$on() , z. B.
Ich rufe dann zur Kommunikation mit anderen Controllern auf:
%Vor%Ich habe ziemlich viel Kommunikation zwischen den Controllern. Vor allem, wenn im Content-Bereich etwas passiert, müssen mehrere Side-Info-Elemente übernommen werden. Umgekehrt kommt es auch häufig vor: Ein Benutzer sendet ein Formular (in einer Side-Info) und der Inhaltsbereich und andere Side-Info-Elemente müssen übernommen werden.
Meine Frage:
Gibt es eine bessere Möglichkeit, SPA mit starker Controller-Kommunikation zu behandeln?
Der Code funktioniert gut, aber es wird schon etwas unordentlich (z. B. ist es schwer zu finden, welche Ereignisse wo behandelt werden etc.). Da die Anwendung wahrscheinlich in den nächsten Wochen stark wachsen wird, möchte ich diese Änderungen (wenn es bessere Lösungen gibt) so schnell wie möglich machen.
4 Antworten
Das ist wirklich interessant. Pub / Sub sollte hier eine richtige Lösung sein.
Sie können Ihrem Projekt zusätzliche Aufträge hinzufügen, indem Sie die
Aber das Projekt wird auf diese Weise besser organisiert sein.
Zum Beispiel - SideInfo1Service wird ein Service / Modell sein. Jede Änderung der Eigenschaft wird eine beobachtbare Änderung auslösen, die alle Listener ändert:
%Vor%Sie können diese wirklich interessanten Blogposts über die Verwendung von Angular Services als Ihr MVC-Modell finden:
Und in diesem Beitrag geht es um beobachtbares Muster in Angularjs:
Ich hoffe, das könnte hilfreich sein (:
Sie haben mehrere Optionen, um Broadcast-Anrufe zu vermeiden:
-
Teilen Sie Daten zwischen Controllern mit Diensten, wie sie in den Kommentaren erwähnt wurden. Sie können sehen, wie das geht: Ссылка
-
Erstellen Sie einen Hauptcontroller für die gesamte Seite und untergeordnete Controller für jeden Abschnitt (Inhaltsbereich und Seiteninfo). Verwenden Sie die Prototypvererbung des Bereichs. Zum Beispiel:
wenn im Hauptcontroller:
$scope.myObject = someValue;
In untergeordneten Controllern können Sie Folgendes festlegen:
$scope.myObject.myProperty = someOtherValue;
Sie können myObject.myProperty von Ihrem Hauptcontroller aus aufrufen
Sie können
verwenden %Vor%weil es nach oben geht und rootscope die oberste Ebene ist
verwenden
%Vor%um das Ereignis abzufangen
Dann haben Sie eine Kommunikation auf der gleichen Ebene der rootscope ohne Blasenbildung
Hier ist mein implementierter Eventbus-Service
Bearbeiten : Sie können einen Namensraum wie etwas: Ereignis verwenden, um Ihre Ereignisnamen besser zu gruppieren und zu organisieren und Protokollausgaben hinzuzufügen, wenn das Ereignis ausgelöst wird Fang, damit du leicht herausfinden kannst, ob er den falschen Ereignisnamen auslöst oder fängt.
Tags und Links javascript angularjs