Jak załadować json do mojego modelu ng angular.js?

Mam chyba bardzo oczywiste pytanie, ale nigdzie nie mogłem znaleźć odpowiedzi.

Po prostu próbuję załadować dane JSON z mojego serwera do klienta. W tej chwili używam JQuery do załadowania go z wywołaniem AJAX (kod poniżej).

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

Znajduje się w pliku html. Jak dotąd działa, ale problem polega na tym, że chcę używać AngularJS. Teraz, podczas gdy Angular może używać zmiennych, nie mogę załadować całej rzeczy do zmiennej, więc mogę użyć dla każdej pętli. Wydaje się, że jest to związane z „$ Scope”, który zwykle znajduje się w pliku .js.

Problem polega na tym, że nie mogę załadować kodu z innych stron do pliku .js. Każdy przykład Angular pokazuje tylko takie rzeczy:

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

Jest to więc przydatne, jeśli IA) Chcesz wpisać to wszystko ręcznie ORAZ B) Jeśli z góry wiem, jakie są moje dane ...

Nie wiem z góry (dane są dynamiczne) i nie chcę tego wpisywać.

Tak więc, kiedy próbowałem zmienić wywołanie AJAX na Angular za pomocą $ Resource, wydaje się, że nie działa. Może nie mogę tego rozgryźć, ale jest to stosunkowo proste żądanie GET dla danych JSON.

tl: dr Nie mogę uruchomić wywołań AJAX w celu załadowania danych zewnętrznych do modelu kątowego.

Jak wspomina Kris, możesz wykorzystać $resourceusługę do interakcji z serwerem, ale mam wrażenie, że zaczynasz swoją przygodę z Angularem - byłem tam w zeszłym tygodniu - więc polecam zacząć bezpośrednio eksperymentować z $httpusługą. W takim przypadku możesz wywołać jego getmetodę.

Jeśli masz następujący plik JSON

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

Możesz to załadować w ten sposób

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

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

getMetoda zwraca obietnicę przedmiot, który pierwszy argument jest sukces zwrotna a druga błąd zwrotna.

Kiedy dodajesz $httpjako parametr funkcji, Angular robi to magicznie i wstrzykuje $httpzasób do twojego kontrolera.

Podałem tutaj kilka przykładów

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

Oto prosty przykład ładowania danych JSON do modelu Angular.

Mam usługę sieciową JSON „GET”, która zwraca listę danych klienta z internetowej kopii bazy danych Microsoft Northwind SQL Server .

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

Zwraca niektóre dane JSON, które wyglądają następująco:

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

..i chcę wypełnić listę rozwijaną tymi danymi, aby wyglądała tak ...

Chcę, aby tekst każdego elementu pochodził z pola „CompanyName”, a identyfikator pochodził z pól „CustomerID”.

Jak bym to zrobił?

Mój kontroler Angular wyglądałby tak:

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

... który wypełnia zmienną „listOfCustomers” tym zestawem danych JSON.

Następnie na mojej stronie HTML użyłbym tego:

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

I to wszystko. Teraz możemy zobaczyć listę naszych danych JSON na stronie internetowej, gotową do użycia.

Klucz do tego znajduje się w tagu „ng-options”:

customer.CustomerID as customer.CompanyName for customer in listOfCustomers

To dziwna składnia, aby się poruszać!

Gdy użytkownik wybierze pozycję z tej listy, zmienna „$ scope.selectedCustomer” zostanie ustawiona na identyfikator (pole CustomerID) tego rekordu Customer.

Pełny skrypt dla tego przykładu można znaleźć tutaj:

Dane JSON z Angular

Mikrofon

Używam następującego kodu, znalezionego gdzieś w internecie, nie pamiętam jednak źródła.

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