角度ui-routerが解決された非同期データを取得する

Question

編集したアイテムに対応するデータを含むフォームを表示したい。私はルーティングのためにui-routerを使用します。私はresolveを使用できるかどうか私は知らない

gapi.client.realestate.get(propertyId).execute(function(resp) { 
     console.log(resp); 
    }); 

：、私は、データが次の呼び出し（Googleクラウドエンドポイント）から来ると$scope.propertyを設定したいPropertyControllerで

myapp.config(function($stateProvider) { 

    $stateProvider. 
    .state('layout.propertyedit', { 
     url: "/properties/:propertyId", 
     views : { 
      "contentView@": { 
       templateUrl : 'partials/content2.html', 
       controller: 'PropertyController' 
      } 
     } 
    }); 

：私は状態を定義しましたデータが非同期的に返されるためです。私はまず問題、propertyIdが定義されていない

resolve: { 
     propertyData: function() { 
      return gapi.client.realestate.get(propertyId).execute(function(resp) { 
       console.log(resp); 
      }); 
     } 
    } 

を試してみました。 url: "/properties/:propertyId"からどのようにpropertyIdを取得しますか？

基本的には、$scope.propertyをPropertyControllerからrespに、非同期呼び出しによって返されたオブジェクトに設定します。

EDIT：

myapp.controller('PropertyController', function($scope, , $stateParams, $q) { 

    $scope.property = {}; 

    $scope.create = function(property) { 
    } 

    $scope.update = function(property) { 
    } 

function loadData() { 
    var deferred = $q.defer(); 

    gapi.client.realestate.get({'id': '11'}).execute(function(resp) { 
     deferred.resolve(resp); 
    }); 

    $scope.property = deferred.promise; 
} 

}); 

Answer 1

：これはどのように

Answer 2

私はあなたのコントローラ機能は、あなたのpropertyIdを得ることができ、そこから$stateParamsパラメータが必要だと思います。そして、あなたはこのようなもので$scope.propertyを設定する約束を$qパラメータを使用して作成することができます。

var deferred = $q.defer(); 

gapi.client.realestate.get(propertyId).execute(function(resp) { 
    deferred.resolve(resp); 
}); 

$scope.property=deferred.promise; 

はここで非同期呼び出しを処理するためのdescription of using promisesです。あなたはthe docs for resolveを読む必要が

function PropertyController($scope, $stateParams) { 
    gapi.client.realestate.get($stateParams.propertyId).execute(function(resp) { 
    $scope.property = resp; 
    }); 
} 

Answer 3

。解決機能は、注射され、そしてそのようにあなたは、あなたのルートから正しい値を取得するために$stateParamsを使用することができます。

resolve: { 
    propertyData: function($stateParams, $q) { 
     // The gapi.client.realestate object should really be wrapped in an 
     // injectable service for testability... 

     var deferred = $q.defer(); 

     gapi.client.realestate.get($stateParams.propertyId).execute(function(r) { 
      deferred.resolve(r); 
     }); 
     return deferred.promise; 
    } 
} 

最後に、解決機能の値を一度に解決して、コントローラに、注射されています

myapp.controller('PropertyController', function($scope, propertyData) { 

    $scope.property = propertyData; 

}); 

Answer 4

適切な方法で

状態コード決意を使用するには、この簡単な方法試してみてください：

---

を私はこの /demo/action/5 のように送信する場合、この数5は、サービスは、いくつかのJSONデータが基づいて取得 actionDataサービスになります例については、私はURLに送信していたパラメータのデータを送信しています上記のコードで

.state('yourstate', { 
       url: '/demo/action/:id', 
       templateUrl: './view/demo.html', 
       resolve:{ 
        actionData: function(actionData, $q, $stateParams, $http){ 
         return actionData.actionDataJson($stateParams.id); 
        } 
       }, 
       controller: "DemoController", 
       controllerAs : "DemoCtrl" 
      }) 

---

id。最後に、データがactionDataに保存されますあなたは、州レベルで合格IAM IDに基づいて、直接コードの復帰後、いくつかのJSONデータをその名前

を使用して、コントローラでそれを使用することができます

---

(function retriveDemoJsonData(){ 

    angular.module('yourModuleName').factory('actionData', function ($q, $http) { 

     var data={}; 
     data.actionDataJson = function(id){ 
      //The original business logic will apply based on URL Param ID 
      var defObj = $q.defer(); 
      $http.get('demodata.json') 
       .then(function(res){ 
        defObj.resolve(res.data[0]); 
       }); 
      return defObj.promise; 
     } 
     return data; 
    }); 

})(); 

---