Skip to content

Commit

Permalink
Merge branch 'release/v0.7.0'
Browse files Browse the repository at this point in the history
  • Loading branch information
davidlgj committed Aug 14, 2014
2 parents edec694 + 481e430 commit 8d7c18c
Show file tree
Hide file tree
Showing 48 changed files with 7,257 additions and 2,642 deletions.
24 changes: 24 additions & 0 deletions CHANGELOG
Original file line number Diff line number Diff line change
@@ -1,3 +1,27 @@
v0.7.0
------
* Support for complex keys, at least when using Angular 1.3.
See docs/knownlimitations.md for details. Thanks @mike-marcacci for that
awesome PR.
* New format for 'titleMap', it can now also take a list.
* Checkboxes have proper two way binding.
* Validate entire form with $scope.$broadcast('schemaFormValidate')
* If there is no title in neither schema nor form it defaults to the property
name from the schema.
* 'sf-options' attribute for globals options, with an option for form defaults.
* Added 'ng-model-options' so Angular 1.3 users can validate on blur.
* All validation, even required is now using tv4js, change 'validationMessage'
accordingly. This means arrays validate.
* 'Checkbox' type implies a default of false if none is set.
* Changed tactics when it comes to bower deps, it now only depends on what you
cannot go without, i.e. tv4, angular, angular-sanitize and objectpath. You
have to add bootstrap and other dependencies manually (a lot are optional).
* Lots of small bugfixes.

Thanks to @mike-marcacci, @sashless, @cameronprattedwards,@ianbeeston,
@torstenrudolf and all of you who made a lot of issues and PR:s this summer!


