Angular Resources Service를 통한 JSON 읽기

Angular Resources Service를 통한 JSON 읽기

사용방법angular-resources.js서비스를 통해 JSON 파일을 읽는 것?

저는 테스트 목적으로 아주 기본적인 Angular 앱을 작업하고 있으며 지금 JSON 파일에서 데이터를 읽으려고 하고 있습니다.서버 기반 데이터 스토어를 이동할 때 더 쉽게 교체할 수 있도록 이 코드를 서비스에 배치합니다.

나의App그리고.App.controller선언문은 다음과 같습니다.

'use strict';

// create module for custom directives
var App = angular.module('App', ['jsonService']);

// controller business logic
App.controller('AppCtrl', function AppCtrl($scope, JsonService) {
    console.log("marker 1");

    if (!$scope.jsonData) {
        console.log("marker 2");
        JsonService.getData(function (d) {
            console.log(d);
            $scope.jsonData = d;
            $scope.records = d.length;
        });
    } else {
        console.log("I have data already... " + $scope.jsonData);
    }

    console.log($scope.jsonData);
});

나의JsonService현재 다음과 같이 정의됩니다.

'use strict';

angular.module('jsonService', ['ngResource'])
.factory('JsonService', function($resource, $filter) {
    // define the remote service using Angular's $resource module
    var service = $resource('/data/ProcessModeling-Resources.json', {});

    var JsonService = {
        // calls $resource.query() to retrieve the remote data.
        getData : function getData(callback) {
            console.log("marker 3");
            service.query(function (data) {
                console.log("marker 4");
            });
        }
    };

    return JsonService;
});

콘솔 출력은 다음과 같습니다.

marker 1 app.js:8
marker 2 app.js:11
marker 3 services.js:13
undefined app.js:21
TypeError: Object #<Resource> has no method 'push'
    at copy (http://127.0.0.1:8000/lib/angular.js:556:21)
    at new Resource (http://127.0.0.1:8000/lib/angular-resource.js:330:9)
    at http://127.0.0.1:8000/lib/angular-resource.js:386:32
    at forEach (http://127.0.0.1:8000/lib/angular.js:117:20)
    at http://127.0.0.1:8000/lib/angular-resource.js:385:19
    at wrappedCallback (http://127.0.0.1:8000/lib/angular.js:6650:59)
    at http://127.0.0.1:8000/lib/angular.js:6687:26
    at Object.Scope.$eval (http://127.0.0.1:8000/lib/angular.js:7840:28)
    at Object.Scope.$digest (http://127.0.0.1:8000/lib/angular.js:7707:25)
    at Object.Scope.$apply (http://127.0.0.1:8000/lib/angular.js:7926:24) angular.js:5582

전화를 걸려고 할 때 오류가 발생합니다.service.query(function (data) { }, 내 JSON 파일을 꺼내야 하는 것입니다.

앵귤러를 계속 써왔습니다.데이터를 끌어오기 위한 예로 JS Cats App을 들 수 있습니다.

@pkozlowski의 조언을 따르고 응답이 배열인지 확인하겠습니다.어쨌든 여기 댓글에 설명한 것과 유사한 JSON 파일에서 데이터를 로드하는 예가 있습니다.ngResource를 사용하며 http://plnkr.co/edit/Ofq7Md8udEnIhAPF1NgL?p=preview 을 통해 여러 가지 정보를 통합할 수 있습니다.

서비스를

angular.module('jsonService', ['ngResource'])
.factory('JsonService', function($resource) {
  return $resource('cats.json',{ }, {
    getData: {method:'GET', isArray: false}
  });
});

주의하세요.isArray로 설정됩니다.false.

앱과 컨트롤러

var app = angular.module('app', ['jsonService']);

app.controller('ctrl', function($scope, JsonService){
  JsonService.getData(function(data){
    $scope.name = data.name;
    $scope.children = data.children;
  });
});

getData리소스 클래스는 당신에게 다음과 같은 유용한 편의 방법을 제공하기 때문에 실제로 필요하지 않습니다.get, 그냥 이렇게 하면 됩니다.

angular.module('jsonService', ['ngResource'])
.factory('JsonService', function($resource) {
  return $resource('cats.json');
});

app.controller('ctrl', function($scope, JsonService){
  JsonService.get(function(data){
    $scope.name = data.name;
    $scope.children = data.children;
  });
});

언급URL : https://stackoverflow.com/questions/13849902/reading-in-json-through-angular-resources-service