I'm trying to create a custom service and $inject it into my controller. It seems to be a fairly basic problem, but I havn't been able to find a working solution.
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>
I use the following code to create the service, i'm trying to call from the controller.
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);
}
In the controller, am I trying to call the function hearMySound(), which has the string initilized by the service constructor.
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 console error:
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
I suspect I might not be registering the service correctly, or registering the modules. Any input is appreciated.
Updated Added full console error msg
Result Thank to @hansmaad, i ended up with up with the following in order to make it work:
<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
Your module registration should be the first thing that happens. The first file you include should contain
angular.module('myApp', []);
In your case, you've included AnimalService.js
before app.js
.
When you register services and controllers later, use
angular.module('myApp').controller(/*...*/);
By the way, if you define the injections as static $inject = ["Animal"];
you don't have to pass them again in the registration. Just do
angular.module('myApp', [])
.controller('MyController', MyController);