角度は$ qで私のコードを改善します

Question

私は$ qを理解しようとします、私はwordpress api v2からデータを取得するコードを書いています： $ httpサービス！それはうまく動作しますが、私はこのコードが間違っていると理解しています 私は非同期コードが必要です。

[ ] 
0: Object: 
    id:19 
    image:"http://ipets.co.il/jobs/wp-content/uploads/2016/07/588.jpg" 
    title:"דרוש מלצר/ית לאולם ארועים ״נסיה״" 
1: Object: 
    id:14 
    image:url 
    title:title 

私の結果、それ罰金：ので、私は私のコード

myApp.controller('mainCtrl',['$scope','$http',function($scope,$http){ 
    $scope.myposts = []; 


function sort(){ 
    $http.get('http://www.ipets.co.il/jobs/wp-json/wp/v2/posts').success(function(posts){ 
       angular.forEach(posts , function(post,key){ 
        $http.get('http://www.ipets.co.il/jobs/wp-json/wp/v2/media/'+post.featured_media 
).success(function(media){ 

        var postObj = {} 
         postObj.id = post.id 
         postObj.title = post.title.rendered 
         postObj.image = media.source_url 
         $scope.myposts.push(postObj) 

        // console.log($scope.myposts) 

      }) 

       }) 


     }) 
} 
sort(); 
console.log($scope.myposts) 
}]); 

結果（コンソール）を向上させる助けてください！しかし私は私の道が間違っていることを知っています 私は "console.log（$ scope.myposts）"と呼ぶとき、すべてのデータを取得するために完了していないので。

私はインターネット検索から分かりますが、私は$ qサービスを利用する必要があります。 しかし、私はどのように自分のコードになるか分からない。 何人かが私を助けることができますか？

Answer 1

必要なサービスを作成する必要があります。コントローラは、ビューに必要なビジネスロジックのみを含める必要があります。

私はあなたのapisを嘲笑しました。この例は、レンダリングに少し時間が必要です。待ってください。

function PostsServiceFactory($http, $q) { 
 
    //const POSTS_API = 'http://www.ipets.co.il/jobs/wp-json/wp/v2/posts'; 
 
    //const MEDIA_API = 'http://www.ipets.co.il/jobs/wp-json/wp/v2/media/'; 
 
    
 
    // MOCK YOUR API WITH JSON FAKE 
 
    const FAKE = "https://jsonplaceholder.typicode.com" 
 
    const POSTS_API = `${FAKE}/posts`; 
 
    const MEDIA_API = `${FAKE}/photos`; 
 
    
 
    this.getPosts = function() { 
 
    return $http 
 
     .get(POSTS_API) 
 
     .then(result => result.data) 
 
     .then(posts => $q.all(posts.map(post => { 
 
     let media = post.featured_media || ""; 
 
     
 
     return $http 
 
      .get(`${MEDIA_API}${media}`) 
 
      .then(result => result.data) 
 
      .then(media => { 
 
      return { 
 
       "id": post.id, 
 
       "title": post.title, 
 
       "image": media.url 
 
      }; 
 
      }) 
 
     ; 
 
     }))) 
 
    ; 
 
    } 
 
} 
 

 
function TestCtrl($scope, PostsService) { 
 
    $scope.posts = "LOADING..."; 
 
    PostsService 
 
    .getPosts() 
 
    .then((posts) => { 
 
     $scope.posts = posts; 
 
    }) 
 
    ; 
 
} 
 

 
angular 
 
    .module('test', []) 
 
    .service("PostsService", ["$http", "$q", PostsServiceFactory]) 
 
    .controller("TestCtrl", ["$scope", "PostsServiceFactory", TestCtrl])

<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script> 
 

 
<section ng-app="test"> 
 
    <article ng-controller="TestCtrl"> 
 
    <div ng-bind="posts | json"></div> 
 
    </article> 
 
</section>