Syntax in Angular verstehen

Question

Ich habe in Angular für ein wenig Zeit jetzt codiert und ich habe bisher Module, Controller und Services erstellt, aber ich bin kürzlich auf ein Stück Code gestoßen, das ich einfach nicht verstehen kann. Es ist jemand anderes Code und ich denke, Autor hat versucht, einen Service zu definieren, aber nicht wie ich es erstellt habe. Normalerweise, wenn ich einen Dienst schaffen es sieht aus wie folgt:

app.factory('portabilityService', [ 
    '$resource', '$state', '$rootScope', function ($resource, $state, $rootScope) { 
     return { //definition  }; 
    } 
]); 

• Für mich ist es einfach Servicenamen als erstes Argument innerhalb der Fabrik von allen Abhängigkeiten gefolgt angeben und los geht.

Nun, ich über einen anderen Code kam, die wie folgt aussieht:

(function() { 
    /* 
    * Manages which samples have been selected 
    */ 


'use strict'; 

    angular.module('maintenance.portability.module') 
     .factory('selectedSamplesSvc', service); 

    service.$inject = []; 

function service() 
{ 
//other function definitions 
}; 

    })(); 

Nun, das viele Fragen aufwirft:

• Zunächst einmal, das ist wirklich ein Dienst ?
• Wenn ja, was ist Service? $ Inject = []?
• Wo sollte ich die Abhängigkeiten hinzufügen?
• Was ist der Zweck des Konstruktor Service() hier?
• Ist es nur eine andere Möglichkeit, einen Dienst zu erstellen, oder gibt es einen bestimmten Grund, warum wir einen Dienst auf diese Weise definieren sollten?

Answer 1

Ich werde versuchen, Ihre Fragen zu adressieren, um:

Zuerst ja, das ist auf jeden Fall eine Möglichkeit, einen Service zu erklären. Es ist nicht weit entfernt von dem, was Sie normalerweise gewohnt sind.

Die normale Syntax für Erklärungen in Winkeln ist:

typeOfDeclaration('stringNameOfDeclaration', functionDeclaration); 

function functionDeclaration(){..}; 

In JavaScript, eine Funktion, ein Objekt ist, so dass eine anonymous Funktion kann anstelle der functionDeclaration, beispielsweise verwendet werden:

typeOfDeclaration('stringNameOfDeclaration', function(){..}); 

Diese Inline-Deklaration ist normalerweise einfacher zu schreiben, wenn Sie nur eine einzige Deklaration erstellen. Dies ist der Defacto-Standard für die meisten Lernbeispiele.

Hinweis dass diese Regeln für alle Winkelkomponenten (providers, filters, directives, controllers, etc.)

Durch die Deklaration der Funktion als separates Objekt statt inline, die Erklärung und die Funktion anwenden sind leichter zu verwalten. Sie könnten theoretisch die Funktion selbst in eine andere Datei einfügen (obwohl dies nicht üblich ist). Wenn Sie mehrere Funktionen deklarieren, können Sie mit dieser Syntax die Deklarationen zusammen und die Funktionen zusammen gruppieren, was hauptsächlich eine Frage der Präferenz und des Codierungsstils ist.

Die optional Array von Abhängigkeiten in Ihrem Beispiel sind eine Möglichkeit, Dependency Injection in Fällen, in denen der Code minimierte werden zu verwalten. In diesem Fall wird eine andere alternative DI-Methode verwendet, service.$inject = [];. Dieses Array kann anstelle des Inline-Arrays verwendet werden, d. H. service.$inject = ['$resource', '$state', '$rootScope']; Auch dies gibt Ihnen eine Möglichkeit, Ihre Deklarationen an einem Ort zu gruppieren, Ihre Abhängigkeiten in einem anderen.

Answer 2

Alle Antworten einkochen dazu: Sie sind gleichwertig mit den entsprechenden Definitionen der Funktion .factory geben.

1. Ja, es ist ein Service (basierend auf dem Stand der Aussage)
2. $inject ist eine Alternative zu Ihrer [ names..., function(dependencies...) {...}] Syntax
3. Auf die gleiche Weise gerade jetzt Ihre Funktionsdefinition getrennt ist.
4. Es ist die Funktion übergeben Sie anonym
5. Es ist bevorzugt zum größten Teil ist aber ausdrücklich $inject vorteilhaft für die in der Sache

Weitere Überlegungen zu minimieren (teilweise) und insgesamt eine gute Lektüre dieses style guide geben einen Blick .