Почему мой пользовательский Interceptor 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.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"]))); 

С помощью этого кода я получаю Неизвестная ошибка поставщика Session как только запуске приложения.

Я не могу понять, почему это происходит. FYI, я понимаю, что перехватчик (завод) должен быть зарегистрирован в вашем приложении. Имя этого перехватчика должно быть перенесено в массив перехватчика $ httpProvider в config (например, при загрузке приложения).

Это правильное понимание ?? Есть что-то, что здесь не было хронологическим.

Прошу вас, провери меня.

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"]))); 

Это сейчас отлично работает. Надеюсь, что кому-нибудь это поможет?