コントローラーを使用してjsonコールを作成しましたが、factory（angularjs）を使用したい

Question

コントローラを使用して正常に機能するapiを使用しましたが、工場やサービスを使用して使用したい、私はそれをあまり理解していないかもしれません。私は現在、AngularJsのコースを取っているので、私は何か愚かなことを求めている場合は申し訳ありません。

また、工場やサービスなどを使用するのに最適なものは誰でも教えてもらえます。

この方法で、それが正常に動作します：

HTML：

<div ng-controller="PromiseCtrl"> 
    <li ng-repeat="post in posts" > 
     {{post.link}}<br/> 
     {{post.title}} 
    </li> 
</div> 

コントローラー：

HTML：

.controller('PromiseCtrl', ['$scope', '$http', function($scope, $http) { 
    $http.get('http://www.zemtv.com/wp-json/wp/v2/posts').then(function(value) { 
     $scope.posts = value.data; 
    }); 
}]); 

これは私が問題に直面しています場所です。

<div ng-controller="PromiseCtrl"> 
    <li ng-repeat="post in posts" > 
     {{post.link}}<br/> 
     {{post.title}} 
    </li> 
</div> 

コントローラー：

.controller('PromiseCtrl', ['$scope', '$http', function($scope, $http) { 
    $http.get('http://www.zemtv.com/wp-json/wp/v2/posts').then(function(value) { 
     $scope.posts = value.data; 
    }); 
}]) 

ファクトリー：（私はこれを正しく使用していない、私は思う）

angular.module('confusionApp') 
    .factory('menuFactory', function() { 
     $http.get('http://www.zemtv.com/wp-json/wp/v2/posts').then(function(value) { 
      var posts = value.data; 
     }); 
}); 

Answer 1

私はこれのいずれかをテストしていませんが、それはの線に沿ってです：

angular.module('confusionApp') 
    .factory('menuFactory', function() { 
     return { 
      getPosts: function() { 
       return $http.get('http://www.zemtv.com/wp-json/wp/v2/posts') 
      } 
     } 
}); 

次にコントローラから：

.controller('PromiseCtrl', ['$scope', '$http', 'menuFactory', function($scope, $http, menuFactory) { 
    menuFactory.getPosts().then(function(response){ 
     $scope.posts = response.data; 
    }); 
}]); 

サービスの使い方と、それらがコントローラによってどのように注入され、使用されているかをよりよく理解することができます。