angularjs - Typescript: Inject custom service in controller in -
i'm trying create custom service , $inject controller. seems basic problem, havn't been able find working solution.
html:
<!doctype html> <html lang="en" ng-app="myapp"> <head> <title></title> <meta charset="utf-8" /> </head> <body ng-controller="mycontroller 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 following code create service, i'm trying call 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 controller, trying call function hearmysound(), has string initilized 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 @ error (native) @ http://localhost:51139/scripts/angular.min.js:6:416 @ http://localhost:51139/scripts/angular.min.js:41:121 @ object.d [as get] (http://localhost:51139/scripts/angular.min.js:39:92) @ http://localhost:51139/scripts/angular.min.js:41:195 @ d (http://localhost:51139/scripts/angular.min.js:39:92) @ object.e [as invoke] (http://localhost:51139/scripts/angular.min.js:39:362) @ m.instance (http://localhost:51139/scripts/angular.min.js:80:336) @ d (http://localhost:51139/scripts/angular.min.js:61:362) @ 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 might not registering service correctly, or registering modules. input appreciated.
updated added full console error msg
result thank @hansmaad, ended up following in order make work:
<script src="app/modulereg.js"></script> // registrere module <script src="app/app.js"></script> // controller logic <script src="app/animalservice.js"></script> // service logic
your module registration should first thing happens. first file include should contain
angular.module('myapp', []); in case, you've included animalservice.js before app.js. when register services , controllers later, use
angular.module('myapp').controller(/*...*/); by way, if define injections static $inject = ["animal"]; don't have pass them again in registration. do
angular.module('myapp', []) .controller('mycontroller', mycontroller);
I agree the costs of living in India are much lower than in many other countries, so that one can hire an angular JS developers in their budget from India. If you are looking to hire a freelancer, I suggest Eiliana.com, which is a freelancing portal, and from here, you can get the best professionals from India.
ReplyDelete