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

Question

我是一位试图创建内部软件工具的硬件工程师。 我以为我可以很轻松地做到这一点，但是我有很多未知的东西要进步。

我正在尝试创建用于管理订单的内部软件解决方案。 我定义了一个有效的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> <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>

现在，我想从文件加载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文件中的数据预加载表单有任何指示？

谢谢..

/马丁

Answer 1

在使用角度时，最好以角度方式进行操作。 因此，第一件事是您应该使用angular的$ http而不是jQuery的$.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参考会有所帮助

还有其他一些考虑因素可以考虑使用角度，但是值得花一些时间来熟悉角度方法并从中快速受益。

更加有用的是使用$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