如何加载JSON到我angular.js NG-模式？ [英] How to load json into my angular.js ng-model?

问题描述

我有什么，我觉得可能是一个非常明显的问题，但我无法找到答案的任何地方。

I have what I think is probably a very obvious question, but I couldn't find an answer anywhere.

我只是想从我的服务器加载一些JSON数据到客户端。现在，我使用jQuery与AJAX调用（低于code）加载它。

I am just trying to load some JSON data from my server into the client. Right now, I am using JQuery to load it with an AJAX call (code below).

<script type="text/javascript">
var global = new Array();
$.ajax({
    url: "/json",
    success: function(reports){
        global = reports;
        return global;
        }
    });
</script>

这是坐落在HTML文件中。它的工作原理，到目前为止，但问题是，我想使用AngularJS。现在，虽然角度可以使用变量，我不能加载到一个变量整个事情，所以我可以用一个for each循环。这似乎与到$范围，它通常位于js文件

This is located in the html file. It works so far, but the issue is that I want to use AngularJS. Now, while Angular CAN use the variables, i cannot load the whole thing into a variable so I can use a for each loop. This seems to be related to the "$Scope", which is usually located in the .js file.

现在的问题是，我不能加载其他页面code到.js文件。角的每一个例子只能说明这样的东西：

The problem is that I cannot load code from other pages into a .js file. Every example of Angular only shows stuff like this:

function TodoCtrl($scope) {
  $scope.todos = [
    {text:'learn angular', done:true},
    {text:'build an angular app', done:false}];

所以，这是非常有用的，如果我 A）想通过手动输入所有这一切，和 B）如果我事先知道我所有的数据是什么......

So, this is useful, if I A) Want to type all of this by hand, AND B) If I know in advance what all my data is...

我事先不知道DO（数据是动态的），我不想键入它。

I don't know in advance (the data is dynamic) and I don't want to type it.

所以，当我试图改变使用$资源的AJAX调用角，它似乎并没有工作。也许我不出来，但它是JSON数据相对简单的GET请求。

So, when I tried to change the AJAX call to Angular using $Resource, it doesn't seem to work. Maybe I can't figure it out, but it is a relatively simple GET request for JSON data.

TL：医生我不能让AJAX调用，以外部数据加载到角模式工作

推荐答案

由于克里斯提到，您可以使用 $资源服务与服务器进行交互，但我得到在IM pression你开始你的旅程与角 - 我在那里上周 - 所以我建议，开始直接与 $ HTTP 服务试验。在这种情况下，你可以调用它的 GET 方法。

As Kris mentions, you can use the $resource service to interact with the server, but I get the impression you are beginning your journey with Angular - I was there last week - so I recommend to start experimenting directly with the $http service. In this case you can call its get method.

如果你有以下的JSON

If you have the following JSON

[{ "text":"learn angular", "done":true },
 { "text":"build an angular app", "done":false},
 { "text":"something", "done":false },
 { "text":"another todo", "done":true }]

您可以加载像这样

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

App.controller('TodoCtrl', function($scope, $http) {
  $http.get('todos.json')
       .then(function(res){
          $scope.todos = res.data;                
        });
});

在 GET 方法返回一个的的诺言的对象， 第一个参数是的成功的回调和第二的的错误的 回调。

The get method returns a promise object which first argument is a success callback and the second an error callback.

当您添加 $ HTTP 作为函数角的参数做它的魔法 并注入了 $ HTTP 资源到控制器。

When you add $http as a parameter of a function Angular does it magic and injects the $http resource into your controller.

我已经把一些例子这里

• http://plnkr.co/edit/Wuc6M7?p=$p$pview
• https://gist.github.com/3938567

• http://plnkr.co/edit/Wuc6M7?p=preview
• https://gist.github.com/3938567

这篇关于如何加载JSON到我angular.js NG-模式？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！