Question

我正在尝试创建自定义服务并将$注入我的控制器。这似乎是一个相当基本的问题，但我找不到可行的解决方案。

HTML：

<!DOCTYPE html>
 <html lang="en" ng-app="myApp">
  <head>
<title></title>
<meta charset="utf-8" />
  </head>
   <body ng-controller="MyController as vm">
    <script src="Scripts/angular.min.js"></script>
    <link href="Content/bootstrap.min.css" rel="stylesheet" />
    <script src="app/AnimalService.js"></script>
    <script src="app/app.js"></script>  
   </body>
</html>

我使用以下代码创建服务，我正试图从控制器调用。

AnimalService.ts：

    module services {
    "use strict";

    export interface IAnimal {
        sound: string;
        hearMySound(): void;
    }

    class Animal implements IAnimal {
        sound: string;

        constructor() {
            this.sound = "RAWR";
        }

        hearMySound(): void {
            console.log(this.sound);
        }
    }
    angular.module("myApp")
        .service("Animal", Animal);
}

在控制器中，我是否尝试调用函数hearMySound（），该函数具有由服务构造函数初始化的字符串。

app.ts

module controllers{
    class MyController {
        "use strict";

        static $inject = ["Animal"];
        constructor(animalService: services.IAnimal) {                
            animalService.hearMySound();
        }


    }
    angular.module('myApp', [])
        .controller('MyController', ["Animal", MyController]);
}

Google Chrome控制台错误：

        Uncaught Error: [$injector:nomod] http://errors.angularjs.org/1.4.8/$injector/nomod?p0=myApp(anonymous function) 
    @ angular.js:38(anonymous function) 
    @ angular.js:2005b @ angular.js:1929(anonymous function) 
    @ angular.js:2003services @ AnimalService.ts:20(anonymous function) 
    @ AnimalService.ts:22
        angular.js:12520 Error: [$injector:unpr] http://errors.angularjs.org/1.4.8/$injector/unpr?p0=AnimalProvider%20%3C-%20Animal%20%3C-%20MyController
            at Error (native)
            at http://localhost:51139/Scripts/angular.min.js:6:416
            at http://localhost:51139/Scripts/angular.min.js:41:121
            at Object.d [as get] (http://localhost:51139/Scripts/angular.min.js:39:92)
            at http://localhost:51139/Scripts/angular.min.js:41:195
            at d (http://localhost:51139/Scripts/angular.min.js:39:92)
            at Object.e [as invoke] (http://localhost:51139/Scripts/angular.min.js:39:362)
            at M.instance (http://localhost:51139/Scripts/angular.min.js:80:336)
            at D (http://localhost:51139/Scripts/angular.min.js:61:362)
            at g (http://localhost:51139/Scripts/angular.min.js:55:105)(anonymous function) @ angular.js:12520(anonymous function) 
@ angular.js:9292r.$apply @ angular.js:16157(anonymous function) 
@ angular.js:1679e 
@ angular.js:4523c 
@ angular.js:1677yc 
@ angular.js:1697Zd 
@ angular.js:1591(anonymous function) 
@ angular.js:29013b 
@ angular.js:3057If 
@ angular.js:3346Hf.d 
@ angular.js:3334

我怀疑我可能没有正确注册服务或注册模块。任何意见都表示赞赏。

更新添加完整控制台错误消息

结果感谢@hansmaad，我最终得到了以下内容，以使其工作：

<script src="app/moduleReg.js"></script>     // Registrere the module
<script src="app/app.js"></script>           // Controller logic
<script src="app/AnimalService.js"></script> // Service logic

Answer 1

您的模块注册应该是第一件事。您包含的第一个文件应包含

angular.module('myApp', []);

在您的情况下，您已在AnimalService.js之前加入app.js。稍后注册服务和控制器时，请使用

    angular.module('myApp').controller(/*...*/);

顺便说一句，如果您将注射定义为static $inject = ["Animal"];，则不必在注册时再次传递它们。只是做

angular.module('myApp', [])
    .controller('MyController', MyController);

打字稿：在

1 个答案: