打字稿:在控制器中注入自定义服务

赫尔默

我试图创建一个自定义服务,并将其$ inject到我的控制器中。这似乎是一个相当基本的问题,但我一直无法找到可行的解决方案。

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);
}

在控制器中,我是否要调用函数listenMySound(),该函数的字符串由服务构造函数初始化。

应用程序

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
汉斯马德

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

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

在你的情况,你已经包括AnimalService.js之前app.js以后注册服务和控制器时,请使用

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

顺便说一句,如果您定义了进样,static $inject = ["Animal"];则不必在注册中再次通过它们。做就是了

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

本文收集自互联网,转载请注明来源。

如有侵权,请联系[email protected] 删除。

编辑于
0

我来说两句

0条评论
登录后参与评论

相关文章

来自分类Dev

无法在打字稿中的控制器中注入服务

来自分类Dev

无法在控制器中注入服务

来自分类Dev

AngularJs,在控制器中注入服务

来自分类Dev

AngularJs,在控制器中注入服务

来自分类Dev

在控制器内部未定义用打字稿编写的Angular服务

来自分类Dev

错误:在控制器中注入服务时,[$ injector:unpr]

来自分类Dev

错误:在控制器中注入服务时,[$ injector:unpr]

来自分类Dev

在所有控制器中注入服务

来自分类Dev

Symfony 3.4 在控制器动作中注入服务

来自分类Dev

在Angular2的自定义验证器中注入服务

来自分类Dev

如何在angularjs的自定义服务中注入$ cookie?

来自分类Dev

在 karma jasmine 中注入自定义服务

来自分类Dev

自定义控制器动作

来自分类Dev

在控制器中注入指令时,指令/控制器作用域未定义

来自分类Dev

AngularJS:自定义过滤器并注入控制器

来自分类Dev

Laravel自定义错误,模型已注入控制器

来自分类Dev

kibana:如何使用自定义可视化插件注入控制器功能

来自分类Dev

自定义控制器工厂如何与依赖注入相关?

来自分类Dev

在控制器angularJS中注入工厂

来自分类Dev

在angularjs控制器中注入$ element

来自分类Dev

在winform中注入控制器

来自分类Dev

在angularjs +打字稿中注入微风服务

来自分类Dev

Rails自定义身份验证未在控制器测试中注册sign_in用户

来自分类Dev

可以将打字稿类注入 JavaScript 控制器吗?

来自分类Dev

注入控制器时服务未定义

来自分类Dev

Axios打字稿自定义AxiosRequestConfig

来自分类Dev

EVE-定义自定义烧瓶控制器

来自分类Dev

控制器方法上的自定义验证器

来自分类Dev

AngularJS在向我的控制器中注入新服务的问题

Related 相关文章

热门标签

归档