AngularJS: Manually Registering a Service

Question

I have a page with multiple widgets. After the page loads I get a list of widgets which containes a url. I then ng-include the url.

Each widget has it's own controller, which is loaded using a <script> tag in the widget html. Since the widget list is dynamic, I can't load the widget .js files on page load. (when I do, it works fine.) I keep getting an error.

I'm trying to wrap the $http calls in a service to make my controller unit testable.

Here's my HTML:

<script src="/widget/fooWidget.js"></script>

<div ng-controller="FooWidgetCtrl">
    ...
</div>

And here's my fooWidget.js: (I have a Widgets module defined in a file that is loaded on page load)

Widgets.service('FooWidgetSvc', function($http) {
    this.getSomething = function() {
        // $http methods
    }
});

function FooWidgetCtrl($scope, $http, FooWidgetSvc) {
    FooWidgetSvc.getSomething();
    return $scope.FooWidgetCtrl = this;
}

And I get the following error:

Error: Unknown provider: FooWidgetSvcProvider <- FooWidgetSvc
at Error (<anonymous>)

I expect that this is happening because I'm trying to define a service after the angular bootstrap process completes.

I can make a plunker if that helps.

UPDATE

Thanks for the responses so far. I have created a plunker to help illustrate my issue: http://plunker.co/edit/iKzwnlZ7bNDjmR05qGDC

I have figured out how to manually register a controller, and have included it in the plunker.

Please share the plunkr, I've created services in modules I believe and not encountered any issues, I think the problem sounds like it just doesn't have the definition for the service before it's being referenced. The controller that uses the service just can't be created before the service is created, otherwise the provider won't be able to find it when it tries to do the dependency injection. — shaunhusain, Jul 01 '13 at 23:07
@shaunhusain, thanks for the response. I just added a plunkr. I am creating the service first, then the controller. I can manually register the controller to the Widgets module, but can't figure out a way to manually register the service. — dob, Jul 02 '13 at 21:18
See if this answer helps: http://stackoverflow.com/questions/15250644/angularjs-loading-a-controller-dynamically#answer-15292441 — Brian Lewis, Jul 02 '13 at 21:30

score 2 · Answer 1 · answered Jul 03 '13 at 05:28

Okay, Guys, Sorry for the run-around. I finally read the documentation enough times that I figured it out.

I was trying to create a service after Angular had digested everything, which means that I had to manually append the Controllers to the module using $controllerProvider, and the services to the module using $provide:

var WidgetsControllerProvider = null;
var WidgetsProvider = null;

var Widgets = angular.module('widgets', [], function($controllerProvider, $provide) {
  WidgetsControllerProvider = $controllerProvider;
  WidgetsProvider = $provide;
});

Now I can manually add services and controllers like this:

WidgetsProvider.factory('blergWidgetSvc', function($http) {
  return {
    getCountry: function(callback) {
      // code
    }
  };
});

WidgetsControllerProvider.register('blergWidgetCtrl', function($scope, blergWidgetSvc) {
    // code
});

I have forked and updated the plunker to show my solution.

If you've got enough points you should accept your own answer if this is ultimately what works best, I don't have time at the moment to read it through but will check back later. Glad you got it sorted. — shaunhusain, Jul 03 '13 at 18:33
@shaunhusain, stackoverflow doesn't let me accept my own answer right away. I'll accept it in 45 minutes :) — dob, Jul 03 '13 at 22:17

score 0 · Answer 2 · answered Jul 02 '13 at 00:42

0

Does this work for you?

Widgets.service('FooWidgetSvc', function($http) {
    this.getSomething = function() {
        // $http methods
    }
}).controller('FooWidgetCtrl', function($scope, $http, FooWidgetSvc) {
    FooWidgetSvc.getSomething();
}

answered Jul 02 '13 at 00:42

Brian Lewis

5,739
1
21
28

It works if I attach the `/widget/fooWidget.js` file to the head, but does not work if it is inside the fooWidget.html. – dob Jul 02 '13 at 15:47
I just posted a plunker. Thanks for taking a look! – dob Jul 02 '13 at 21:19

AngularJS: Manually Registering a Service

2 Answers2