如何将json加载到我的angular.js ng模型中？

Question

我有一个我认为可能是非常明显的问题，但是我在任何地方都找不到答案。

我只是想将一些JSON数据从服务器加载到客户端。现在，我正在使用JQuery通过AJAX调用（下面的代码）加载它。

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

这位于html文件中。到目前为止，它仍然有效，但问题是我想使用AngularJS。现在，虽然Angular
CAN使用变量，但我无法将整个内容加载到变量中，因此可以为每个循环使用a。这似乎与通常位于.js文件中的“ $ Scope”有关。

问题是我无法将其他页面的代码加载到.js文件中。每个Angular示例仅显示如下内容：

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

因此，如果IA）要手动输入所有内容，并且B）如果我事先知道我的所有数据是什么，那么这将非常有用。

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

因此，当我尝试使用$ Resource将AJAX调用更改为Angular时，它似乎不起作用。也许我无法弄清楚，但这是一个相对简单的JSON数据GET请求。

tl：dr我无法使AJAX调用工作以将外部数据加载到角度模型中。

Answer 1

正如Kris所提到的，您可以使用该$resource服务与服务器进行交互，但是给我的印象是您正在开始使用Angular的旅程-我上周去过那里-
因此，我建议直接开始尝试使用该$http服务。在这种情况下，您可以调用其get方法。

如果您具有以下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方法返回一个 Promise 对象，第一个参数是 成功 回调，第二个参数是 错误 回调。

当您将$httpAngular作为函数的参数添加时，它会神奇地将$http资源注入到控制器中。

我在这里举了一些例子

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