How to properly inject a dependency in Angular module in Web API?

Question

I have a objectFactory.js file:

(function () {
    var objectiveFactory = function ($http, $ngAnimate) {
        debugger;
        return {
            getObjectives: function () {                
                return $http.get('/api/Objective/');
            }
        };

    };
    debugger;
    try {
        //objectiveFactory.$inject = ['$http', '$ngAnimate'];// not working
        objectiveFactory.$inject = ['$http'];// perfectly works!
        angular.module('app', []).factory('objectiveFactory', objectiveFactory);
    }
    catch (e)
    {
        var e1 = e;
    }

}());

It is really weird, however if I add new dependency ngAnimate:

objectiveFactory.$inject = ['$http', '$ngAnimate'];// not working

Then I've got an error:

angular.js:13920 Error: [$injector:unpr] Unknown provider: ngAnimateProvider <- ngAnimate <- objectiveFactory http://errors.angularjs.org/1.5.8/$injector/unpr?p0=ngAnimateProvider%20%3C-%20ngAnimate%20%3C-%20objectiveFactory at angular.js:68 at angular.js:4511 at Object.getService [as get] (angular.js:4664) at angular.js:4516 at getService (angular.js:4664) at injectionArgs (angular.js:4688) at Object.invoke (angular.js:4710) at Object.enforcedReturnValue [as $get] (angular.js:4557) at Object.invoke (angular.js:4718) at angular.js:4517

But '$http'injecion perfectly works.

I've explored a lot of info and double checked the following advices in my Web API application:

I've checked versions angular'js file and angular-animate.js and they are the same 1.5.8.

I've excluded minification and bundling, so files are loaded like the following code snippet:

<script src="@Url.Content("~/Scripts/jquery-1.10.2.js")"></script>
<script src="@Url.Content("~/Scripts/bootstrap.js")"></script>
<script src="@Url.Content("~/Scripts/angular.js")"></script>
<script src="@Url.Content("~/Scripts/angular-route.js")"></script>
<script src="@Url.Content("~/Scripts/angular-animate.js")"></script>
<script src="@Url.Content("~/Scripts/objectiveFactory.js")"></script>
<script src="@Url.Content("~/Scripts/objective.js")"></script>

However, the error is the same:

angular.js:13920 Error: [$injector:unpr] Unknown provider:

Does anybody know what I've done wrong? ('$http'injecion perfectly works)

@raina77ow sorry, but how have you known that it is module name, not the service? As Dan Wahnlin injects like I've tried: weblogs.asp.net/dwahlin/angularjs-animations-in-version-1-2 — StepUp
– StepUp, Commented Sep 5, 2016 at 19:07

StepUp · Accepted Answer · 2016-09-06 08:51:50Z

1

ngAnimate is the module name and you should inject ngAnimate in your main module. angular.module('app', []) here is your main module:

angular.module('app', [$ngAnimate']).factory('objectiveFactory', objectiveFactory);

edited Sep 6, 2016 at 8:51

StepUp

38.5k16 gold badges95 silver badges159 bronze badges

answered Sep 5, 2016 at 18:50

Sajeetharan

223k65 gold badges370 silver badges409 bronze badges

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

4 Comments

StepUp Over a year ago

sorry, I've forgotten about this way. However, if I write with $ngAnimate, then the error is the same.

raina77ow Over a year ago

Not $ngAnimate, plain $animate.

StepUp Over a year ago

Thank you very much! I've reall worked with that approximately 5 hours! I'll mark it up in 1 minute.

StepUp Over a year ago

sorry, but how have you known that it is module name, not the service? As Dan Wahnlin injects like I've tried: weblogs.asp.net/dwahlin/angularjs-animations-in-version-1-2

Collectives™ on Stack Overflow

How to properly inject a dependency in Angular module in Web API?

1 Answer 1

4 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

4 Comments

Your Answer

Sign up or log in

Post as a guest

Related