15

Ich arbeite an meinem Tutorial AngularUI-Projekt. Ich lese alles über Zustände, verschachtelte Zustände und abstrakte Zustände. Das Problem ist, dass ich nicht verstehen kann, warum und wann ich abstrakten Zustand verwenden sollte?  Was ist der Verwendungszweck abstrakter Zustand?

Antwort

19

Der abstrakte Zustand bedeutet, dass der von Ihnen geschriebene Zustand nicht direkt zugänglich ist. Abstrakte Staaten brauchen noch ihre eigenen, in die sich ihre Kinder einklinken können.

Es wird aufgerufen, wenn wir seinen Kindstatus laden. Sie können den abstrakten Status verwenden, um ein initiales Muster Ihrer Seite zu definieren. Angenommen, Sie können ein Beispiel für eine beliebige Social Media-Website nehmen, auf der Sie das Nutzerprofil & Social Page anzeigen möchten. Dafür könnte man einen abstract Staat haben, der url: "" & Grundlayout Ihrer Seite haben wird. Wie header, content & footer genannten Ansichten. header & footer benannte Ansicht wird durch den abstrakten Zustand & ausgefüllt dann Kind wird definieren, was der Inhalt ist, hängt davon ab, welches Modul angezeigt wird./profile zeigt die userProfile.html & /social zeigt die soziale Seite eines Benutzers social.html.

Config

app.config(function($stateProvider){ 
    $stateProvider.state("app": 
    { 
    url: "", //you can have the default url here..that will shown before child state url 
    abstract: true, 
    views: { 
     '': { 
      templateUrl: 'layout.html', 
      controller: 'mainCtrl' 
     }, 
     'header': { 
      templateUrl: 'header.html' 
     }, 
     'footer': { 
      templateUrl: 'footer.html' 
     } 
    }, 
    resolve: { 
     getUserAuthData: function(userService){ 
      return userService.getUserData(); 
     } 
    } 

    }) 
    .state("app.profile": { 
     '[email protected]': { 
      templateUrl: 'profile.html', 
      controller: 'profileController' 
     } 
    }) 
    .state("app.social": { 
     '[email protected]': { 
      templateUrl: 'social.html', 
      controller: 'socialController' 
     } 
    }) 
}) 

Andere Hauptmerkmal abstract ist man darauf gemeinsamen Willen haben, geerbt für von Kind Staaten oder einem Ereignis-Listener verwenden benutzerdefinierte Daten über Daten. Sie können auch OnEnter & OnExit darauf zu machen, dass die Dinge haben, bevor state & Laden während von state

verlassen
5

Wenn Sie nicht möchten, dass ein Status auf einen Übergang gesetzt wird, können Sie einen abstrakten Status erstellen. Beispiel

\A 
\A.B 
\A.B.C 

Wenn Sie der Benutzer nicht wollen, einfach zu \A gehen, sollten Sie es abstract machen.

0

Zusammenfassung Staaten

Es gibt Situationen, in denen wir einige allgemeine Informationen verfügbar in verschiedenen Staaten haben müssen. UI-Router bietet zu diesem Zweck die Möglichkeit, abstrakte Zustände anzugeben. Abstrakte Zustände können Kind-Zustände haben, aber sie können nicht aktiviert werden, sie werden auch nicht aktiviert. Ein abstrakter Zustand wird implizit aktiviert, wenn einer seiner untergeordneten Zustände aktiviert wird. Dies ist nützlich, wenn: wir eine URL auf alle untergeordneten Status URLs voranstellen müssen, müssen wir eine Vorlage mit eigenen Ui-View einfügen, die die untergeordneten Zustände füllen müssen, müssen wir aufgelöste Abhängigkeiten (über Auflösung) in bereitstellen Um von untergeordneten Zuständen verwendet zu werden, müssen wir geerbte benutzerdefinierte Zustandsdaten bereitstellen, um von untergeordneten Zuständen oder Ereignissen verwendet zu werden. Abstrakte Zustände werden definiert, indem der abstrakte Schlüssel im Statuskonfigurationsobjekt auf true festgelegt wird.

$stateProvider 

.state('home', { 

    abstract: true, 

    templateURL: 'home.html' 

}) 
3

Im Grunde helfen Ihnen abstrakte Zustände, die allgemeine Funktionalität aus verschiedenen Zuständen in einen übergeordneten abstrakten Zustand zu versetzen.

Ein typisches Beispiel ist ein Zustand, der das Laden von Benutzernamen, Lokalisierungseinstellungen und Metadaten übernimmt. Sie möchten nicht, dass der Benutzer zu einem Status umleitet, der genau das lädt. Sie wollen, dass immer geladen werden, wenn

zu jedem Zustand umgeleitet

/session wäre abstrakt, sondern /session/main, /session/detail wollte nicht. Durch die Abhängigkeiten werden die Sitzungsdaten geladen, wenn Sie in die Zustände main und detail wechseln, aber Sie möchten nicht, dass der Benutzer in den Status session wechselt.

Verwandte Themen