AngularJSで1つのコントローラアプリケーションでjsonファイルを使用する方法

Question

jsonファイルのサービスを作成してこのサービスをコントローラで呼び出す方法がわかりません。 私のアプリにはコントローラが1つありますので、そのままにしておく必要があります。

Answer 1

がrun code snippet青色のボタンを経由してこの例を実行するようにしてください。

基本的には、そのサービスを宣言する必要があります。Angular.DIで最後にサービスメソッドを呼び出し、その結果を待つ必要があります。 は、それはあなたがどのようなエラーが出るん

angular 
 
    .module('test', []) 
 
    .constant('API' , 'https://jsonplaceholder.typicode.com') 
 
    .service('TestService', function(API, $http) { 
 
     
 
    this.getData = function() { 
 
     return $http 
 
     .get(API + '/photos') 
 
     .then(function(response) { 
 
      return response.data; 
 
     }) 
 
     }; 
 
    }) 
 
    .controller('TestCtrl', function($scope, TestService) { 
 
    
 
    //But a Resolve is preferred 
 
    TestService 
 
    .getData() 
 
    .then(function(data) { 
 
     $scope.album = data; 
 
    }) 
 
    ; 
 
}) 
 
;

<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-repeat="photo in album"> 
 
     <h3 ng-bind="photo.title"></h3> 
 
     <img ng-src="{{photo.thumbnailUrl}}" /> 
 
    </div> 
 
    </article> 
 
</section>

Answer 2

あなたのコントローラからサービスを呼び出す必要があります。

あなたのサービス：あなたのコントローラ機能で

angular.module('YOURAPP') 
.service("userAService", function ($http) { 
       this.promise= function() { 
        return $http.get('resources/json/data.json') 
       } 
    }); 

そして：

mycontroller = function(userAService){ 
    userAService.promise().then(
     function(response){ 
      //do what you want in your promise 
      // try console.log(response.data) to see if you get your data. 
     } 
    ) 
}