我试图创建一个自定义服务,并将其$ 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] 删除。
我来说两句