Угловая форма формы Загрузка данных из JSON

Я инженер-аппаратчик, пытающийся создать собственный программный инструмент. Я думал, что смогу сделать это довольно легко, но для меня есть слишком много неизвестных.Угловая форма формы Загрузка данных из JSON

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

Я хочу создать веб-страницу, где я могу создать новый заказ, заполнив веб-форму. Затем данные должны быть сохранены в виде текстового файла JSON. Я также хочу иметь возможность загружать текстовый файл JSON, предварительно заполнять форму текущими значениями, вносить некоторые изменения, а затем сохранять изменения.

Я делал аналогичные вещи в php и mysql, но я хочу использовать файлы JSON, чтобы иметь возможность вносить изменения в программный инструмент, не задумываясь о структуре базы данных. Я также рассматриваю это как хорошую возможность обучения.

Я пытаюсь использовать автогенерируемые формы (schemaform.io), и я получил следующий код для работы:

<!DOCTYPE html> 
 
<html > 
 

 
    <head>  
 

 
    </head> 
 

 
    <body ng-app="test" ng-controller="FormController"> 
 

 
    <form name="ngform" 
 
      sf-schema="schema" 
 
      sf-form="form" 
 
      sf-model="model"></form> 
 

 
<script type="text/javascript" src="../bower_components/angular/angular.js"></script> 
 
<script type="text/javascript" src="../bower_components/angular-sanitize/angular-sanitize.min.js"></script> 
 
<script type="text/javascript" src="../bower_components/tv4/tv4.js"></script> 
 
<script type="text/javascript" src="../bower_components/objectpath/lib/ObjectPath.js"></script> 
 
<script type="text/javascript" src="../bower_components/angular-schema-form/dist/schema-form.min.js"></script> 
 
<script type="text/javascript" src="../bower_components/angular-schema-form/dist/bootstrap-decorator.min.js"></script> \t \t 
 

 
<script type="text/javascript" src="../bower_components/jquery/dist/jquery.js"></script> \t \t 
 

 

 
</script> 
 
    
 
<script> 
 

 
/* 
 
$.getJSON("data/order.json", function(orderTemplateJson) { 
 
    console.log(orderTemplateJson); // this will show the info it in firebug console 
 
\t $scope.$broadcast('schemaFormRedraw') 
 
}); 
 
*/ 
 

 
var app = angular.module('test',['schemaForm']); 
 
app.controller('FormController', function($scope,$http){ 
 
    $scope.schema = { 
 
    // A long long string of text goes here 
 
}; 
 

 
    $scope.form = [ 
 
    "*", 
 
    { 
 
     type: "submit", 
 
     title: "Save" 
 
    } 
 
    ]; 
 

 
    $scope.model = {}; 
 
}) 
 
    </script> 
 

 
    </body> 
 

 
</html>

Теперь я хочу, чтобы загрузить JSON схема из файла. Я попытался переместить код в обратный вызов вызова getJSON, но у меня появилось следующее сообщение об ошибке:

Ошибка при отсутствии: [$ injector: modulerr] Не удалось выполнить проверку модуля из-за: Ошибка: [$ injector: nomod] Модуль 'test' недоступен! Вы либо ошибочно написали имя модуля, либо забыли загрузить его. Если регистрация модуля гарантирует, что вы укажете зависимости в качестве второго аргумента.

$.getJSON("data/order.json", function(orderTemplateJson) { 
 
    console.log(orderTemplateJson); 
 
    
 
    //Moved all the angular module code to here 
 
});

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

Также есть ли у кого-нибудь указатели на то, как я могу предварительно загрузить форму с данными из JSON-файла, который содержит данные (и соответствует схеме)?

Спасибо ..

/Martin

источник

2016-01-20 Martin Lindskog

При использовании углового это хорошо, чтобы делать вещи углового пути. Итак, первое, что вы должны использовать $ http для углового для загрузки файла вместо jQuery's $.getJSON. Таким образом, в вашем контроллере вы можете сделать:

app.controller('FormController', function($scope,$http){ 
    $http.get("data/order.json").then(
     function success(response) { 
     // please note that as this is asynchronous, 
     // the $scope.schema will be available after response 
     // has been received but this should be ok 
     $scope.schema = angular.fromJson(response.data); 
     }, 
     function error(response) { /* handle error */ }); 
    // do other stuff 
});

то угловая $http API reference будет полезно

есть и другие вещи, чтобы рассмотреть вопрос об использовании углового, однако это стоит потратить некоторое время, чтобы ознакомиться с угловым способом и выгодами от него относительно быстро.

Еще более полезно было бы использовать $resource вместо $http, поскольку он предназначен для работы с json (и REST на самом деле).

источник

2016-01-20 15:55:15 ciekawy

Работал как очарование, большое спасибо! Я обязательно посмотрю на угловые понятия, это то направление, в котором я нуждался. –

Угловая форма формы Загрузка данных из JSON

ответ

Смежные вопросы