Typescript: Inject custom service in controller in

Question

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

Hi @Mike I've added the full error trace from the google chrome console — Helmer
– Helmer, Commented Jan 22, 2016 at 12:07

hansmaad · Accepted Answer · 2016-01-22 12:19:12Z

1

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

answered Jan 22, 2016 at 12:19

hansmaad

19k9 gold badges56 silver badges97 bronze badges

Sign up to request clarification or add additional context in comments.

3 Comments

Helmer Over a year ago

Hi @hansmaad Thank you for your input. I've changed the <script> to: <script src="Scripts/angular.min.js"></script> <link href="Content/bootstrap.min.css" rel="stylesheet" /> <script src="app/moduleReg.js"></script> <script src="app/ClassPerson.js"></script> <script src="app/AnimalService.js"></script> <script src="app/app.js"></script>, - And removed "Animal" from the controller. which still leaves me with: Error: [$injector:unpr] errors.angularjs.org/1.4.8/$injector/…

hansmaad Over a year ago

@Helmer app.js which contains the module registration has to be included before AnimalService.js

Helmer Over a year ago

you were spot on, on the error. I was "including" in the wrong order. I ended up with: registrer module, controller logic, service. Question has been updated for future reading.

Collectives™ on Stack Overflow

Typescript: Inject custom service in controller in

1 Answer 1

3 Comments

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

3 Comments

Related