私のAngularJSカスタムインターセプターが動作しないのはなぜですか

Question

この記事では、私のすべてのリクエストにサーバーベースのトークンを追加できるインターセプターを作成するために、この記事http://www.webdeveasy.com/interceptors-in-angularjs-and-useful-examples/に従っています。私はjsファイルで次のコードを作った。以下のファイルでは、SessionHolderはログイン時にトークンを格納するファイルです。現在、私はテキストをハードコーディングしています。

(function (module) { 
    module.factory('sessionManager', ['sessionHolder', function (sessionHolder) { 
     console.log("Reached sessionManager"); 
     var sessionManager = { 
      request: function (config) { 
       //if (sessionHolder.validation_capability) { 
       config.headers['x-session-token'] = 'saurabh'; 
       config.headers['baap'] = 'saurabh';//sessionHolder.AuthorisationToken; 
       //} 
       return config; 
      } 
     }; 
     return sessionManager; 


    }]); 

}(angular.module("MarketPlan"))); 

ここで、 "MarketPlan"は私のng-appです。

は今app.jsファイルで、私は、次のやっている：このコードで

(function (app) { 
     app.config(function ($stateProvider, $urlRouterProvider, $mdThemingProvider, datepickerPopupConfig, datepickerConfig, $httpProvider) { 

      // override defaults for date picker 
      datepickerPopupConfig.showButtonBar = false; 
      datepickerConfig.showWeeks = false; 

//guiding initial routes 
      $urlRouterProvider.otherwise(document.cookie.indexOf('main=1') !== -1 ? '/home' : '/business'); 

//setting theme configs 
      $mdThemingProvider.definePalette('grey', { 
       '50': 'eeeeee', 
       '100': 'ffffff', 
       '200': 'ffffff', 
       '300': 'ffffff', 
       '400': 'ffffff', 
       '500': 'ffffff', 
       '600': 'ffffff', 
       '700': 'ffffff', 
       '800': 'ffffff', 
       '900': 'ffffff', 
       'A100': 'ffffff', 
       'A200': 'ffffff', 
       'A400': 'ffffff', 
       'A700': 'ffffff', 
       'contrastDefaultColor': 'dark', 
       'contrastDarkColors': ['50', '100', '200'], 
       'contrastLightColors': undefined 
      }); 

    // I am trying to push the custom interceptor here, as the article says it needs //to be done in the app config 
      $httpProvider.interceptors.push('sessionManager'); 
     }); 


    }(angular.module("MarketPlan", ["my dependencies here"]))); 

、私はアプリケーションが起動するとすぐに不明なセッションプロバイダのエラーを取得しています。

私はこれがなぜ起こっているのか理解できません。参考までに、私の理解では、インターセプタ（工場）をあなたのアプリに登録する必要があります。このインターセプタの名前は、config内の$ httpProviderインターセプタ配列にプッシュされます（つまり、アプリケーションのブートストラップ時）。

これは正しい理解ですか？ここで年代順で行われていないことがありますか？

私をガイドしてください。

Answer 1

まあ、私はここで大失敗をしていることに気付いた。実際には、すべての小さなモジュールがメインアプリケーション（app.jsファイル）の依存としてグループ化されているプロジェクトのモジュールベースの構造に従っています。

これまでは、このようなモジュールにインターセプタを登録しようとしました。しかし、明らかなように、それはメインアプリ（ng-app）に登録する必要があります。

メインアプリでそれらを宣言すると、私の問題が解決しました。だから私のapp.jsは次のようになります：

(function (app) { 
    app.config(function ($stateProvider, $urlRouterProvider, $mdThemingProvider, datepickerPopupConfig, datepickerConfig, $httpProvider) { 

     //pushing interceptor here 
     $httpProvider.interceptors.push('sessionManager'); 

    }); 

    //declaring interceptor here 
    app.factory('sessionManager', ['sessionHolder', function (sessionHolder) { 
     console.log("Reached sessionManager"); 
     var sessionManager = { 
      request: function (config) { 
       //if (sessionService.validation_capability) { 
       config.headers['x-session-token'] = 'saurabh'; 
       config.headers['baap'] = 'saurabh';//sessionService.AuthorisationToken; 
       //} 
       return config; 
      } 
     }; 
     return sessionManager; 


    }]); 

    //declaring service to store token here 
    app.service('sessionHolder', function() { 
     console.log("Reached sessionHolder"); 
     var self = this; 
     this.validation_capability = false; 
     this.saveAuthorisationToken = function (token) { 
      self.AuthorisationToken = token; 
      self.validation_capability = true; 
     } 
    }); 

    //run function of the application 
    app.run(function ($rootScope) { 
    //runtime changes here 
    }); 

    app.controller('AppController', function() { 
    //controlled define in app, in case needed 
    }); 

}(angular.module("MarketPlan", ["my dependencies"]))); 

これは今うまくいきます。いつか誰かを助けてくれることを願っています