Ich möchte wissen, wie mehrere Controller für eine einzelne Seitenanwendung verwendet werden. Ich habe versucht, es herauszufinden, und ich habe Fragen gefunden, die meinen sehr ähnlich sind, aber es gibt nur eine Menge unterschiedlicher Antworten, die ein bestimmtes Problem lösen, bei dem Sie am Ende nicht mehrere Controller für eine einzelne Seiten-App verwenden.
Liegt das daran, dass es nicht ratsam wäre, mehrere Controller für eine einzelne Seite zu verwenden? Oder ist es einfach nicht möglich?
Nehmen wir an, ich habe bereits einen umwerfenden Image-Karussell-Controller auf der Hauptseite, aber dann lerne ich, wie man (sagen wir) Modalitäten verwendet, und ich brauche auch dafür einen neuen Controller (oder alles andere, was ich brauche). Was mache ich dann?
Ich habe einige Antworten auf andere Fragen gesehen, bei denen sie fast die gleichen Fragen stellen wie ich und die Leute antworten: "* OMG. Warum würden Sie das überhaupt tun, tun Sie das einfach ...".
Was ist der beste Weg oder wie machst du das?
Bearbeiten
Viele von Ihnen antworten, nur zwei Controller zu deklarieren und dann mit ng-controller aufzurufen. Ich benutze diesen Code unten und rufe dann MainCtrl mit ng-controller auf.
app.config(function($routeProvider, $locationProvider) {
$routeProvider
.when('/', {
templateUrl: "templates/main.html",
controller:'MainCtrl',
})
.otherwise({
template: 'does not exists'
});
});
Warum muss ich hier überhaupt einen Controller einstellen, wenn ich ng-controller nur ohne verwenden kann? Das hat mich verwirrt. (und Sie können auf diese Weise nicht zwei Controller hinzufügen, denke ich ...)
quelle
when: /home, controller: MainCtrl
. Kannst du nicht mehr hinzufügen, oder willst du es einfach mit dem ng-Controller aufrufen?Antworten:
Was ist das Problem? Um mehrere Controller zu verwenden, verwenden Sie einfach mehrere ngController-Anweisungen:
Sie müssen die Controller wie gewohnt in Ihrem Anwendungsmodul verfügbar haben.
Der einfachste Weg, dies zu tun, könnte so einfach sein, wie die Controller-Funktionen wie folgt zu deklarieren:
quelle
when /home, controller: MainCtrl
ng-controller
in mehreren DOM-Elementen hatte, ist beispielsweise in einem Szenario, in dem VIELE Elemente über das DOM gedruckt werdenng-repeat
. Nehmen wir an, jeder von ihnen ruft anng-controller="myController
. Aus einigen der Konsolenprotokolle, die ich in meiner Anwendung gesehen habe, wirdmyController
neu initialisiert, wobei JEDES Element in dem DOM gerendert wird, das es aufruft. Vielleicht habe ich etwas in meiner speziellen Verwendung vermasselt oder vielleicht außerhalb des Bereichs der OPs Frage, aber neugierig, ob andere das überhaupt erlebt haben ....Ich denke, Ihnen fehlt die Bedeutung "Single Page App".
Das bedeutet nicht, dass Sie physisch eine
index.html
HTML-Datei haben, sondern eine Haupt- und mehrere NESTED-HTML-Dateien. Warum also eine einseitige App? Auf diese Weise laden Sie Seiten nicht wie gewohnt (dh Browseraufruf, der die gesamte Seite vollständig aktualisiert), sondern laden nur den Inhaltsteil mit Angular / Ajax. Da Sie das Flackern zwischen den Seitenänderungen nicht sehen, haben Sie den Eindruck, dass Sie sich nicht von der Seite entfernt haben. Sie haben also das Gefühl, auf einer einzigen Seite zu bleiben.Nun gehe ich davon aus, dass Sie MEHRERE Inhalte für Ihre SINGLE PAGE-App haben möchten: (z. B. Home, Kontakte, Portfolio und Store. Ihre App für einzelne Seiten / mehrere Inhalte (im Winkel) wird folgendermaßen organisiert:
index.html
: enthält Kopf-<ng-view>
und Fußzeilecontacts.html
: enthält das Kontaktformular (keine Kopf- und Fußzeile)portfolio.html
: enthält die Portfolio-Daten (keine Kopf- und Fußzeile)store.html
: enthält den Speicher, keine Kopfzeile, keine Fußzeile.Sie befinden sich im Index, klicken auf das Menü "Kontakte" und was passiert? Angular ersetzt das
<ng-view>
Tag durch dencontacts.html
CodeWie erreichen Sie das? mit
ngRoute
, wie Sie es tun, werden Sie etwas haben wie:Dadurch wird das richtige HTML aufgerufen, das den richtigen Controller an ihn weitergibt (bitte beachten Sie: Geben Sie keine
ng-controller
Direktive an,contacts.html
wenn Sie Routen verwenden ).Dann können Sie natürlich so viele ng-controller-Anweisungen auf Ihrer contacts.html-Seite deklarieren. Dies sind untergeordnete Controller von
ContactCtrl
(und erben somit davon). Für eine einzelne Route können Sie jedoch innerhalb derrouteProvider
einen einzelnen Controller deklarieren, der als "Vater-Controller der Teilansicht" fungiert.BEARBEITEN Stellen Sie sich die folgenden Vorlagen / Kontakte vor
Das Obige
routeProvider
injiziert einen Controller in Ihr enthaltenes Div. Grundsätzlich wird das obige HTML automatisch:Wenn ich sage, dass Sie andere Controller haben können, bedeutet dies, dass Sie Controller wie folgt an innere DOM-Elemente anschließen können:
Ich hoffe das klärt die Dinge ein bisschen.
EIN
quelle
<div ng-controller="FancyStuffController">
in einem Body-Tag deklarieren, auf das bereits ein Controller angewendet wurde, z. B.<body ng-controller="BodyController">
funktioniert dies?$apply already in progress
Ich bekomme Fehler darüber, wann ich das mache, aber ich denke, es hängt mit dpd.js zusammen. Um nicht darauf einzugehen, denke ich, dass es nur zweimal geladen wird oder so, nicht sicher wie, aber meine Verwendung des Controllers versucht möglicherweise, das neu zu laden.Ich bin gerade dabei, eine Anwendung für eine einzelne Seite zu erstellen. Folgendes habe ich bisher, von dem ich glaube, dass es Ihre Frage beantworten würde. Ich habe eine Basisvorlage (base.html), die ein div mit der
ng-view
Direktive enthält. Diese Anweisung teilt Angular mit, wo der neue Inhalt eingefügt werden soll. Beachten Sie, dass ich selbst neu in AngularJs bin, sodass ich keineswegs sage, dass dies der beste Weg ist, dies zu tun.base.html
quelle
when /home
when
. Ich möchte zwei Controller für eine einzelne Vorlage. Oder vielleicht habe ich falsch verstanden, was Sie mir sagen wollten?menuController haben Zugriff auf menu div. Und widgetController haben Zugriff auf beide.
quelle
Wir können einfach mehr als einen Controller im selben Modul deklarieren. Hier ist ein Beispiel:
quelle
Ich habe nur eine einfache Erklärung der App abgegeben
Dann habe ich einen Dienst und zwei Controller gebaut
Für jeden Controller hatte ich eine Zeile im JS
Und im HTML habe ich den App-Bereich in einem umgebenden div deklariert
und jeder Controller-Bereich separat in seinem eigenen umgebenden Div (innerhalb des App-Div)
Das hat gut funktioniert
quelle
Sie könnten auch alle Ihre Vorlagenansichten in Ihre HTML-Hauptdatei einbetten. Beispielsweise:
Auf diese Weise können Sie den Angular-Router weiterhin verwenden, wenn für jede Vorlage ein anderer Controller erforderlich ist. In diesem Beispiel finden Sie ein funktionierendes Beispiel: http://plnkr.co/edit/9X0fT0Q9MlXtHVVQLhgr?p=preview
Auf diese Weise ist die Anwendung, sobald sie vom Server an Ihren Client gesendet wurde, vollständig in sich geschlossen, vorausgesetzt, sie muss keine Datenanforderungen usw. stellen.
quelle