Как загрузить json в мой угловой.js ng-модель?

у меня есть то, что я думаю, вероятно, очень очевидный вопрос, но я не мог найти ответа нигде.

Я просто пытаюсь загрузить некоторые данные 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 может использовать переменные, я не могу загрузить все это в переменную, поэтому я могу использовать цикл for each. Это, по-видимому, связано с "$Scope", который обычно находится в .js файл.

проблема в том, что я не могу загрузить код с других страниц в a .js файл. Каждый пример углового показывает только такие вещи:

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

Итак, это полезно, если я А) хотите напечатать все это вручную, и Б)если я заранее знаю, что все мои данные...

Я не знаю заранее (данные динамического) и я не хочу вводить его.

Так, когда я попытался изменить вызов AJAX на угловой, используя $Resource, он, похоже, не работает. Возможно, я не могу понять это, но это относительно простой запрос GET для данных JSON.

tl: dr я не могу заставить AJAX-вызовы работать для загрузки внешних данных в угловую модель.

3 114
javascript angularjs django-models ajax

3 ответа:

как упоминает Крис, вы можете использовать $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;                
        });
});

The get метод возвращает a обещание объект который первый аргумент успехов обратный вызов и второй Ан обратный звонок.

когда вы добавляете $http как параметр функции угловой делает это волшебство и вводит $http ресурс в ваш контроллер.

я привел здесь несколько примеров

189

вот простой пример того, как загрузить данные JSON в угловую модель.

у меня есть веб-служба JSON' GET', которая возвращает список сведений о клиентах из онлайн-копии Microsoft Northwind SQL Server

28

Я использую следующий код, найденный где-то в интернете, но не помню источник.

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