Angular Service在聲明全局模塊時不被識別

Question

我有一個角度應用程序，它有一個稱爲app的主模塊，然後是子模塊：app.ReportingApp，app.MediaJobApp，app.ManageUsers。

我有一個服務，允許從本地存儲顯示一些警報，什麼不是。

我發現的問題是，當我將服務依賴項注入到控制器中時，我想從子模塊中使用它。然而，當我在我的服務中聲明'app.Reporting'而不是'app'時，它可以工作，但是在其他地方破壞了其他東西。

我不能使用這樣的服務嗎？從邏輯上講，在服務中調用主模塊並且子模塊能夠調用與主模塊相關的服務是有意義的，但看起來我可能不得不做另一種服務來滿足模塊之間的分離。

下面是一些代碼：

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

}); 

和頂部ReportingCtrl.js：

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

我得到的錯誤是：Error: [$injector:unpr] Unknown provider: PageAlertServiceProvider <- PageAlertService <- ReportingCtrl，我發現這是由於我上面提到的問題。

幫助將不勝感激！謝謝！

Answer 1

你根本無法使用這樣的服務。您必須將服務的模塊注入到控制器的模塊中。創建app.ReportingApp模塊時

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

}); 

然後，你必須提供這項服務模塊作爲一個依賴：在這種情況下，解決方案可能是分離的服務到另一個模塊

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

然後你可以使用以下代碼無誤：

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

希望你能理解。