ui-router stateParamsとインターセプタを使用したすべてのapiリクエストの更新

Question

私はAngularアプリケーションを使って、同じテンプレートをいくつかの場所で再利用しています。そのいくつかのコンポーネントを私が持っているこれらのページテンプレート内

$stateProvider 
    .state('root', { 
    url: '/locations/{location:[^/]*}', 
    abstract: true, 
    template: '<ui-view/>' 
    }); 

：URLはのようなものを見て：

/locations/location1/ 
/locations/location2/ 
/locations/location1/about 
/locations/location2/about 

そして私は私の他のルートが彼らの親として設定された位置のparamを設定状態を設定していますAPIリクエストを行います。私は何をしたいのは、APIへのすべてのHTTP要求を傍受し、$ stateParamsでのlocationプロパティに基づいて位置IDを先頭に追加：

ng1UIRouter <- $stateParams <- apiInterceptor <- $http <- ng1UIRouter 

：

function apiInterceptor ($stateParams) { 
    return { 
    request: (config) => { 
     config.url = $stateParams.location + '/' + config.url; 
     return config; 
    } 
    }; 
} 

module 
.factory('apiInterceptor', apiInterceptor) 
.config(function($httpProvider { 
    $httpProvider.interceptors.push('apiInterceptor'); 
} 

残念ながら、これは私に循環依存関係を与えます

私は$ injectorを使って循環依存を回避することができると信じていますが、この問題にぶつかるのはおそらく何らかのアーキテクチャ上の問題があることを意味しています。個々のAPIリクエストのコードをすべて複製することなく、場所IDを取得するより良い方法はありますか？手動$injector

を使用してサービスを注入することができ、円形の依存関係のために

Answer 1

は

function apiInterceptor ($injector) { 
    var $stateParams = $injector.get('$stateParams'); 
    return { 
    request: (config) => { 
     config.url = $stateParams.location + '/' + config.url; 
     return config; 
    } 
    }; 
}