¿Cómo cargar json en mi modelo angular.js ng?

Tengo lo que creo que es probablemente una pregunta muy obvia, pero no pude encontrar una respuesta en ninguna parte.

Solo estoy tratando de cargar algunos datos JSON de mi servidor en el cliente. En este momento, estoy usando JQuery para cargarlo con una llamada AJAX (código a continuación).

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

Este se encuentra en el archivo html. Funciona hasta ahora, pero el problema es que quiero usar AngularJS. Ahora, mientras Angular PUEDE usar las variables, no puedo cargar todo en una variable, por lo que puedo usar un para cada ciclo. Esto parece estar relacionado con el "$ Scope", que normalmente se encuentra en el archivo .js.

El problema es que no puedo cargar código de otras páginas en un archivo .js. Cada ejemplo de Angular solo muestra cosas como esta:

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

Entonces, esto es útil, si IA) Quiero escribir todo esto a mano, Y B) Si sé de antemano cuáles son todos mis datos ...

No lo sé de antemano (los datos son dinámicos) y no quiero escribirlos.

Entonces, cuando intenté cambiar la llamada AJAX a Angular usando $ Resource, no parece funcionar. Tal vez no pueda resolverlo, pero es una solicitud GET relativamente simple para datos JSON.

tl: dr No puedo hacer que las llamadas AJAX funcionen para cargar datos externos en un modelo angular.

Como menciona Kris, puede usar el $resourceservicio para interactuar con el servidor, pero tengo la impresión de que está comenzando su viaje con Angular (estuve allí la semana pasada), así que recomiendo comenzar a experimentar directamente con el $httpservicio. En este caso, puede llamar a su getmétodo.

Si tiene el siguiente JSON

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

Puedes cargarlo así

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

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

El getmétodo devuelve un objeto de promesa cuyo primer argumento es una devolución de llamada exitosa y el segundo una devolución de llamada de error .

Cuando agrega $httpcomo parámetro de una función, Angular lo hace mágico e inyecta el $httprecurso en su controlador.

He puesto algunos ejemplos aquí

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

Aquí hay un ejemplo simple de cómo cargar datos JSON en un modelo angular.

Tengo un servicio web JSON 'GET' que devuelve una lista de detalles del cliente, de una copia en línea de la base de datos Northwind SQL Server de Microsoft .

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

Devuelve algunos datos JSON que se ven así:

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

... y quiero completar una lista desplegable con estos datos, para que se vea así ...

Quiero que el texto de cada elemento provenga del campo "CompanyName" y que el ID provenga de los campos "CustomerID".

¿Cómo lo haría?

Mi controlador angular se vería así:

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 llena una variable "listOfCustomers" con este conjunto de datos JSON.

Luego, en mi página HTML, usaría esto:

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

Y eso es. Ahora podemos ver una lista de nuestros datos JSON en una página web, lista para ser utilizada.

La clave de esto está en la etiqueta "ng-options":

customer.CustomerID as customer.CompanyName for customer in listOfCustomers

¡Es una sintaxis extraña para entenderlo!

Cuando el usuario selecciona un elemento en esta lista, la variable "$ scope.selectedCustomer" se establecerá en el ID (el campo CustomerID) de ese registro de Cliente.

El script completo para este ejemplo se puede encontrar aquí:

Datos JSON con Angular

Miguel

Utilizo el siguiente código, que se encuentra en algún lugar de Internet, aunque no recuerdo la fuente.

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