帮酷LOGO
0 0 评论
  • 显示原文与译文双语对照的内容
文章标签:for  angular  form  POW  
The Form.IO form rendering and integration library.

  • 源代码名称:ngFormio
  • 源代码网址:http://www.github.com/formio/ngFormio
  • ngFormio源代码文档
  • ngFormio源代码下载
  • Git URL:
    git://www.github.com/formio/ngFormio.git
  • Git Clone代码到本地:
    git clone http://www.github.com/formio/ngFormio
  • Subversion代码到本地:
    $ svn co --depth empty http://www.github.com/formio/ngFormio
    Checked out revision 1.
    $ cd repo
    $ svn up trunk
    
  • 用于 Form.io的angular.js JSON表单渲染器

    这个库将与 Form.io 一起使用,以提供动态JSON表单呈现功能。 这样可以使用 Form.io 提供的模式以下列格式呈现任何表单。

    
    <formio src="'https://myapp.form.io/myform'"></formio>
    
    
    
    

    以下代码的snippit将动态地呈现 Form.io, 内的表单,以及自动连接到同一架构中生成的REST API。

    这里是一个演示

    http://codepen.io/travist/full/xVyMjo/

    多页面表单

    这里渲染器还支持使用 formio-wizard 指令的多页窗体,如下所示。

    
    <formio-wizard src="'https://myapp.form.io/mywizard'"></formio-wizard>
    
    
    
    

    这里指令使用窗体的root 中的面板指示表单中的新页。

    安装

    有几种方法可以将这里库添加到应用程序中。 每种安装类型都适用于特定的用例。

    全安装

    • 包括: 包括 angular.js 和 jQuery。
    • 如果应用程序还没有和 jQuery,并且希望在页面上显示单个表单,那么使用该安装。
    • 安装:在你的应用程序中放置 follow。
    
    <link rel="stylesheet" href="https://rawgit.com/formio/ngFormio/master/dist/formio-full.min.css"/>
    
    
    <script src="https://rawgit.com/formio/ngFormio/master/dist/formio-full.min.js"></script>
    
    
    
    

    完成安装

    • 英镑包括:除了 angular.js 和jQuery以外的所有东西
    • 使用:如果你在已经有 angular.js 和jQuery安装的应用程序中嵌入表单,请使用
    • 安装:在你的应用程序中放置 follow。
    
    <link rel="stylesheet" href="https://rawgit.com/formio/ngFormio/master/dist/formio-complete.min.css"/>
    
    
    <script src="https://rawgit.com/formio/ngFormio/master/dist/formio-complete.min.js"></script>
    
    
    
    

    基本安装:(。Bower 安装)

    
    bower install --save ng-formio
    
    
    
    

    然后,你可以将以下内容添加到你的应用程序中。

    
    <html>
    
    
     <head>
    
    
     <!-- bower:css -->
    
    
     <!-- endbower -->
    
    
     </head>
    
    
     <body>
    
    
     <!-- bower:js -->
    
    
     <!-- endbower -->
    
    
     </body>
    
    
    </html>
    
    
    
    

    然后运行Wiredep将它的连接起来。

    
    $ node
    
    
    > require('wiredep')({ src: 'index.html' });
    
    
    
    

    我们还建议在使用 Gulp构建过程中使用和Gulp UseRef

    配置

    安装好这个之后,现在就需要像这样在 angular.js 应用程序声明中添加这个模块。

    app.js

    
    angular.module('yourApp', [
    
    
     'formio'
    
    
    ])
    
    
    
    

    用法

    现在已经安装了库,然后可以执行以下操作来向应用程序添加表单。

    • https://form.io 创建一个帐户。
    • 创建一个新项目。
    • 在项目中创建窗体。 这将给你提供如下的API url。 https://myapp.form.io/myform
    • 然后,你可以在你的应用程序内嵌入这里窗体,方法如下。

    <formio src="'https://myapp.form.io/myform'"></formio>

    这不仅在你的应用程序中呈现表单 dyanmically,而且自动将该表单钩子到由 Form.io. 提供的API后端。

    enjoy!

    Form.io 团队 !



    文章标签:for  angular  form  POW  

    Copyright © 2011 HelpLib All rights reserved.    知识分享协议 京ICP备05059198号-3  |  如果智培  |  酷兔英语