Angularjs - Uknown Provider

Question

Whenever I do this:

app.controller('hangmanController', ['$scope', 'wordnickAPIService', function ($scope, wordnickAPIService) {

I get this:

[$injector:unpr] Unknown provider: wordnickAPIServiceProvider <- wordnickAPIService

I read through This discussion on the topic, but didn't see an answer that applied. I am sure it is something simple or trivial that I am missing, but, jeez, if Angular isn't giving me fits trying to piece it all together.

Relevant HTML:

<body ng-app="angularHangmanApp" ng-controller="hangmanController">

My controller:

'use strict';

var app = angular.module('angularHangmanApp', []);

app.controller('hangmanController', ['$scope', 'wordnickAPIService', function ($scope, wordnickAPIService) {

[...]variable declarations[...]

var wordListURL = 'http://long_url_that_returns_some_json';

$scope.wordList = wordnickAPIService.get(wordListURL);
}]);

My factory:

'use strict';

var app = angular.module('angularHangmanApp', []);

app.factory('wordnickAPIService', ['$http', function($http) {
    return {
        get: function(url) {
            return $http.get(url);
        },
        post: function(url) {
            return $http.post(url);
        },
    };
}]);

Most likely the issue is that you are not including the script that contains wordnickAPIService — Dalorzo, Jun 02 '14 at 22:21

score 0 · Accepted Answer · answered Jun 02 '14 at 22:28

The problem is that you are creating multiple modules with the same name.

To create a module in angular you use:

var app = angular.module('angularHangmanApp', []);

Then to get That module somewhere else you just type:

var app = angular.module('angularHangmanApp');

No extra []...

Also make sure you declare the service before trying to call it.

score 0 · Answer 2 · answered Jun 02 '14 at 22:29

In your factory and your controller, you are actually redefining the app module.

Instead of saying

var app = angular.module('angularHangmanApp', []);

say

var app = angular.module('angularHangmanApp');

Use the first style of invocation only once in your application (maybe just app.js). All other references should use the second style invocation, otherwise, you're constantly redefining the angular app and losing all of the controllers, factories, directives declared previously.

Angularjs - Uknown Provider

2 Answers2