Search code examples
angularjstypescriptangularjs-service

Typescript: Inject custom service in controller in


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

Solution

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