Como carregar json em meu modelo ng angular.js?

Tenho o que acho provavelmente uma pergunta muito óbvia, mas não consegui encontrar uma resposta em lugar nenhum.

Estou apenas tentando carregar alguns dados JSON do meu servidor para o cliente. No momento, estou usando JQuery para carregá-lo com uma chamada AJAX (código abaixo).

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

Ele está localizado no arquivo html. Até agora funciona, mas o problema é que quero usar o AngularJS. Agora, embora Angular POSSA usar as variáveis, não posso carregar tudo em uma variável, então posso usar um para cada loop. Isso parece estar relacionado ao "$ Scope", que geralmente está localizado no arquivo .js.

O problema é que não consigo carregar o código de outras páginas em um arquivo .js. Cada exemplo de Angular mostra apenas coisas assim:

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

Então, isso é útil se IA) Quer digitar tudo isso manualmente E B) Se eu souber de antemão quais são todos os meus dados ...

Não sei de antemão (os dados são dinâmicos) e não quero digitá-los.

Portanto, quando tentei alterar a chamada AJAX para Angular usando $ Resource, não pareceu funcionar. Talvez eu não consiga descobrir, mas é uma solicitação GET relativamente simples para dados JSON.

tl: dr Não consigo fazer as chamadas AJAX funcionarem para carregar dados externos em um modelo angular.

Como Kris menciona, você pode usar o $resourceserviço para interagir com o servidor, mas tenho a impressão de que você está começando sua jornada com o Angular - estive lá na semana passada - então recomendo começar a experimentar diretamente com o $httpserviço. Neste caso, você pode chamar seu getmétodo.

Se você tiver o seguinte JSON

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

Você pode carregá-lo assim

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

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

O getmétodo retorna um objeto de promessa cujo primeiro argumento é um retorno de chamada de sucesso e o segundo um retorno de chamada de erro .

Quando você adiciona $httpcomo um parâmetro de uma função, o Angular faz mágica e injeta o $httprecurso em seu controlador.

Eu coloquei alguns exemplos aqui

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

Aqui está um exemplo simples de como carregar dados JSON em um modelo Angular.

Eu tenho um serviço da Web JSON 'GET' que retorna uma lista de detalhes do Cliente, a partir de uma cópia online do banco de dados Northwind SQL Server da Microsoft .

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

Ele retorna alguns dados JSON semelhantes a estes:

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

..e eu quero preencher uma lista suspensa com esses dados, para ficar assim ...

Quero que o texto de cada item venha do campo "CompanyName" e que o ID venha dos campos "CustomerID".

Como eu faria isso?

Meu controlador angular seria assim:

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
         });
}

... que preenche uma variável "listOfCustomers" com este conjunto de dados JSON.

Então, na minha página HTML, eu usaria este:

<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>

E é isso. Agora podemos ver uma lista de nossos dados JSON em uma página da web, pronta para ser usada.

A chave para isso está na tag "ng-options":

customer.CustomerID as customer.CompanyName for customer in listOfCustomers

É uma sintaxe estranha para se familiarizar!

Quando o usuário seleciona um item nesta lista, a variável "$ scope.selectedCustomer" será definida como o ID (o campo CustomerID) desse registro do Cliente.

O script completo para este exemplo pode ser encontrado aqui:

Dados JSON com Angular

Mike

Eu uso o seguinte código, encontrado em algum lugar da internet, mas não lembro a fonte.

    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);