From d404eeb89a9875a5e5507edc70b593f37dbe44a7 Mon Sep 17 00:00:00 2001
From: Edgar Mueller <edgar.m.mueller@gmail.com>
Date: Fri, 6 May 2016 20:08:23 +0200
Subject: [PATCH 1/5] Remove all replace attributes in order to ensure A2
 compatibility and introduce additional div nodes where CSS classes can be
 set. Also added missing CSS style for categorization.

---
 src/components/form/form-directive.ts         |  3 --
 .../renderers/controls/controls-directive.ts  |  1 -
 .../categories/categorization-directive.ts    | 30 ++++++++++---------
 .../layouts/group/group-directive.ts          | 18 ++++++-----
 .../horizontal/horizontal-directive.ts        | 14 +++++----
 .../renderers/layouts/layout-directive.ts     |  3 +-
 .../masterdetail/masterdetail-directives.ts   |  2 --
 .../layouts/vertical/vertical-directive.ts    | 16 +++++-----
 webpack/webpack.build.js                      |  3 +-
 9 files changed, 46 insertions(+), 44 deletions(-)

diff --git a/src/components/form/form-directive.ts b/src/components/form/form-directive.ts
index 964e23231..2ad6bd7cb 100644
--- a/src/components/form/form-directive.ts
+++ b/src/components/form/form-directive.ts
@@ -154,7 +154,6 @@ interface JsonFormsDirectiveScope extends ng.IScope {
 export class JsonFormsDirective implements ng.IDirective {
 
     restrict = 'E';
-    replace = true;
     template = require('./form.html');
     controller = FormController;
     controllerAs = 'vm';
@@ -204,11 +203,9 @@ interface JsonFormsInnerDirectiveScope extends ng.IScope {
 export class JsonFormsInnerDirective implements ng.IDirective {
 
     restrict = 'E';
-    replace = true;
     template = require('./form.html');
     controller = InnerFormController;
     controllerAs = 'vm';
-    // we can't use bindToController because we want watchers
     bindToController = {
         uiSchema: '='
     };
diff --git a/src/components/renderers/controls/controls-directive.ts b/src/components/renderers/controls/controls-directive.ts
index a2ea352e8..cd1ee8ad8 100644
--- a/src/components/renderers/controls/controls-directive.ts
+++ b/src/components/renderers/controls/controls-directive.ts
@@ -3,7 +3,6 @@ import './control.css';
 
 class ControlDirective implements ng.IDirective {
     restrict    = 'E';
-    replace     = true;
     transclude  = true;
     template = require('./control.html');
 }
diff --git a/src/components/renderers/layouts/categories/categorization-directive.ts b/src/components/renderers/layouts/categories/categorization-directive.ts
index a8118f76a..b396ee1d3 100644
--- a/src/components/renderers/layouts/categories/categorization-directive.ts
+++ b/src/components/renderers/layouts/categories/categorization-directive.ts
@@ -7,20 +7,22 @@ class CategorizationDirective implements ng.IDirective {
     restrict = 'E';
     template = `
     <jsonforms-layout>
-        <div class="row">
-            <div class="col-sm-100">
-                <uib-tabset>
-                    <uib-tab
-                        heading="{{category.label}}"
-                        ng-repeat="category in vm.uiSchema.elements"
-                        select="vm.changeSelectedCategory(category)">
-                        <fieldset ng-if="vm.selectedCategory===category">
-                            <jsonforms-inner ng-repeat="child in category.elements"
-                                             ui-schema="child" >
-                            </jsonforms-inner>
-                        </fieldset>
-                    </uib-tab>
-                </uib-tabset>
+        <div class="jsf-categorization">
+            <div class="row">
+                <div class="col-sm-100">
+                    <uib-tabset>
+                        <uib-tab
+                            heading="{{category.label}}"
+                            ng-repeat="category in vm.uiSchema.elements"
+                            select="vm.changeSelectedCategory(category)">
+                            <fieldset ng-if="vm.selectedCategory===category">
+                                <jsonforms-inner ng-repeat="child in category.elements"
+                                                 ui-schema="child" >
+                                </jsonforms-inner>
+                            </fieldset>
+                        </uib-tab>
+                    </uib-tabset>
+                </div>
             </div>
         </div>
     </jsonforms-layout>`;
diff --git a/src/components/renderers/layouts/group/group-directive.ts b/src/components/renderers/layouts/group/group-directive.ts
index bc3b224c9..fe19ed7e4 100644
--- a/src/components/renderers/layouts/group/group-directive.ts
+++ b/src/components/renderers/layouts/group/group-directive.ts
@@ -6,14 +6,16 @@ import {IUISchemaElement} from '../../../../jsonforms';
 class GroupDirective implements ng.IDirective {
     restrict = 'E';
     template = `
-    <jsonforms-layout class="jsf-group">
-        <fieldset class="row">
-            <legend ng-if="vm.label">{{vm.label}}</legend>
-            <jsonforms-inner ng-repeat="child in vm.uiSchema.elements" 
-                             ui-schema="child" 
-                             class="col-sm-100">                             
-            </jsonforms-inner>
-        </fieldset>
+    <jsonforms-layout>
+        <div class="jsf-group">
+            <fieldset class="row">
+                <legend ng-if="vm.label">{{vm.label}}</legend>
+                <jsonforms-inner ng-repeat="child in vm.uiSchema.elements" 
+                                 ui-schema="child" 
+                                 class="col-sm-100">                             
+                </jsonforms-inner>
+             </fieldset>
+        </div>
     </jsonforms-layout>`;
     controller = GroupController;
     controllerAs = 'vm';
diff --git a/src/components/renderers/layouts/horizontal/horizontal-directive.ts b/src/components/renderers/layouts/horizontal/horizontal-directive.ts
index 049d63c03..bacba2439 100644
--- a/src/components/renderers/layouts/horizontal/horizontal-directive.ts
+++ b/src/components/renderers/layouts/horizontal/horizontal-directive.ts
@@ -7,12 +7,14 @@ import {IUISchemaElement} from '../../../../jsonforms';
 class HorizontalDirective implements ng.IDirective {
     restrict = 'E';
     template = `
-    <jsonforms-layout class="jsf-horizontal-layout">
-        <fieldset class="row">
-            <div ng-repeat="child in vm.uiSchema.elements" class="col-sm-{{vm.childSize}}">
-                <jsonforms-inner ui-schema="child"></jsonforms-inner>
-            </div>
+    <jsonforms-layout>
+        <div class="jsf-horizontal-layout">
+            <fieldset class="row">
+                <div ng-repeat="child in vm.uiSchema.elements" class="col-sm-{{vm.childSize}}">
+                    <jsonforms-inner ui-schema="child"></jsonforms-inner>
+                </div>
         </fieldset>
+        </div>
     </jsonforms-layout>`;
     controller = HorizontalController;
     controllerAs = 'vm';
@@ -60,6 +62,6 @@ export default angular
     .module('jsonforms.renderers.layouts.horizontal', ['jsonforms.renderers.layouts'])
     .directive('horizontallayout', () => new HorizontalDirective())
     .run(['RendererService', RendererService =>
-        RendererService.register('horizontallayout', HorizontalLayoutRendererTester)
+        RendererService.register('horizontalLayout', HorizontalLayoutRendererTester)
     ])
     .name;
diff --git a/src/components/renderers/layouts/layout-directive.ts b/src/components/renderers/layouts/layout-directive.ts
index 447d58402..f7535f64b 100644
--- a/src/components/renderers/layouts/layout-directive.ts
+++ b/src/components/renderers/layouts/layout-directive.ts
@@ -4,9 +4,8 @@ export default angular
     .directive('jsonformsLayout', (): ng.IDirective => {
         return {
             restrict: 'E',
-            replace: true,
             transclude: true,
-            template: require('./layout.html')
+            template: require('./layout.html'),
         };
     })
     .name;
diff --git a/src/components/renderers/layouts/masterdetail/masterdetail-directives.ts b/src/components/renderers/layouts/masterdetail/masterdetail-directives.ts
index aeb2c76a0..a453d8ab2 100644
--- a/src/components/renderers/layouts/masterdetail/masterdetail-directives.ts
+++ b/src/components/renderers/layouts/masterdetail/masterdetail-directives.ts
@@ -55,7 +55,6 @@ const MasterDetailControlRendererTester: RendererTester = function(element: IUIS
 class MasterDetailCollectionDirective implements ng.IDirective {
 
     restrict = 'E';
-    replace = true;
     scope = {
         properties: '=',
         instance: '=',
@@ -136,7 +135,6 @@ class MasterDetailMember implements angular.IDirective {
     }
 
     restrict = 'E';
-    replace = true;
     scope = {
         childSchema: '=',
         childData: '=',
diff --git a/src/components/renderers/layouts/vertical/vertical-directive.ts b/src/components/renderers/layouts/vertical/vertical-directive.ts
index 10b151cf4..1d175226d 100644
--- a/src/components/renderers/layouts/vertical/vertical-directive.ts
+++ b/src/components/renderers/layouts/vertical/vertical-directive.ts
@@ -5,13 +5,15 @@ import {IUISchemaElement} from '../../../../jsonforms';
 
 class VerticalDirective implements ng.IDirective {
     restrict = 'E';
-    template = `<jsonforms-layout class="jsf-vertical-layout">
-        <fieldset class="row">
-            <jsonforms-inner ng-repeat="child in vm.uiSchema.elements" 
-                             ui-schema="child" 
-                             class="col-sm-100">
-            </jsonforms-inner>
-        </fieldset>
+    template = `<jsonforms-layout>
+        <div class="jsf-vertical-layout">
+            <fieldset class="row">
+                <jsonforms-inner ng-repeat="child in vm.uiSchema.elements" 
+                                 ui-schema="child" 
+                                 class="col-sm-100">
+                </jsonforms-inner>
+            </fieldset>
+        </div>    
     </jsonforms-layout>`;
     controller = VerticalController;
     controllerAs = 'vm';
diff --git a/webpack/webpack.build.js b/webpack/webpack.build.js
index b42ef893f..6123fa7ed 100644
--- a/webpack/webpack.build.js
+++ b/webpack/webpack.build.js
@@ -34,7 +34,8 @@ module.exports = {
     resolveLoader: {
         modulesDirectories: ["node_modules"]
     },
-    module: {
+    module:
+    {
         preLoaders: [
             {
                 test: /\.ts$/,

From 1539e2f402ce7cc956ddef841d5a96d3faca82ec Mon Sep 17 00:00:00 2001
From: Edgar Mueller <edgar.m.mueller@gmail.com>
Date: Fri, 6 May 2016 20:26:32 +0200
Subject: [PATCH 2/5] Renamed local example to person example.

---
 examples/app/app.js                                       | 8 ++++----
 .../local.controller.js => person/person.controller.js}   | 2 +-
 examples/app/{local/local.html => person/person.html}     | 0
 examples/{embed-index.html => index.html}                 | 2 +-
 4 files changed, 6 insertions(+), 6 deletions(-)
 rename examples/app/{local/local.controller.js => person/person.controller.js} (99%)
 rename examples/app/{local/local.html => person/person.html} (100%)
 rename examples/{embed-index.html => index.html} (98%)

diff --git a/examples/app/app.js b/examples/app/app.js
index 7f82c6343..44b83566f 100644
--- a/examples/app/app.js
+++ b/examples/app/app.js
@@ -7,9 +7,9 @@ angular.module('makeithappen', [
     'jsonforms'
 ]).config(['$routeProvider',
     function($routeProvider) {
-        $routeProvider.when('/local', {
-            templateUrl: 'app/local/local.html',
-            controller: 'LocalController',
+        $routeProvider.when('/person', {
+            templateUrl: 'app/person/person.html',
+            controller: 'PersonController',
             controllerAs: 'vm'
         }).when('/editor', {
             templateUrl: 'app/editor/editor.html',
@@ -48,7 +48,7 @@ angular.module('makeithappen', [
             controller: 'ArraysController',
             controllerAs: 'vm'
         }).otherwise({
-            redirectTo: '/local'
+            redirectTo: '/person'
         });
     }
 ]);
\ No newline at end of file
diff --git a/examples/app/local/local.controller.js b/examples/app/person/person.controller.js
similarity index 99%
rename from examples/app/local/local.controller.js
rename to examples/app/person/person.controller.js
index ec1059954..60885e2ae 100644
--- a/examples/app/local/local.controller.js
+++ b/examples/app/person/person.controller.js
@@ -1,6 +1,6 @@
 'use strict';
 
-angular.module('makeithappen').controller('LocalController', function() {
+angular.module('makeithappen').controller('PersonController', function() {
     var vm = this;
     vm.schema = {
         "type": "object",
diff --git a/examples/app/local/local.html b/examples/app/person/person.html
similarity index 100%
rename from examples/app/local/local.html
rename to examples/app/person/person.html
diff --git a/examples/embed-index.html b/examples/index.html
similarity index 98%
rename from examples/embed-index.html
rename to examples/index.html
index 626a1b1d9..a358f5b17 100644
--- a/examples/embed-index.html
+++ b/examples/index.html
@@ -42,7 +42,7 @@
     <script src="app/app.js" type="text/javascript"></script>
     <script src="app/index/index.controller.js" type="text/javascript"></script>
     <script src="app/editor/editor.controller.js" type="text/javascript"></script>
-    <script src="app/local/local.controller.js" type="text/javascript"></script>
+    <script src="app/person/person.controller.js" type="text/javascript"></script>
     <script src="app/default-ui/default-ui.controller.js" type="text/javascript"></script>
     <script src="app/default/default-schema.controller.js" type="text/javascript"></script>
     <script src="app/placeholder/placeholder.controller.js" type="text/javascript"></script>

From a143c2daf5fe564945538cea91414084b204e20f Mon Sep 17 00:00:00 2001
From: Edgar Mueller <edgar.m.mueller@gmail.com>
Date: Mon, 9 May 2016 16:34:13 +0200
Subject: [PATCH 3/5] Added usage info to README

---
 README.md | 15 +++++++++++++++
 1 file changed, 15 insertions(+)

diff --git a/README.md b/README.md
index 50c3b478c..135e9690e 100644
--- a/README.md
+++ b/README.md
@@ -15,6 +15,21 @@ create forms by leveraging the capabilities of JSON and JSON schema.
 * Build: `npm run build` (runs `tslint` as well)
 * Test: `npm run test`
 
+# Usage
+1. Install JSON Forms via `npm install jsonforms` and require it via `require('jsonforms')`
+2. Annotate the element, where you want to place a form, with a `jsf` class attribute.
+3. Render a form with the `jsonforms` element:
+
+The simplest example looks like this, where `schema`, `uiSchema` and `data` are 
+properties of a aliased controller named `vm`:
+ 
+```html 
+  <div class="jsf">
+    <jsonforms schema="vm.schema" ui-schema="vm.uiSchema" data="vm.data"/
+  </div>
+```
+
+
 # Continuous Integration
 The JSONForms project is build and tested via [Travis](https://travis-ci.org/). Coverage is documented by [Coveralls](https://coveralls.io).
 

From d1df77fae76cef650163bc4306e65db1f9052773 Mon Sep 17 00:00:00 2001
From: Edgar Mueller <edgar.m.mueller@gmail.com>
Date: Mon, 9 May 2016 17:00:18 +0200
Subject: [PATCH 4/5] Reverted some unintended changes

---
 .../renderers/layouts/horizontal/horizontal-directive.ts       | 2 +-
 src/components/renderers/layouts/layout-directive.ts           | 2 +-
 webpack/webpack.build.js                                       | 3 +--
 3 files changed, 3 insertions(+), 4 deletions(-)

diff --git a/src/components/renderers/layouts/horizontal/horizontal-directive.ts b/src/components/renderers/layouts/horizontal/horizontal-directive.ts
index bacba2439..342bd26ea 100644
--- a/src/components/renderers/layouts/horizontal/horizontal-directive.ts
+++ b/src/components/renderers/layouts/horizontal/horizontal-directive.ts
@@ -62,6 +62,6 @@ export default angular
     .module('jsonforms.renderers.layouts.horizontal', ['jsonforms.renderers.layouts'])
     .directive('horizontallayout', () => new HorizontalDirective())
     .run(['RendererService', RendererService =>
-        RendererService.register('horizontalLayout', HorizontalLayoutRendererTester)
+        RendererService.register('horizontallayout', HorizontalLayoutRendererTester)
     ])
     .name;
diff --git a/src/components/renderers/layouts/layout-directive.ts b/src/components/renderers/layouts/layout-directive.ts
index f7535f64b..7cd0088ae 100644
--- a/src/components/renderers/layouts/layout-directive.ts
+++ b/src/components/renderers/layouts/layout-directive.ts
@@ -5,7 +5,7 @@ export default angular
         return {
             restrict: 'E',
             transclude: true,
-            template: require('./layout.html'),
+            template: require('./layout.html')
         };
     })
     .name;
diff --git a/webpack/webpack.build.js b/webpack/webpack.build.js
index c2ac73658..2975470a8 100644
--- a/webpack/webpack.build.js
+++ b/webpack/webpack.build.js
@@ -34,8 +34,7 @@ module.exports = {
     resolveLoader: {
         modulesDirectories: ["node_modules"]
     },
-    module:
-    {
+    module: {
         preLoaders: [
             {
                 test: /\.ts$/,

From 0ecbda290d24760e5b66c77ce91cd26c6064968d Mon Sep 17 00:00:00 2001
From: Edgar Mueller <edgar.m.mueller@gmail.com>
Date: Tue, 10 May 2016 14:31:49 +0200
Subject: [PATCH 5/5] Remove additional div in categorization-directive

---
 examples/index.html                              |  2 +-
 .../categories/categorization-directive.ts       | 16 +++++++---------
 2 files changed, 8 insertions(+), 10 deletions(-)

diff --git a/examples/index.html b/examples/index.html
index 7db858076..aaa85d9c3 100644
--- a/examples/index.html
+++ b/examples/index.html
@@ -70,7 +70,7 @@
                     <li class="dropdown">
                         <a ng-href="{{index.getPath()}}" class="dropdown-toggle" data-toggle="dropdown" role="button" aria-haspopup="true" aria-expanded="false">Select example<span class="caret"></span></a>
                         <ul class="dropdown-menu">
-                            <li ng-class="index.isActive('/local')"><a href="#/local">Person example</a></li>
+                            <li ng-class="index.isActive('/person')"><a href="#/person">Person example</a></li>
                             <li ng-class="index.isActive('/arrays')"><a href="#/arrays">Array controls</a></li>
                             <li ng-class="index.isActive('/editor')"><a href="#/editor">Live edit</a></li>
                             <li ng-class="index.isActive('/defaultui')"><a href="#/defaultui">Generated UI</a></li>
diff --git a/src/components/renderers/layouts/categories/categorization-directive.ts b/src/components/renderers/layouts/categories/categorization-directive.ts
index b396ee1d3..a2bdb7492 100644
--- a/src/components/renderers/layouts/categories/categorization-directive.ts
+++ b/src/components/renderers/layouts/categories/categorization-directive.ts
@@ -6,11 +6,10 @@ import {IUISchemaElement} from '../../../../jsonforms';
 class CategorizationDirective implements ng.IDirective {
     restrict = 'E';
     template = `
-    <jsonforms-layout>
-        <div class="jsf-categorization">
-            <div class="row">
-                <div class="col-sm-100">
-                    <uib-tabset>
+    <jsonforms-layout>        
+         <div class="row jsf-categorization">
+              <div class="col-sm-100">
+                   <uib-tabset>
                         <uib-tab
                             heading="{{category.label}}"
                             ng-repeat="category in vm.uiSchema.elements"
@@ -21,10 +20,9 @@ class CategorizationDirective implements ng.IDirective {
                                 </jsonforms-inner>
                             </fieldset>
                         </uib-tab>
-                    </uib-tabset>
-                </div>
-            </div>
-        </div>
+                   </uib-tabset>
+               </div>
+         </div>
     </jsonforms-layout>`;
     controller = CategorizationController;
     controllerAs = 'vm';