Weg zu abstrahieren einem Winkel ui Router Zustand mit Entschlossenheit in eine Konstruktorfunktion

Question

Ich habe diese Konstruktorfunktion:

function State(url, templateUrl, controller, controllerAs, factory, resolveProp){ 
    this.url = url 
    this.templateUrl = templateUrl 
    this.controller = controller 
    this.controllerAs = controllerAs 
} 

und in meinem Router Rückruf Ich habe dies:

$stateProvider 
    .state('archetypes', new State('/admin/archetypes', './resources/features/admin/archetypes/index.html', 'archetypes', 'aaVM')) 

Dies funktioniert gut. Ich habe jedoch eine andere Route, die eine Lösung enthält, einige Back-End-Daten zu erhalten.

Ich dachte, ich könnte in der Lage sein, so etwas für mein Konstruktor zu tun:

function State(url, templateUrl, controller, controllerAs, factory, resolveProp){ 
    this.url = url 
    this.templateUrl = templateUrl 
    this.controller = controller 
    this.controllerAs = controllerAs 
    if(factory){ 
    this.resolve = {} 
    this.resolve[resolveProp] = function(factory){ 
     return factory.getAll() 
    } 
    } 
} 

und dann einen Zustand auf diese Weise instanziiert:

.state(
    'archetypes', 
    new State(
     '/admin/archetypes', 
     './resources/features/admin/archetypes/index.html', 
     'archetypes', 
     'aaVM', 
     ArchetypesFactory, 
     'archetypes' 
    ) 
) 

Aber ich denke, die .state Methode ruft die Controller, um das aufgelöste Objekt zu verarbeiten, so dass, wenn ich die obige Statusinstanziierung versuche, es ausfällt, weil ArchetypesFactory eindeutig undefiniert ist.

Beachten Sie, dass, wenn ich meinen Zustand auf diese Weise schreiben:

.state('archetypes', { 
    url: '/admin/archetypes', 
    templateUrl: './resources/features/admin/archetypes/index.html', 
    controller: 'archetypes', 
    controllerAs: 'aaVM', 
    resolve: { 
    archetypes: function(ArchetypesFactory){ 
     return archetypesFactory.getAll() 
    } 
    } 
}) 

Es funktioniert gut.

Gibt es eine Möglichkeit, das Zustandskonfigurationsobjekt mit einer Auflösung in eine Konstruktorfunktion oder ES6-Klasse zu abstrahieren?

Answer 1

Die Resolver-Funktion wird vom AngularJS-Injektor aufgerufen. Der Injektor benötigt eine explizite Form der Annotation. Eine Möglichkeit ist, Inline Array Annotation zu verwenden:

function State(url, templateUrl, controller, controllerAs, factory, resolveProp){ 
    this.url = url; 
    this.templateUrl = templateUrl; 
    this.controller = controller; 
    this.controllerAs = controllerAs; 
    if(factory){ 
    this.resolve = {} 
    this.resolve[resolveProp] = [factory, function(factory){ 
     return factory.getAll(); 
    }]; 
    }; 
} 

Dann eine Zeichenfolge für die Fabrik-Parameter angeben:

.state(
    'archetypes', 
    new State(
     '/admin/archetypes', 
     './resources/features/admin/archetypes/index.html', 
     'archetypes', 
     'aaVM', 
     //ArchetypesFactory, 
     //USE string 
     'ArchetypesFactory', 
     'archetypes' 
    ) 
) 

Inline Array Annotation der bevorzugte Weg ist Anwendungskomponenten mit Anmerkungen versehen. Achten Sie bei der Verwendung dieses Annotationstyps darauf, dass das Annotation-Array mit den Parametern in der Funktionsdeklaration synchronisiert bleibt.