Angular injection from different modules

Question

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

even if I strip the code from the dataLayer it still errors, the $http as well — Rory
– Rory, Commented Oct 5, 2015 at 22:03
quotation marks that you use, look different, check it please — Nicolas2bert
– Nicolas2bert, Commented Oct 5, 2015 at 22:17
that's a typo from entering the text in word first before coping into the textareas. I'll see what I can do in the morning, it's getting late now in the UK, thanks — Rory
– Rory, Commented Oct 5, 2015 at 22:18

Fernando Pinheiro · Accepted Answer · 2015-10-05 22:53:20Z

1

In your factory declaration, you said:

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

but I think this is what you want:

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

answered Oct 5, 2015 at 22:53

Fernando Pinheiro

1,8262 gold badges18 silver badges21 bronze badges

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

Comments

br3w5 · Accepted Answer · 2015-10-06 16:17:18Z

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;
}

Collectives™ on Stack Overflow

Angular injection from different modules

2 Answers 2

Comments

Comments

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

Comments

Related