正如 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对象，其中第一个参数是成功回调，第二个参数是错误 回调。

当您$http作为函数的参数添加Angular 时，它会变魔术并将$http资源注入您的控制器。

我在这里放了一些例子

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

这是一个如何将 JSON 数据加载到 Angular 模型的简单示例。

我有一个 JSON 'GET' Web 服务，它从 Microsoft 的 Northwind SQL Server数据库的在线副本返回客户详细信息列表。

http://www.iNorthwind.com/Service1.svc/getAllCustomers

它返回一些 JSON 数据，如下所示：

{ 
    "GetAllCustomersResult" : 
        [
            {
              "CompanyName": "Alfreds Futterkiste",
              "CustomerID": "ALFKI"
            },
            {
              "CompanyName": "Ana Trujillo Emparedados y helados",
              "CustomerID": "ANATR"
            },
            {
              "CompanyName": "Antonio Moreno Taquería",
              "CustomerID": "ANTON"
            }
        ]
    }

..我想用这些数据填充下拉列表，看起来像这样......

我希望每个项目的文本都来自“CompanyName”字段，而 ID 来自“CustomerID”字段。

我该怎么做？

我的 Angular 控制器看起来像这样：

function MikesAngularController($scope, $http) {

    $scope.listOfCustomers = null;

    $http.get('http://www.iNorthwind.com/Service1.svc/getAllCustomers')
         .success(function (data) {
             $scope.listOfCustomers = data.GetAllCustomersResult;
         })
         .error(function (data, status, headers, config) {
             //  Do some error handling here
         });
}

...用这组 JSON 数据填充“listOfCustomers”变量。

然后，在我的 HTML 页面中，我会使用这个：

<div ng-controller='MikesAngularController'>
    <span>Please select a customer:</span>
    <select ng-model="selectedCustomer" ng-options="customer.CustomerID as customer.CompanyName for customer in listOfCustomers" style="width:350px;"></select>
</div>

就是这样。我们现在可以在网页上看到我们的 JSON 数据列表，可以使用了。

关键在于“ng-options”标签：

customer.CustomerID as customer.CompanyName for customer in listOfCustomers

这是一种奇怪的语法，让您大开眼界！

当用户选择此列表中的项目时，“$scope.selectedCustomer”变量将设置为该客户记录的 ID（CustomerID 字段）。

可以在此处找到此示例的完整脚本：

带有 Angular 的 JSON 数据

麦克风

我使用以下代码，在互联网上的某个地方找到了但不记得来源。

    var allText;
    var rawFile = new XMLHttpRequest();
    rawFile.open("GET", file, false);
    rawFile.onreadystatechange = function () {
        if (rawFile.readyState === 4) {
            if (rawFile.status === 200 || rawFile.status == 0) {
                allText = rawFile.responseText;
            }
        }
    }
    rawFile.send(null);
    return JSON.parse(allText);