CODEWITHSUNDEEP
javascriptangularjsdependency-injection
Rory
Rory

Reputation: 1492

Angular injection from different modules

I get, this error

Error: [ng:areq] http://errors.angularjs.org/1.4.7/ng/areq?p0=fn&p1=not%20a%20function%2C%20got%20undefined

when I try the following

HTML

<div ng-app="angularmodule">
    <div ng-controller="mycontroller">
        <div class="mydirective"  </div>
    </div>

Directive

angular
    .module('ui.module', [])
    .directive('mydirective', function () {

        //some directive stuff in here, restricted as ‘C’

            }
        };
    });

Factory

angular
    .module('dataLayerModule', [])
    .factory('datalayer', [$http],

        function (http) {

         //some method in here that uses http request
            return factory;
        });

Controller

angular
    .module(‘angularmodule’, [‘ui.module', 'dataLayerModule'])
     .controller('mycontroller', ['$scope', 'datalayer', function ($scope, datalayer) {

        //this is dependent on two modules being injected i.e. ‘ui.module','dataLayerModule'
    }]);

If I strip out the factory ('dataLayerModule') module injection from the just above it works e.g

    angular
        .module('angularmodule’, ['ui.module'])
        .controller('mycontroller', ['$scope', function ($scope) {


        }]);

The problem is my 'dataLayerModule’ injection and it’s 'datalayer' factory are not being injected, I think. The angular javascript code above are in different files but are correctly loaded in the html.

What I’m trying to do is inject the factory into the controller, the factory will be responsible for getting json data via ajax

The reason for these different modules is that the 'ui-module' comes from a 3rd party which I have no control over.

If anyone can create a plunker, with this injection just functioning/loading correctly I'd be so grateful, this is driving me mad

Upvotes: 2

Views: 488

Answers (2)

br3w5
br3w5

Reputation: 4593

You have syntax errors in how you're injecting the $http dependency into your factory that most likely are breaking the factory code. You are not currently including the factory method within the array where your dependencies are injected. There are also no quotation marks around $http and it's not being injected into the factory correctly (there is no $ symbol when it is passed as a param to the function). It should be:

angular
.module('dataLayerModule', [])
.factory('datalayer', ['$http', function($http) {

    //some method in here that uses http request
    return factory;
}]);

Alternative syntax

With the syntax above (including dependencies and the function within an array), it can be difficult to spot these kinds of errors. An alternative and more explicit syntax is to pass the function name into the factory method and declare the function further down.

angular
    .module('dataLayerModule', [])
    .factory('datalayer', dataLayer);

dataLayer.$inject = ['$http'];

function dataLayer($http) {

    //some method in here that uses http request
    return factory;
}

Upvotes: 1

Fernando Pinheiro
Fernando Pinheiro

Reputation: 1816

In your factory declaration, you said:

.factory('datalayer', [$http], function (http) {})

but I think this is what you want:

.factory('datalayer', ['$http', function (http) {}])

Upvotes: 1

Related Questions