グローバルモジュールで宣言したときに角型サービスが継承されない

Question

私は、appという名前のメインモジュールと、app.ReportingApp、app.MediaJobApp、app.ManageUsersという子モジュールを持つ角型アプリケーションを持っています。

ローカルのストレージから一部のアラートを表示するサービスと、そうでないものがあります。

私が見つけた問題は、子モジュールから使用したいコントローラにサービス依存関係を注入すると、それが壊れてしまうことです。しかし、私がappの代わりに私のサービスで 'app.Reporting'を宣言すると、動作しますが、他のものを壊します。

私はこのようなサービスを利用できませんか？論理的にはメインモジュールをサービスで呼び出させ、子モジュールはメインモジュールに関連するサービスを呼び出すことができますが、モジュール間の分離を満たすために別のサービスを作成する必要があるようです。ここで

は、いくつかのコードは次のとおりです。

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

このようなサービスを使用することはできません。あなたは、コントローラのモジュールにサービスのモジュールを注入する必要があります。この場合、解決策は、別のモジュールへのサービスを分離されることがあります。

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

}); 

次に、あなたが依存関係として、このサービスモジュールを提供する必要がapp.ReportingAppモジュール作成するとき：

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

を次にあなたが使用することができますエラーなしの次のコード：

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

ご理解いただきますようお願い申し上げます。