Question

我是一名尝试创建内部软件工具的硬件工程师。我认为我能够很容易地做到这一点，但是有一些未知的事情让我无法进步。

我正在尝试创建一个管理订单的内部软件解决方案。我已经定义了一个有效的JSON Schema。

我想设置一个网页，我可以通过填写网页表单来创建新订单。然后，数据应存储为JSON文本文件。我还希望能够加载JSON文本文件，使用当前值预填充表单，进行一些更改，然后保存更改。

我在php和mysql中做过类似的事情，但我想使用JSON文件来更改软件工具，而不必乱用数据库结构。我也认为这是一个很好的学习机会。

我尝试使用自动生成的表单（schemaform.io），并且我已经获得了以下代码：

＆＃13;

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

＆＃13;

我现在想从文件加载JSON模式。我试图将代码移动到getJSON调用的回调中，但是我收到以下错误消息：

未捕获错误：[$ injector：modulerr]由于以下原因导致无法实例化模块测试：错误：[$ injector：nomod]模块＆＃39;测试＆＃39;不可用！您要么错误拼写了模块名称，要么忘记加载它。如果注册模块，请确保将依赖项指定为第二个参数。

＆＃13;

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

＆＃13;

我尝试过各种各样的事情，但问题很可能是我不知道自己在做什么......任何帮助都会非常感激。

此外，是否有人对如何使用包含数据的JSON文件（并适合架构）的数据预加载表单有任何指示？

谢谢..

/马丁

Answer 1

使用角度时，以角度方式做事情很好。首先，你应该使用angular的$ http来加载文件而不是jQuery的eval。所以在你的控制器中你可以这样做：

$.getJSON

然后有角度$http API reference会很有帮助

还有其他事情要考虑使用棱角分度，但是值得投入一些时间来熟悉角度方式并相对快速地从中受益。

更有用的是使用$resource代替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 });，因为它专门用于处理json（实际上是REST）。

Angular Schema Form从JSON加载数据

1 个答案: