Call angular service in another js file

Question

I have some javascript and html files: User.js, index.html, Door.js

I want use any function in User.js file.

I call getUserInfo in user.Js from Door.js file in function doorApplicationLoginPage.service

Error: [$injector:unpr] Unknown provider: UserServiceProvider <- UserService <- PerioMainController

var doorApplicationLoginPage = angular.module("PerioLoginPage", []);

doorApplicationLoginPage.service('UserService', function () {

    this.getUserInfo = function () {
        alert("getUserInfo");
    }

    this.reLoginUser = function () {
        alert("reLoginUser");
    }

});


var doorApplication = angular.module("PerioDoorApplication", []);

doorApplication.controller("PerioMainController", function ($scope, $http, $sce, UserService) {


    UserService.getUserInfo();

});

Thank you.

korteee · Accepted Answer · 2017-03-31 13:42:59Z

1

You are injecting a service which is not referenced to your module.

See:

The UserService service is referenced in PerioLoginPage module The PerioMainController controller is referenced in PerioDoorApplication module.

You've got either to:

reference the service in the same module as your controller.
inject the module where service is referenced to the module where controller is referenced.

edited Mar 31, 2017 at 13:42

answered Mar 31, 2017 at 13:18

korteee

2,7122 gold badges21 silver badges25 bronze badges

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

2 Comments

Groben Over a year ago

I disagree, he could use a "dependency" from the other module

korteee Over a year ago

You're right. This might happen if he would inject the module where service is referenced to the module where controller is referenced. Thanks for the reply. I am editing right forward.

Indranil Mondal · Accepted Answer · 2017-03-31 13:19:31Z

0

In this case I can see you have two modules Periodicloginpage and periodicdoorapplication. So two services are defined in two modules. So you have to put the Periodicloginpage as dependency of periodicdoorapplication.

var doorApplication = angular.module("PerioDoorApplication", ["PerioLoginPage"]);

answered Mar 31, 2017 at 13:19

Indranil Mondal

2,8673 gold badges29 silver badges42 bronze badges

Comments

Groben · Accepted Answer · 2017-03-31 13:49:34Z

As I said in my comments you have two things to do at least:

You need to return the functions you want to use from the service (UserService):

return{
    getUserInfo: getUserInfo, 
    reLoginUser: reLoginUser
};

Your module needs to reference the one the service is defined on:

angular.module('PerioDoorApplication', ['PerioLoginPage']);

And in your 'PerioMainController', a better way to write it would be:

doorApplication.controller('PerioMainController', ['$scope', '$http', '$sce', 'UserService', 
    function($scope, $http, $sce, UserService){
        [...]
    }
]);

Collectives™ on Stack Overflow

Call angular service in another js file

3 Answers 3

2 Comments

Comments

Comments

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

2 Comments

Comments

Comments

Related