Yeomanによって作成されたAngularJSアプリケーションのすべてのリクエストにヘッダーを追加します。

Question

Yeomanを使用して、初めてのAngularJSアプリケーションを作成しました。私はそうのようにそれをやった：私はapp.jsファイルを変更する必要がありますように思え

- app 
    - images 
    - scripts 
     app.js 
    - styles 
    - views 
    index.html 
    ... 
- bower_components 
- node_modules 
- test 

：

$ yo angular frontend 

を結果として、私は次のように標準のフォルダとファイルの束を持っていますすべての要求にヘッダーを追加します。しかし、私はAngularJsにはまったく新しいです。私は正確に何をすべきか分かりません。さて、のように見えるapp.js：私は推測

angular 
    .module('frontend', [ 
     ... 
    ]) 
    .config(function($routeProvider){ 
     $routeProvider 
      .when(...) 
    }); 

、私は$httpProviderを設定する必要がありますが、私はそれをどのように行うことができますか？

Answer 1

これにはinterceptorを使用する必要があります。ここでAngularJSのドキュメントからのお勧めの方法は次のとおりです。

// register the interceptor as a service 
$provide.factory('myHttpInterceptor', function($q, dependency1, dependency2) { 
    return { 
    // optional method 
    'request': function(config) { 
     // do something on success 
     return config; 
    }, 

    // optional method 
    'requestError': function(rejection) { 
     // do something on error 
     if (canRecover(rejection)) { 
     return responseOrNewPromise 
     } 
     return $q.reject(rejection); 
    }, 



    // optional method 
    'response': function(response) { 
     // do something on success 
     return response; 
    }, 

    // optional method 
    'responseError': function(rejection) { 
     // do something on error 
     if (canRecover(rejection)) { 
     return responseOrNewPromise 
     } 
     return $q.reject(rejection); 
    } 
    }; 
}); 

$httpProvider.interceptors.push('myHttpInterceptor'); 

あなたはすべてのメソッドはオプションですと、'request'メソッドを実装するだけです。提供されるconfigオブジェクトは、角度$httpの設定オブジェクトであり、headersプロパティを含んでいます。あなたはこれに簡単に十分なあなたのヘッダを追加することができるはずです。

config.headers.myHeader = myValue; 
return config; 

あなたは、単に引数リストに追加することで、あなたのconfigブログで$httpProviderをつかむことができます。

angular 
    .module('frontend', [ 
     ... 
    ]) 
    .config(function($routeProvider, $httpProvider, $provide){ 
     $routeProvider 
      .when(...) 

     // register the interceptor as a service 
     $provide.factory('myHttpInterceptor', function() { 
      return { 
      // optional method 
      'request': function(config) { 
       config.headers.myHeader = myValue; 
       return config; 
      }, 
      }; 
     }); 

     $httpProvider.interceptors.push('myHttpInterceptor'); 
    }); 

Answer 2

追加するためのよりよい解決策すべてのリクエストのヘッダー[$ httpProviderドキュメント]をreadungによって

app.run(['$http', function ($http) { 
    $http.defaults.headers.common['myHeader'] = 'myHeaderValue'; 
}]);