json-ui

Json in editing in friendly UIs.

require

+ Install nodejs
+ Install npm

Usage

get js from ./dist/json_ui.js, css from ./app/css/json_ui.css and all views from app/views

$3

``html



`

$3

Set json-ui in page

`html




`
Set raw json editor in page

`html



`

Set json-ui <-> raw-json buttons in page

`html
>
<
`

Set export json link

`html
Export
`

$3

Initialize Raw Json

`json
var initJson = {
"Name": "Robert",
"Family": ["Dad", "Mom", "Sister", "ME"],
"Home": {"Country": "Taiwan", "City": "Tainan"}
};

editor.init(initJson);
`

Initialize json-ui

Default Initialization

`javascript
angular.module('json.ui')
.config(function (AppConfigProvider) {
AppConfigProvider.set({
id: '#json-ui'
});
});
`
Alter options

`javascript
angular.module('json.ui')
.config(function (AppConfigProvider) {
AppConfigProvider.set({
initialSync : true
});
});
`

###Options

| Options | value | default | explain |example|
|-----------------|--------------|---------------------|--------------------------------------------|--------------------------------------------|
| id | element id (string) | '#json-ui' | 'json-ui': set root object id ||
| initialSync | true / false | false | true: Json-ui and Raw json synchronization when page load ||

Develop

First run the following command (installing bower npm install -g bower)

$ bower install

start server (you should install npm install http-server -g` first)

$ npm start

open the browser and type this http://localhost:8000/app/

compile scss file & js file

We are using browserify so you should install browserify in global first ( npm install -g browserify ).

$ npm install
$ gulp

deploy

$ ./deploy