Strukturieren Sie den $ -Zustand in Angular

Question

Ich habe eine Webanwendung. Bis jetzt habe ich .when verwendet, um die ganze URL zu definieren. Jetzt möchte ich den $ -Zustand besser kennenlernen. Also, ich habe ein Netz, das wie folgt zusammengesetzt ist: - Login-Seite (public) - dann (privat): - Armaturenbrett nach Hause - Benutzerliste

Die private Seite von zusammen: - navbar (oben) mit Willkommensmeldungen - Seitenleiste (rechts) mit einer Liste von Schaltflächen (Home und Liste) - anzeigen (wo ich das Dashboard zu Hause sehen und dann, wenn der Benutzer 'Liste' drücken, finden Sie in der Benutzerliste).

In den main.js habe ich writter dieses:

'use strict'; 

angular.module('app', [ 
'app.login', 
'app.dashboard' 
]).config(
['$stateProvider', '$urlRouterProvider', '$resourceProvider', 
function($stateProvider, $urlRouterProvider, $resourceProvider) { 

    $resourceProvider.defaults.stripTrailingSlashes = false; 

$urlRouterProvider 
    .otherwise('/login'); 

$stateProvider 

    // Definizione dei template di base per le pagine 
    .state('app.dashboard', { 
    url: '/dashboard', 
    templateUrl: 'dashboard.html', 
    controller: 'dashboardCtrl' 
    }) 

    .state('app', { 
    url: '/app', 
    abstract: true, 
    templateUrl: 'app.html', 
    }) 

    .state('login', { 
    url: '/login', 
    templateUrl: 'login.html', 
    controller: 'LoginController' 
    }) 

    .state('app.list', { 
    url: '/list', 
    templateUrl: 'list.html', 
    controller: 'ListController', 
    }) 

}]) 

Was sollte/sollte oder nicht ein abstraktes sein? Sollte ich einen "gemeinsamen" Staat machen? Auch weil ich eine Berechtigung hinzufügen möchte, die Sie nicht weiterleiten können, wenn Sie nicht angemeldet sind. Kannst du mir helfen, das Routing zu strukturieren und den abstrakten Zustand zu verstehen?

Answer 1

Der Grund, warum Sie einen abstrakten Zustand verwenden würden, ist, Ihre Definition trocken zu behalten, wenn Sie einen Teil Ihrer URL nicht navigierbar haben. Zum Beispiel, sagen, dass Sie ein URL-Schema wie folgt haben: aus irgendeinem Grunde in Ihrem Design, diese URL war ungültig (dh ohne Zweck für eine Seite)

/home/index 
/home/contact 

jedoch:

/home 

Jetzt könnten Sie einfach zwei Zustände für diese Situation erstellen, mit den vollständigen URLs, aber dann würden Sie zweimal /home/ schreiben, und die Beschreibung ist ein bisschen mehr verschachtelt. Die beste Idee ist stattdessen ein Haus abstrakte Elternteil zu schaffen, die beiden anderen Staaten sind Kinder (für ui-Router docs):

$stateProvider 
    .state('parent', {url: '/home', abstract: true, template: '<ui-view/>'}) 
    .state('parent.index', {url: '/index', templateUrl: 'index.html' }) 
    .state('parent.contact', {url: '/contact', templateUrl: 'contact.html' }) 

bemerken nur, dass innerhalb des übergeordneten Zustand weisen wir eine Vorlage, deren einziges Kind a ui-view. Dadurch wird sichergestellt, dass die untergeordneten Elemente gerendert werden (und möglicherweise auch, dass Ihres leer angezeigt wird).

---

Manchmal können Sie die Verwendung eines abstrakten Status mit einer leeren URL bemerken. Die beste Verwendung dieses Setups ist, wenn Sie eine parental resolve benötigen. Beispielsweise benötigen Sie möglicherweise bestimmte Serverdaten für eine Teilmenge Ihrer Status. Anstatt also die gleiche Auflösungsfunktion in jeden Ihrer Zustände zu setzen, könnten Sie ein leeres URL-Elternelement mit der gewünschten Auflösung erstellen. Es könnte auch nützlich sein, wenn Sie hierarchische Controller wollen, bei denen der Elternteil keine Verwendung für eine Ansicht hat (nicht sicher, warum Sie das wollen, aber es ist plausibel).

Quelle: Why give an "abstract: true" state a url?