angularjs - constructor injection with arguments

Question

I'm trying to instantiate an object using the angular.factory recipe. The factory code is something like this

monevAppServices.factory('MonEvChartService', ['element','chartConfig',function monEvChartFactory(element,chartConfig) {

    return MonEvChart;
}

where element and chartconfig are arguments expected by the MonEvChart, something like

new MonEvChart(element,chartConfig);

However when I try to use this service in my controller (after injecting it)

angular.module('monevApp.controllers', [])
  .controller('NewDashboard',
        ['$rootScope','$scope','subscribedMonitor','MonEvChartService','$log',
            function($rootScope,$scope,subscribedMonitor,MonEvChartService,$log) {

        ...

    $scope.monevchart  = new MonEvChartService($scope.element,$scope.chartConfig);    
...

It throws an error like

Error: [$injector:unpr] Unknown provider: elementProvider - element  - MonEvChartService
http://errors.angularjs.org/1.2.15/$injector/unpr?p0=elementProvider%20%3C-%20element%20%3C-%20MonEvChartService
    at http://localhost:9000/bower_components/angular/angular.js:78:12

Any help guidance would be really appreciated. Thanks!

chubbsondubs · Accepted Answer · 2014-04-18 03:50:41Z

3

You don't instantiate services like that. AngularJS creates those objects for you similar to how Spring creates beans in Java. So you can't parameterize it like that either. If you wanted to create something like that you'd need to create a factory method you do the following:

http://plnkr.co/edit/xnGJxq

But what you are trying to do is build a directive for a charting component. A service won't work for you because it doesn't do anything with the UI. So you want to learn about directives and how to build those:

http://docs.angularjs.org/guide/directive

edited Apr 18, 2014 at 3:50

answered Apr 17, 2014 at 19:59

chubbsondubs

39.4k25 gold badges110 silver badges143 bronze badges

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

2 Comments

Saurabh Over a year ago

thanks for your response. The link for plnkr is not working. Can you please repost. If you look at the angularjs developer documentation - docs.angularjs.org/guide/providers , the example shows how to provide arguments for constructor injection. However it does not show how to invoke the service - and where i'm blocked. Just like spring where you can provide the constructor arguments as a configuration there must be a way to to instantiate any object with custom arguments in angular too. What I'm understanding from your response severly restricts the object creation in angular.

chubbsondubs Over a year ago

Ok the plunker is updated. It will inject, but only what's in the container (ie angular app). That won't be elements from the dom tree. And you don't instantiate objects in the angular app using new either. You just declare a dependency in the function definition, and angularjs will give you a reference to it. If you want to manipulate the dom your want a directive not a service.

Tim · Accepted Answer · 2014-04-18 06:24:17Z

1

Ok after spending some time and re-reading the developer documentation , this is the working solution i came up with. Would really like to hear if someone has an opinion on it

//removed the constructor arguments
monevAppServices.factory('MonEvChart', [function monEvChartFactory() {
        return MonEvChart;
}]);

...

//instantiating the object in the controller and passing in the arguments
monevchart   = new MonEvChart(element,config);
                monevchart.create();

edited Apr 18, 2014 at 6:24

Tim

43.6k19 gold badges138 silver badges152 bronze badges

answered Apr 18, 2014 at 6:17

Saurabh

891 silver badge9 bronze badges

Comments

rafael nextor · Accepted Answer · 2016-11-15 15:00:39Z

0

I guess the reason why we cannot add parameters when creating services in angularJs has something to do with dependency injection. Most, if not all, IoC containers requires a parameterless constructor. I think this is true for angularJs injector as well.

answered Nov 15, 2016 at 15:00

rafael nextor

214 bronze badges

Collectives™ on Stack Overflow

angularjs - constructor injection with arguments

3 Answers 3

2 Comments

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

2 Comments

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related