如何angular-resources.js通过服务读取JSON文件?
angular-resources.js
我正在为测试目的而开发一个非常基本的Angular应用程序,并且现在只是尝试从JSON文件中读取数据。我将此代码放在服务中,以便在移动基于服务器的数据存储时可以更轻松地将其换出。
我App和App.controller声明如下:
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的定义如下:
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
当我尝试调用my时收到错误消息service.query(function (data) { }(如果我理解正确的话),这应该将我的JSON文件放入其中。
service.query(function (data) { }
我一直使用AngularJS 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。
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实际上不需要,因为 Resource 类为您提供了一些有用的便捷方法,例如get,您可以执行此操作
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; }); });