Skip to content

Commit 99d1630

Browse files
cameronprattedwardscameronprattedwards
committed
Update README.md
Legibility tweaks in main README.
1 parent 9276631 commit 99d1630

File tree

1 file changed

+57
-56
lines changed

1 file changed

+57
-56
lines changed

‎README.md

Lines changed: 57 additions & 56 deletions
Original file line numberDiff line numberDiff line change
@@ -5,33 +5,34 @@ Angular Schema Form
55
[![Coverage Status](https://coveralls.io/repos/Textalk/angular-schema-form/badge.png?branch=master)](https://coveralls.io/r/Textalk/angular-schema-form?branch=development)
66
[![Bower version](https://badge.fury.io/bo/angular-schema-form.svg)](http://badge.fury.io/bo/angular-schema-form)
77

8-
Generate forms from a JSON schema, with AngularJS!
8+
Generate forms from JSON schemas using AngularJS!
99

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

1413
What is it?
1514
----------
1615

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

21+
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.
2122

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

2831

2932
Basic Usage
3033
-----------
3134

32-
```html
33-
<form sf-schema="schema" sf-form="form" sf-model="data"></form>
34-
```
35+
First, expose your schema, form, and model to the $scope.
3536

3637
```javascript
3738
function FormController($scope) {
@@ -54,84 +55,85 @@ function FormController($scope) {
5455
}
5556
];
5657

57-
$scope.data = {};
58+
$scope.model = {};
5859
}
5960
```
6061

62+
Then load them into Schema Form using the `sfSchema`, `sfForm`, and `sfModel` directives.
63+
64+
```html
65+
<div ng-controller="FormController">
66+
<form sf-schema="schema" sf-form="form" sf-model="model"></form>
67+
</div>
68+
```
69+
70+
71+
6172
Documentation
6273
-------------
6374
Documentation covering defaults and form types [can be found here.](docs/index.md)
6475

6576

6677
Installation
6778
------------
68-
Simplest way is by using [bower](http://bower.io/) since it will also download
69-
any dependencies.
79+
80+
### Bower
81+
82+
It's simplest to install Schema Form using [Bower](http://bower.io/) since it will come packaged with all of its dependencies.
7083

7184
```bash
7285
bower install angular-schema-form
7386
```
7487

75-
(or just download the contents of the ```dist/``` folder and add dependencies
76-
manually)
88+
### Manual
7789

78-
It depends on [AngularJS](https://angularjs.org/) (duh!),
79-
[angular-sanitize](https://docs.angularjs.org/api/ngSanitize),
80-
[bootstrap 3](http://getbootstrap.com/),
81-
[tv4](https://github.com/geraintluff/tv4), and
82-
if you like to use the date picker you also need jQuery and
83-
[pickadate.js](http://amsul.ca/pickadate.js/). Also if you use the ```help```
84-
type to inject HTML you'll want to use ngSanitize as well.
90+
You can also just download the contents of the `dist/` folder and add dependencies manually.
8591

86-
If you like to have drag and drop reordering of arrays you also need
87-
[ui-sortable](https://github.com/angular-ui/ui-sortable) and its dependencies
88-
[jQueryUI](http://jqueryui.com/), see *ui-sortable* documentation for details of
89-
what parts of jQueryUI that is needed. You can safely ignore these if you don't
90-
need the reordering.
92+
### Dependencies
9193

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

97-
The minified files also includes all templates so they are all you need.
96+
1. [AngularJS](https://angularjs.org/) (duh!)
97+
2. [angular-sanitize](https://docs.angularjs.org/api/ngSanitize)
98+
3. [bootstrap 3](http://getbootstrap.com/)
99+
4. [tv4](https://github.com/geraintluff/tv4)
100+
5. 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/)
101+
7. 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.
102+
8. 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).
98103

99-
Addons
100-
------
101-
Currently there is only one addon, a date picker using
102-
the excellent [pickadate.js](http://amsul.ca/pickadate.js/).
104+
The minified files include templates - no need to load additional HTML files.
103105

104-
See the [docs](docs/datepicker.md) for usage.
106+
Add-ons
107+
------
108+
There is currently only one add-on, a date picker using the excellent [pickadate.js](http://amsul.ca/pickadate.js/).
105109

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

107112
Building
108113
--------
109-
The files in the ```dist``` plus dependencies are all you need to use Schema
110-
Form, but if you like to build it yourself we use [gulp](http://gulpjs.com/).
114+
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/).
111115

112-
First off you need to have nodejs installed. Then install all dev dependencies
113-
of the project with npm, install gulp and run the default task.
116+
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.
114117

115118
```bash
116119
$ npm install
117120
$ sudo npm install -g gulp
118121
$ gulp
119122
```
120123

121-
The default task uses [gulp-angular-templatecache](https://github.com/miickel/gulp-angular-templatecache)
122-
to compile all html templates to js and then concatenates and minifies them with
123-
the rest of the sources.
124+
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.
124125

125-
You can also run ```gulp watch``` to have it rebuild on change.
126+
You can also run `gulp watch` to have it rebuild on change.
126127

127128
Tests
128129
-----
129-
Unit tests are run with [karma](http://karma-runner.github.io) and written using
130-
[mocha](http://visionmedia.github.io/mocha/), [chai](http://chaijs.com/)
131-
and [sinon](http://sinonjs.org/)
130+
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/)
131+
132+
To run the tests:
132133

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

136138
```bash
137139
$ npm install
@@ -142,5 +144,4 @@ $ karma start karma.conf.js
142144
Contributing
143145
------------
144146

145-
All contributions are welcome! We're trying to use [git flow](http://danielkummer.github.io/git-flow-cheatsheet/)
146-
so please base any merge request on the **development** branch instead of **master**.
147+
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**.

0 commit comments

Comments
 (0)