用 TypeScript 编写的 AngularJS 控制器中的服务注入问题

Question

我想在名称为StringCalculatorController.ts.

的自写AngularJS控制器中注入自写服务CalculatorService.ts

我的 CalculatorService 看起来像这样：

/// <reference path="../typescript_definitions/angular.d.ts" />

module CalculatorModule {
    export class CalculatorService {

        // implementation stuff....

    }

}

var app = angular.module("AngularCalculatorModule", []);
app.service("calculatorService", CalculatorModule.CalculatorService);

StringCalculatorController 应该使用 CalculatorService 作为依赖：

/// <reference path="../typescript_definitions/angular.d.ts" />
/// <reference path="CalculatorService.ts" />

module CalculatorModule {


    export class StringCalculatorController {

        private calculatorService:CalculatorModule.CalculatorService;


    static $inject = ['calculatorService'];
        constructor(calculatorService) {
            console.log(calculatorService);
        }
    }
}

var app = angular.module("AngularCalculatorModule", []);
app.controller("StringCalculatorController",CalculatorModule.StringCalculatorController);

这不起作用。它给了我以下错误信息：

Error: [$injector:unpr] Unknown provider: calculatorServiceProvider <- calculatorService <- StringCalculatorController
http://errors.angularjs.org/1.4.8/$injector/unpr?p0=calculatorServiceProvider%20%3C-%20calculatorService%20%3C-%20StringCalculatorController
    at angular.js:68
    at angular.js:4334
    at Object.getService [as get] (angular.js:4482)
    at angular.js:4339
    at getService (angular.js:4482)
    at Object.invoke (angular.js:4514)
    at extend.instance (angular.js:9182)
    at nodeLinkFn (angular.js:8299)
    at compositeLinkFn (angular.js:7731)
    at compositeLinkFn (angular.js:7734)

我按照 index.html:

启动脚本

<!DOCTYPE html>
<head>
    <meta charset="utf-8">
    <script src="bower_components/angular/angular.js"></script>
    <script src="src/CalculatorService.js"></script>
    <script src="src/StringCalculatorController.js"></script>
</head>
<body ng-app="AngularCalculatorModule">
    <div ng-controller="StringCalculatorController">
    </div>
</body>
</html>

有人可以帮我吗？

Answer 1

您正在定义 angular 模块 AngularCalculatorModule 两次，即您有行

var app = angular.module("AngularCalculatorModule", []);

在你的两个打字稿文件中。

将 angular 模块 angular.module("AngularCalculatorModule", []); 的创建放在一个单独的文件中，例如您还可以在那里放置配置或其他初始化内容。然后在 angular.js 包含之后立即包含此文件。

之后只需使用 angular.module("AngularCalculatorModule").controller(...)（注意缺少 [] = 模块依赖项数组）。

用 TypeScript 编写的 AngularJS 控制器中的服务注入问题

Problems with service injection in a AngularJS controller written in TypeScript

javascript

controller

code-injection

angularjs

typescript