Angular 1 Dependance Injection mit JavaScript und TypeScript

Question

Ich versuche herauszufinden, wie TypeScript in einer vorhandenen Angular 1.5 App verwendet werden kann. Ich kann nicht herausfinden, wie man benutzerdefinierte Dienste injiziert. Angular Services und 3rd Party Services funktionieren gut. Die Dienste, die ich injizieren muss, sind noch Vanilla JS-Dienste. Im folgenden Beispiel muss ich reportService injizieren.

Der Fehler, den ich bekomme, ist getReportById ist keine Funktion.

class ReportController implements IReportController { 

    static $inject = ['$stateParams', 'reportService']; 


    constructor(private $stateParams: angular.ui.IStateParamsService, private reportService) { 

     this.getReport($stateParams.id); 
    } 

    getReport(id: number): object { 
     reportService.getReportById(id) 
      .then(function(res) { 
       console.log(res) 
      }); 
    } 

} 

Hier ist der Service.

angular.module('reportsServiceModule', []) 
    .factory('reportsService', [ 
     '$http', 
     reportsService 
    ]); 

function reportsService(
     $http 
) { 

    'use strict'; 

    var service = {}; 

    service.getReportById = function(reportID) { 
     return 'A promise'; 
    }; 

    return service; 
} 

Answer 1

Der einzige wirkliche Unterschied zwischen JS und TS Entwicklung in AngularJS ist, dass die Einheiten getippt werden können. Dies hat nur Auswirkungen auf die Sicherheit des Typs.

Hier wäre es

interface IReportService { 
getReportById: (someType) => string; 
} 

... 
constructor(
    private $stateParams: angular.ui.IStateParamsService, 
    private reportService: IReportService 
) { 
... 

Es gibt kein Problem mit Dependency Injection sein. Wenn Sie ein DI-Problem in Angular haben, erhalten Sie einen Fehler von Injector.

Das eigentliche Problem hier ist, dass strikte Modus nicht verwendet wird. Mit use strict Anweisung oder alwaysStrict TS option würde der Fehler zeigen, was wirklich falsch ist - Variable ist nicht in getReport Methode definiert.

Stattdessen sollte es

getReport(id: number): object { 
    this.reportService.getReportById(id) 
    ... 

Answer 2

Es ist ein Tippfehler.

Sie definiert einen Bericht s Dienst

.factory ('reportsService')

Aber injiziert eine andere

static $ inject = [ '$ stateParams ',' reportService '];