如何使用使用angularJS RESTful服务从外部文件JSON数据 [英] How do i use json data from external file using angularJS restful service

问题描述

我开发的应用程序。在我从一个检索的JSON数据

使用$ http.get（）方法外部文件它工作得很好。我现在想用角

RESTful服务。它是在过滤器工作正常，但是当我在控制器使用它

显示不确定的。

  // Service.js文件
angular.module（'calenderServices'，['ngResource']）。
工厂（'活动'，函数（$资源）{
返回$资源（'/ EventCalender /：File.json'，{}，{
查询：{方法：GET，则params：{文件：'事件'}，IsArray的：真正}
}）;
}）;
        //这是我的应用程序模块
angular.module（'日历'，['eventFilters'，'亮点'，'事件'，'calenderServices']）。
配置（['$ routeProvider'，函数（$ routeProvider）{
$ routeProvider。
  当（''，{templateUrl：template.html'，控制器：MonthCtrl}）。
  否则（{redirectTo：'/无效'}）;
}]）;
     //这是我filter.js
angular.module（'eventFilters'，['calenderServices']）。过滤器（'比较'，函数（事件）{
VAR的事件= Events.query（）;
警报（事件[0]。名称）; //它显示的名称为Milestone1}）;
     //这是我的控制器。
功能MonthCtrl（$范围，事件）{
VAR的事件= Events.query（）;
    警报（事件[0]。名称）; //它显示未定义
    }     //每当我试图使用变量'事件'的控制器，它显示未定义或为空。但是，在过滤器上，工作正常。
 

解决方案

以下不会工作，因为 ngResource 使一个 异步的 http请求。

  VAR的事件= Events.query（）;
警报（事件[0]。名称）; //＆LT; ---这里的事件是一个空数组
 

通常你需要做的是以下内容，您的数据将在您的视图渲染

  $ scope.events = Events.query（）
 

它看起来像一个同步的操作，但实际上并非如此。这是在工作角的禅宗。您可以从文档学习细节。

要进一步处理数据，你也可以通过传递一个成功回调至 GET 法

  Events.query（函数（事件）{
    //这里您可以访问的第一个事件的名字
    的console.log（事件[0]。名称）;
}）;
 

这里有一个工作示例： http://plnkr.co/edit/NDZ2JWjMUoUvtzEuRUho？ p = preVIEW

I am developing an application. In that i am retrieving the json data from an

external file using $http.get() method it worked fine. Now i am trying to use angular

restful services. it is working fine in filters, but when i use it in controller it is

displaying undefined.

//Service.js File
angular.module('calenderServices', ['ngResource']).
factory('Events', function($resource){
return $resource('/EventCalender/:File.json', {}, {
query: {method:'GET', params:{File:'events'}, isArray:true}
});
});


        //This is my app Module
angular.module('calender', ['eventFilters','highlight','event','calenderServices']).
config(['$routeProvider', function($routeProvider) {
$routeProvider.
  when('', {templateUrl: 'template.html',   controller: MonthCtrl}).
  otherwise({redirectTo: '/invalid'});
}]);


     //This is my filter.js
angular.module('eventFilters', ['calenderServices']).filter('compare', function(Events) {
var events=Events.query();
alert(events[0].name); //it is displaying the name "Milestone1" });


     //This is my controller.
function MonthCtrl($scope, Events){
var events=Events.query();
    alert(events[0].name); //it is displaying undefined
    }

     //whenever i try to use the variable 'events' in controller, it is displaying undefined or null.  But in filter it is working fine. 

解决方案

The following wont work because ngResource makes an asynchronous http request.

var events=Events.query();
alert(events[0].name); // <--- here events is an empty array

Usually all you need to do is the following and your data will be available to render in your view

$scope.events = Events.query()

It looks like a synchronous operation, but it isn't. This is angular's zen at work. You can learn the details from the docs.

To further process the data, you could also pass pass a success callback to the get method

Events.query(function(events){
    // here you have access to the first event's name
    console.log(events[0].name);
});

here's a working example: http://plnkr.co/edit/NDZ2JWjMUoUvtzEuRUho?p=preview

这篇关于如何使用使用angularJS RESTful服务从外部文件JSON数据的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！