2013-10-09 8 views
11

Ich versuche im Moment meinen Kopf um angularjs zu bekommen. Ich suche gerade Dienste, die ich auch Typoskript für Code verwende.Angular service in type script mit dependance injection und minification

Jetzt von Proben im Internet habe ich gesehen, dass Leute etwas wie unten für einen Dienst in Typoskript verwenden.

class Service 
{ 
    constructor(private $http: ng.IHttpService) 
    { 
    } 

    public MyMethod() 
    { 
     this.$http.get("/") 
      .success(null) 
      .error(null); 
    } 
} 

Nun, wenn diese minimierte ist würde ich $http vom Konstruktor verlieren und Winkel erfordert die Variablennamen. Also habe ich nachgesehen und festgestellt, dass ich $ inject anstelle des Konstruktors verwenden kann, aber das würde auch das gleiche Problem mit der Vermintung bekommen.

Wie geht es Menschen mit Minification und eckig in einem Typoskript Kontext? Ich habe Mühe, ein paar solide Dokumente darüber zu finden, wie damit umgegangen werden soll. Für mich ist das seltsam, diese Probleme in einer modernen API zu haben, also muss ich irgendwo etwas vermissen.

+1

Sie können das "ngAnnotate" -Modul für den Schluck vor dem Verglifyid verwenden, um Abhängigkeiten in eckigen Winkeln zu vermeiden. Beispiel: gulp.src (paths.ts) .pipe (ts (ts.createProject ('tsconfig.json'))). Pipe (concat ('app.min.js')). Pipe (ngAnnotate ({entfernen : true, add: true, single_quotes: true})). pipe (uglify()). pipe (gulp.dest ('www/js /')) – ekussberg

Antwort

16

Verwenden Sie einfach die $inject Syntax. z.B. :

class Service 
{ 
    static $inject = ['$http'];  
    constructor(private $http: ng.IHttpService) 
    { 
    } 

    public MyMethod() 
    { 
     this.$http.get("/") 
      .success(null) 
      .error(null); 
    } 
} 

PS: Ich habe eine ausführliche Video zum Thema haben: http://www.youtube.com/watch?v=WdtVn_8K17E&hd=1

+0

Auf diese Weise erhält jede 'Service'-Instanz ihr eigenes' $ http'-Referenz. In Vanilla-JavaScript wird üblicherweise die 'angular.factory'-Methode verwendet, um auf solche Abhängigkeiten in einem Closure zuzugreifen. Welche Best Practices empfehlen Sie, dies in Typoskript zu erreichen? – mhelvens

+0

Dienstleistungen sind Singletons. Es wird nur eine Instanz geben – basarat

+0

Javascript kennt keine Klassen (oder Singletons), also auch AngularJS nicht. Dienstleistungen können alles sein. Ich biete seit Jahren instanziierbare "Klassen" als Dienste an. – mhelvens

0

Derzeit ist der offizielle Typoskript Compiler noch nicht Schnittstelle Metadaten emittieren, die zur Laufzeit für ein DI-System verwendet werden könnten. Es gibt ein Problem bezüglich der Erweiterbarkeit des Emitters here. In der Zwischenzeit habe ich ein Beispielprojekt (zusammen mit einer angepassten Version des TS-Compilers, der Interface-Metadaten ausgibt) einer AngularJS 1.3-Anwendung erstellt, die Decorators die Möglichkeit gibt, Komponenten im Anwendungsmodul zu registrieren und Abhängigkeiten mithilfe von Klassenmetadaten zur Laufzeit zu injizieren. Sie können einen Blick here geben.

Verwandte Themen