4

AngularJS の $http サービスを使用しているときに、バックエンドへのすべての URL を管理するのが難しいことがわかりました。それらはコントローラーのコードに分散しています。場合によっては、それらが重複していることさえあります。ほとんどの場合、それらはすべて$http.get('/api/something').then(...).

それらすべてを異なるサービスに配置するのは非常に不合理に思えます。これはわずか 1 行のコードであり、小さな変更 (ヘッダーの追加など) が必要な場合があります。

他の解決策はそれらを定数に入れることかもしれませんが、この場合、私はまだ$http.get(APIURLs.SomeURL)少し冗長に見えるものを使用します...

問題は、バックエンドへの URL を管理する最善の方法は何かということです。

4

3 に答える 3

2

現在、それらをサービスにグループ化し、$http への呼び出しとして公開するというアイデアを思いつきました。これが私の解決策です： http://plnkr.co/edit/VjqXHBV54bmjKCuGJ4qX?p=preview

サービス：

.factory('AdminAPI', function($http) {
   var apiMap = {
     'DeleteAuth': {url:'/api/oauth/delete',method:'PUT'},
     'GetInvalidUser': {url:'/api/users/invalid',method:'GET'},
     'CreateItem': {url:'/api/items/create',method:'POST'}     
   };
   var api = {};  
   var prepareCall = function(config) {
     return function(params) {  
       var requestConfig = angular.copy(config);
       if (config.method=='GET')
          requestConfig.params = params;
       else 
          requestConfig.data = params;       
       return $http(requestConfig);
     };
   };
   for(var name in apiMap) 
     api[name] = prepareCall(apiMap[name]);   
   return api;
});

そしてコントローラーでは、次のようなことをします：

AdminAPI.DeleteAuth({data:123}).then(function(result) {
  //
});

この場合、いくつかの抽象化 ($httpコントローラーに注入する必要はありません) があるため、単体テストが少し簡単になります ($httpBackend サービスを使用する必要はなく、サービス呼び出しをモックするだけです)。

于 2013-03-25T13:42:46.103 に答える
0

angular Module.constantを利用します:

  • 再利用可能な設定を単一のオブジェクトに移動します。

  • このオブジェクトをラップする angular モジュールを定義します。

    angular.module('myApp.constants', []).constant('config', {
    ROUTES: {
       home: '/home.html',
       about: '/about.html'
    }
});

  • myApp.constantsモジュールを他のすべてのものとともにアプリケーションにロードします。

    angular.module('myApp', [
    'myApp.constants',
    'myApp.services',
    'myApp.controllers',
    'myApp.filters',
    'myApp.directives'
]);

その後、config依存関係を注入し、定義されたハッシュにアクセスできます。

于 2013-03-25T13:55:23.327 に答える
0

良い質問。私の提案するアプローチは、定数を次のconstantような宣言に入れることです。

angular.module('fooApp').constant('config', {
                                      api: {
                                        baseUrl: 'http://api.example.com/api',
                                        key: 'SECRET_API_KEY',
                                      }
});

httpResourceFactoryまた、config.xml で定義された定数を使用して、さまざまなエンドポイントを指す $http または $resource 参照の作成を担当する を実装できます。これは、サービスで実装できます。

その後、すべての API エンドポイント定義を 1 つのサービスに入れることができます。

angular.module('fooApp').factory('dataService', ['httpResourceFactory',  function(httpResourceFactory) {

    var PUBLIC_API = {};

    PUBLIC_API.Orders = httpResourceFactory('/orders/:id');
    PUBLIC_API.Users = httpResourceFactory('/some-url/users/:id');


    return PUBLIC_API;

  }]);

dataService次に、コントローラーで次のようなことを注入して実行できます。

$scope.users = dataService.Users.query();

これがそれを明確にしたことを願っています。急いでいるので、もっと具体的に質問してください。後でさらに例を示します。

于 2013-03-25T22:35:45.250 に答える