AngularJs use service from another module

Question

I'm trying to use a service from my main module that I'm going to use everywhere.

This is my controller where I would like to use it:

(function () {
    'use strict';

    angular.module('app.page')
    .controller('authCtrl', ['$scope', '$window', '$location','requestService', authCtrl]);


    function authCtrl($scope, $window, $location, requestService) {
        $scope.login = function() {
            requestService.test();
        }
    }
})();

module:

(function () {
    'use strict';

    angular.module('app.page',['app']);
})();

Service

(function () {
    'use strict';

    angular.module('app')
        .service('requestService',requestService);

    function requestService() {
        this.test = function()
        {
            alert('test');
        }
    }
})();

But the requestService() is not found in my controller. What am I doing wrong here?

--EDIT--

error message:

angular.js:13424 Error: [$injector:unpr] http://errors.angularjs.org/1.5.3/$injector/unpr?p0=requestServiceProvider%20%3C-%20requestService%20%3C-%20authCtrl
    at Error (native)
    at http://localhost:3000/bower_components/angular/angular.min.js:6:416
    at http://localhost:3000/bower_components/angular/angular.min.js:43:7
    at Object.d [as get] (http://localhost:3000/bower_components/angular/angular.min.js:40:270)
    at http://localhost:3000/bower_components/angular/angular.min.js:43:69
    at d (http://localhost:3000/bower_components/angular/angular.min.js:40:270)
    at e (http://localhost:3000/bower_components/angular/angular.min.js:41:1)
    at Object.invoke (http://localhost:3000/bower_components/angular/angular.min.js:41:86)
    at S.instance (http://localhost:3000/bower_components/angular/angular.min.js:88:235)
    at n (http://localhost:3000/bower_components/angular/angular.min.js:64:174) <section data-ui-view="" class="view-container {{main.pageTransition.class}} ng-scope" data-ng-animate="1">

Where is the definition of the app module? And what is the exact and complete error message you get? This is critical information. — JB Nizet
– JB Nizet, Commented Apr 10, 2016 at 18:03
You should not use the minified version of angular when developing. The error messages would be much clearer with the non-minified version. You still haven't told where the app module was defined. But my guess is simply that you forgot to include the script file containing the service in your HTML. — JB Nizet
– JB Nizet, Commented Apr 10, 2016 at 18:06
Possible duplicate of AngularJS access service from different module — EGL 2-101
– EGL 2-101, Commented Dec 16, 2016 at 18:48

Lex · Accepted Answer · 2016-04-10 18:03:07Z

0

When you defined your service module you didn't provide an empty dependency array to create a new module. Angular will try to find an existing app module and not find it. You need to define your service module like this:

(function () {
    'use strict';

    angular.module('app', [])
        .service('requestService',requestService);

    function requestService() {
        this.test = function()
        {
            alert('test');
        }
    }
})();

answered Apr 10, 2016 at 18:03

Lex

7,2732 gold badges31 silver badges49 bronze badges

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

Collectives™ on Stack Overflow

AngularJs use service from another module

1 Answer 1

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related