v0.6.0
------
* array and tabarray support, with help from @zackbloom (thanks!).
Expand Down
127 changes: 71 additions & 56 deletions README.md
Original file line number Diff line number Diff line change
Expand Up @@ -5,33 +5,34 @@ Angular Schema Form
[![Coverage Status](https://coveralls.io/repos/Textalk/angular-schema-form/badge.png?branch=master)](https://coveralls.io/r/Textalk/angular-schema-form?branch=development)
[![Bower version](https://badge.fury.io/bo/angular-schema-form.svg)](http://badge.fury.io/bo/angular-schema-form)

Generate forms from a JSON schema, with AngularJS!
Generate forms from JSON schemas using AngularJS!

### [Try out the example page](http://textalk.github.io/angular-schema-form/examples/bootstrap-example.html)
...where you can edit the schema or the form definition and see what comes out!

Try editing the schema or form definition and see what comes out!

What is it?
----------

Schema Form is a set of AngularJS directives (and a couple of services..) that can create a form directly from a json schema
definition and also validate against that schema. The defaults may be fine for a lot cases, but you can also
customize it, changing order and type of fields.
Schema Form is a set of AngularJS directives (and a couple of services). It can do two things to make life easier:

1. Create a form directly from a JSON schema.
2. Validate form fields against that same JSON schema.

Schema Form uses convention over configuration, so it comes packaged with some sensible defaults. But you can always customize it by changing the order and types of form fields.

JSON Form
---------
Schema Form is inspired by the nice [JSON Form](https://github.com/joshfire/jsonform) library and aims to be roughly compatible with it, especially its form definition. So what sets Schema Form apart from JSON Form?

Schema Form is inspired by the nice [JSON Form](https://github.com/joshfire/jsonform) library and aims to be roughly
compatible with it, especially it's form defintion. What sets Schema Form apart from JSON Form is that Schema Form
aims to be deeply integrated with AngularJS, i.e. to use the standard AngularJS way of handling forms. It also uses
[tv4](https://github.com/geraintluff/tv4) for validation which means its compatible with version 4 of the json schema
standard. Schema Form, as a default, generates bootstrap 3 friendly HTML.
1. Schema Form integrates deeply with AngularJS and uses AngularJS conventions to handle forms.
2. Schema Form uses [tv4](https://github.com/geraintluff/tv4) for validation, making it compatible with version 4 of the JSON schema standard.
3. By default, Schema Form generates Bootstrap 3-friendly HTML.


Basic Usage
-----------

```html
<form sf-schema="schema" sf-form="form" sf-model="data"></form>
```
First, expose your schema, form, and model to the $scope.

```javascript
function FormController($scope) {
Expand All @@ -54,84 +55,99 @@ function FormController($scope) {
}
];

$scope.data = {};
$scope.model = {};
}
```

Then load them into Schema Form using the `sfSchema`, `sfForm`, and `sfModel` directives.

```html
<div ng-controller="FormController">
<form sf-schema="schema" sf-form="form" sf-model="model"></form>
</div>
```



Documentation
-------------
Documentation covering defaults and form types [can be found here.](docs/index.md)


Installation
------------
Simplest way is by using [bower](http://bower.io/) since it will also download
any dependencies.

### Bower

It's simplest to install Schema Form using [Bower](http://bower.io/).

```bash
bower install angular-schema-form
```

(or just download the contents of the ```dist/``` folder and add dependencies
manually)
This will install the latest release and basic dependencies. See
[dependecies section below](#dependencies).

It depends on [AngularJS](https://angularjs.org/) (duh!),
[angular-sanitize](https://docs.angularjs.org/api/ngSanitize),
[bootstrap 3](http://getbootstrap.com/),
[tv4](https://github.com/geraintluff/tv4), and
if you like to use the date picker you also need jQuery and
[pickadate.js](http://amsul.ca/pickadate.js/). Also if you use the ```help```
type to inject HTML you'll want to use ngSanitize as well.
### Manual

If you like to have drag and drop reordering of arrays you also need
[ui-sortable](https://github.com/angular-ui/ui-sortable) and its dependencies
[jQueryUI](http://jqueryui.com/), see *ui-sortable* documentation for details of
what parts of jQueryUI that is needed. You can safely ignore these if you don't
need the reordering.
You can also just download the contents of the `dist/` folder and add dependencies manually.

Tabbed arrays, form type ```tabarray```, defaults to tabs on the left side. For
these to work you also need to include the css from
[bootstrap-vertical-tabs](https://github.com/dbtek/bootstrap-vertical-tabs).
It is not needed for tabs on top, the ```tabType: "top"``` option.
### Dependencies

The minified files also includes all templates so they are all you need.
Schema form has a lot of dependencies, most of which are optional. Therefor

Addons
------
Currently there is only one addon, a date picker using
the excellent [pickadate.js](http://amsul.ca/pickadate.js/).
Schema Form depends on:

1. [AngularJS](https://angularjs.org/) version 1.3.x is recomended. Version 1.2.x
has some limitation. See [known limitations](docs/knownlimitations.md).
2. [angular-sanitize](https://docs.angularjs.org/api/ngSanitize)
3. [tv4](https://github.com/geraintluff/tv4)
4. [objectpath](https://github.com/mike-marcacci/objectpath)
5. [bootstrap 3](http://getbootstrap.com/)

If you install via bower you get all of the above except bootstrap since we
don't want to push a certain version or flavor on you. Also make
sure you got the angular version you actually want.

See the [docs](docs/datepicker.md) for usage.
#### Additional dependecies

1. If you want to use the date picker, you'll also need [jQuery](https://github.com/jquery/jquery) and [pickadate.js](http://amsul.ca/pickadate.js/)
2. If you'd like to use drag-and-drop reordering of arrays, you'll also need [ui-sortable](https://github.com/angular-ui/ui-sortable) and its [jQueryUI](http://jqueryui.com/) dependencies. See the *ui-sortable* documentation for details about which parts of jQueryUI are needed. You can safely ignore these if you don't need reordering.
3. Schema Form provides tabbed arrays through the form type `tabarray`. Tab arrays default to tabs on the left side. For these to work, you'll need to include the CSS from [bootstrap-vertical-tabs](https://github.com/dbtek/bootstrap-vertical-tabs). However, you won't need Bootstrap Vertical Tabs for horizontal tabs (the `tabType: "top"` option).

The minified files include templates - no need to load additional HTML files.

Add-ons
------
There is currently only one add-on, a date picker using the excellent [pickadate.js](http://amsul.ca/pickadate.js/).

See the [add-on docs](docs/datepicker.md) for usage.

Building
--------
The files in the ```dist``` plus dependencies are all you need to use Schema
Form, but if you like to build it yourself we use [gulp](http://gulpjs.com/).
The files in the `dist/` folder, plus dependencies, are all you need to use Schema Form. But if you'd like to build it yourself, we use [gulp](http://gulpjs.com/).

First off you need to have nodejs installed. Then install all dev dependencies
of the project with npm, install gulp and run the default task.
First off, you need to have nodejs installed. Then install all dev dependencies of the project with npm, install gulp and run the default task.

```bash
$ npm install
$ sudo npm install -g gulp
$ gulp
```

The default task uses [gulp-angular-templatecache](https://github.com/miickel/gulp-angular-templatecache)
to compile all html templates to js and then concatenates and minifies them with
the rest of the sources.
The default task uses [gulp-angular-templatecache](https://github.com/miickel/gulp-angular-templatecache) to compile all html templates to js and then concatenates and minifies them with the rest of the sources.

You can also run ```gulp watch``` to have it rebuild on change.
You can also run `gulp watch` to have it rebuild on change.

Tests
-----
Unit tests are run with [karma](http://karma-runner.github.io) and written using
[mocha](http://visionmedia.github.io/mocha/), [chai](http://chaijs.com/)
and [sinon](http://sinonjs.org/)
Unit tests are run with [karma](http://karma-runner.github.io) and written using [mocha](http://visionmedia.github.io/mocha/), [chai](http://chaijs.com/) and [sinon](http://sinonjs.org/)

To run the tests:

To run the tests first install all dependencies with npm (if you haven't done it
already) and install the karma cli to run the test.
1. Install all dependencies via NPM
2. Install the Karma CLI
3. Run the tests

```bash
$ npm install
Expand All @@ -142,5 +158,4 @@ $ karma start karma.conf.js
Contributing
------------

All contributions are welcome! We're trying to use [git flow](http://danielkummer.github.io/git-flow-cheatsheet/)
so please base any merge request on the **development** branch instead of **master**.
All contributions are welcome! We're trying to use [git flow](http://danielkummer.github.io/git-flow-cheatsheet/), so please base any merge request on the **development** branch instead of **master**.
18 changes: 12 additions & 6 deletions bower.json
Original file line number Diff line number Diff line change
Expand Up @@ -5,15 +5,22 @@
"dist/bootstrap-decorator.min.js",
"dist/bootstrap-datepicker.min.js"
],
"version": "0.6.0",
"version": "0.7.0",
"authors": [
"Textalk",
"David Jensen <[email protected]>"
],
"moduleType": [
"globals"
],
"keywords": ["angular","angularjs","form","json","json-schema","schema"],
"keywords": [
"angular",
"angularjs",
"form",
"json",
"json-schema",
"schema"
],
"license": "MIT",
"ignore": [
"**/.*",
Expand All @@ -23,11 +30,10 @@
"coverage"
],
"dependencies": {
"angular": "~1.2.18",
"angular": ">= 1.2",
"tv4": "~1.0.15",
"pickadate": "~3.5.2",
"angular-sanitize": "~1.2.18",
"bootstrap-vertical-tabs": "~1.1.0"
"angular-sanitize": ">= 1.2",
"objectpath": "~1.0.4"
},
"devDependencies": {
"angular-ui-ace": "bower"
Expand Down
2 changes: 1 addition & 1 deletion dist/bootstrap-datepicker.min.js

Some generated files are not rendered by default. Learn more about how customized files appear on GitHub.

Loading

0 comments on commit 8d7c18c

Please sign in to comment.