JSON的角度架构表单加载数据

Question

I'm an hardware engineer trying to create an in-house software tool. 我是一位试图创建内部软件工具的硬件工程师。 I thought that I would be able to do so quite easily, but there are a few too many unknowns for me to progress. 我以为我可以很轻松地做到这一点，但是我有很多未知的东西要进步。

I'm trying to create an in-house software solution for managing orders. 我正在尝试创建用于管理订单的内部软件解决方案。 I have defined a JSON Schema that is valid. 我定义了一个有效的JSON模式。

I want to set up a webpage where I can create a new order by filling out a web form. 我想建立一个网页，通过填写网页表格可以创建新订单。 The data should then be stored as a JSON text file. 然后，数据应存储为JSON文本文件。 I also want to be able to load a JSON text file, pre-populate the form with the current values, make some changes, and then save the changes. 我还希望能够加载JSON文本文件，使用当前值预填充表单，进行一些更改，然后保存更改。

I've done similar things in php and mysql, but I want to use JSON files to be able to make changes to the software tool without having to fiddle around with a database structure. 我在php和mysql中做过类似的事情，但是我想使用JSON文件来更改软件工具，而不必摆弄数据库结构。 I also see it as a good learning opportunity. 我也认为这是一个很好的学习机会。

I'm trying to use auto generated forms (schemaform.io), and I've gotten the following code to work: 我正在尝试使用自动生成的表单（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> <script type="text/javascript" src="../bower_components/jquery/dist/jquery.js"></script> </script> <script> /* $.getJSON("data/order.json", function(orderTemplateJson) { console.log(orderTemplateJson); // this will show the info it in firebug console $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>

I now want to load the JSON schema from a file. 现在，我想从文件加载JSON模式。 I tried to move the code into the callback of a getJSON call, but I got the following error message: 我试图将代码移到getJSON调用的回调中，但是收到以下错误消息：

Uncaught Error: [$injector:modulerr] Failed to instantiate module test due to: Error: [$injector:nomod] Module 'test' is not available! 未捕获的错误：[$ injector：modulerr]由于以下原因而无法实例化模块测试：错误：[$ injector：nomod]模块'test'不可用！ You either misspelled the module name or forgot to load it. 您可能拼错了模块名称，或者忘记了加载它。 If registering a module ensure that you specify the dependencies as the second argument. 如果注册模块，请确保将依赖项指定为第二个参数。

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

I've tried various things, but the problem is likely that I don't really know what I'm doing.. Any help would be greatly appreciated. 我已经尝试过各种方法，但是问题可能出在我真的不知道自己在做什么。任何帮助将不胜感激。

Also, does anyone have any pointers on how I can pre-load the form with data from a JSON-file that contains data (and fits the schema)? 另外，是否有人对我如何使用包含数据（并适合架构）的JSON文件中的数据预加载表单有任何指示？

Thank you.. 谢谢..

/ Martin /马丁

Answer 1

While using angular it's good to do things the angular way. 在使用角度时，最好以角度方式进行操作。 So first thing is that you should use angular's $http to load file instead of jQuery's $.getJSON . 因此，第一件事是您应该使用angular的$ http而不是jQuery的$.getJSON加载文件。 So in your controller you can do: 因此，在您的控制器中，您可以执行以下操作：

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

then angular $http API reference will be helpful 然后角度$ http API参考会有所帮助

there are other things to consider using angular however it's worth to invest some time to familiarize with the angular way and benefit from it relatively quickly. 还有其他一些考虑因素可以考虑使用角度，但是值得花一些时间来熟悉角度方法并从中快速受益。

Even more helpful would be to use $resource instead of $http as it is dedicated to deal with json (and REST actually). 更加有用的是使用$resource而不是$http因为它专用于处理json（实际上是REST）。

JSON的角度架构表单加载数据

问题描述

1 个解决方案

解决方案1
1 已采纳 2016-01-20 15:55:15

JSON的角度架构表单加载数据

问题描述

1 个解决方案

解决方案1 1 已采纳 2016-01-20 15:55:15

解决方案1
1 已采纳 2016-01-20 15:55:15