使用全局模块声明时无法识别Angular Service

Question

I have an angular application that has a main module called app and then child modules: app.ReportingApp, app.MediaJobApp, app.ManageUsers.

I have a service that allows some alerts to be show from local storage and what not.

The issue I have found is that when I inject the service dependency into the controller I want to use from a child module it breaks. Yet when I declare 'app.Reporting' in my service instead of 'app', it works but breaks things else where.

Am I not able to use a service like this? Logically it makes sense to have the main module being called in the service and the child modules being able to call a service related to the main module but it is looking like I may have to make another service to satisfy the separation between modules.

Here is some code:

app.js:

    angular.module('app', ['app.MediaJobApp', 'app.ManageUsers', 'app.ReportingApp'])
.run(function ($http) {
    $http.defaults.headers.common['X-XSRF-Token'] =
        document.getElementsByName('__RequestVerificationToken')[0].getAttribute("value");
});

app.ReportingApp.js:

angular.module('app.ReportingApp', []);

PageAlertService.js:

angular.module('app').service('PageAlertService', function () {

    this.setAlert = function() {
        console.log("In setAlert");
        if (localStorage.getItem("Success")) {
            var alertObj = {
                alert: "Success",
                alertMessage: localStorage.getItem("Success")
            };
            console.log(alertObj);
        } else if (localStorage.getItem("Error") && localStorage.getItem("Error") != null) {
            var alertObj = {
                alert: "Error",
                alertMessage: localStorage.getItem("Error")
            };

        };
        return alertObj;
    };

    this.errorStatusCheck = function(error, successString) {
        if (error.status = -1) {
            localStorage.setItem("Success", successString);
        } else {
            localStorage.setItem("Error", "Error occured: " + error.status + error.statusText);
        };
    };

});

and top of ReportingCtrl.js:

angular.module('app.ReportingApp').controller('ReportingCtrl',
    [
        '$scope',
        'ReportingService',
        'PageAlertService',
        function ($scope, ReportingService, PageAlertService) {

The error I get is: Error: [$injector:unpr] Unknown provider: PageAlertServiceProvider <- PageAlertService <- ReportingCtrl , Which I have found to be due to the issue I have talked about above.

Answer 1

You simply cannot use services like this. You must have to inject the module of the service into the module of your controller. In this case, the solution might be separating the service into another module:

angular.module('app.service').service('PageAlertService', function () {

    this.setAlert = function() {
        console.log("In setAlert");
        if (localStorage.getItem("Success")) {
            var alertObj = {
                alert: "Success",
                alertMessage: localStorage.getItem("Success")
            };
            console.log(alertObj);
        } else if (localStorage.getItem("Error") && localStorage.getItem("Error") != null) {
            var alertObj = {
                alert: "Error",
                alertMessage: localStorage.getItem("Error")
            };

        };
        return alertObj;
    };

    this.errorStatusCheck = function(error, successString) {
        if (error.status = -1) {
            localStorage.setItem("Success", successString);
        } else {
            localStorage.setItem("Error", "Error occured: " + error.status + error.statusText);
        };
    };

});

Then when creating the app.ReportingApp module you have to provide this service module as a dependency:

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

Then you can use the following code without error:

angular.module('app.ReportingApp').controller('ReportingCtrl',
    [
        '$scope',
        'ReportingService',
        'PageAlertService',
        function ($scope, ReportingService, PageAlertService) {

Hope you will understand.