docs: add rendernode

dist/famous-angular.js

@@ -893,6 +893,11 @@ angular.module('famous.angular')
  *   <!-- other fa- scene graph components -->
  * </fa-app>
  * ```
+
+Declaring fa-app creates a Famous context, the root of a Render Tree.  In the html, it appears as a div with the css class "famous-container".  
+Every element (e.g. fa-modifier's, fa-surface's) nested within an <fa-app> is added to the context.  
+ and everything nested within it is added to the context.
+ This creates a div with the css class famous-container.    
  */
 
 angular.module('famous.angular')
@@ -1692,11 +1697,12 @@ angular.module('famous.angular')
 
 ##ScrollView example
 
-In Famous, events are used to move information between widgets (such as ScrollView) and Views, and to listen to DOM events.
-To pass information between two unrelated views, or even between a nested View to its parent, use fa-pipe-to and fa-pipe-from to broadcast and receive events.
+* In Famous, events are used to move information between widgets (such as ScrollView) and Views, and to listen to DOM events.
+* To pass information between two unrelated views, or even between a nested View to its parent, use fa-pipe-to and fa-pipe-from to broadcast and receive events.
+* 
+* In the example below, even though a fa-view, fa-modifier, and fa-surface are all nested within a Scroll View, the events (such as touch or scroll) from its children do not propagate upwards.
+* Note:  This example will not work.
 
-In the example below, even though a fa-view, fa-modifier, and fa-surface are all nested within a Scroll View, the events (such as touch or scroll) from its children do not propagate upwards.
-Note:  This example will not work.
 ```html
 <fa-scroll-view>
     <fa-view ng-repeat="view in views">
@@ -1707,11 +1713,11 @@ Note:  This example will not work.
  </fa-scroll-view>
  ```
 
-With piping, all events from the element using fa-piped-from are broadcast downstream to the view piped-to if they share a reference to the same event handler on the controller.
-
-In the example below, events from the fa-surface are piped to fa-scroll-view via fa-pipe-to and fa-pipe-from directives.
-'eventHandler' refers to an instantiated EventHandler on the scope.  Fa-pipe-to="eventHandler" pipes the fa-surface's event handler to a source event handler, $scope.eventHandler.
-Fa-pipe-from declared on the fa-scroll-view pipes the target event handler, $scope.eventHandler, to this fa-scroll-view's event handler.  
+* With piping, all events from the element using fa-piped-from are broadcast downstream to the view piped-to if they share a reference to the same event handler on the controller.
+* 
+* In the example below, events from the fa-surface are piped to fa-scroll-view via fa-pipe-to and fa-pipe-from directives.
+* 'eventHandler' refers to an instantiated EventHandler on the scope.  Fa-pipe-to="eventHandler" pipes the fa-surface's event handler to a source event handler, $scope.eventHandler.
+* Fa-pipe-from declared on the fa-scroll-view pipes the target event handler, $scope.eventHandler, to this fa-scroll-view's event handler.  
 
 ```html
 <fa-scroll-view fa-pipe-from="eventHandler">
@@ -1730,17 +1736,17 @@ var EventHandler = $famous['famous/core/EventHandler'];
 $scope.eventHandler = new EventHandler();
 ```
 
-##Event Handlers on the Controller
-
-In the example below, there are two views, each with one surface.  In the html, the second view has a fa-pipe-from directive with a reference to "eventHandlerB" on the controller.  
-
-Two event handlers are instantiated on the controller.  EventHandlerA explicitly pipes to eventHandlerB using:  "eventHandlerA.pipe(eventHandlerB)".
-If this is not done, eventHandlerB will not receive any events from eventHandlerA.
-
-Via fa-click, if the fa-surface on the first view is clicked, it calls surfaceClick(), which causes eventHandlerA to emit 'myEvent'.
-Because evenHandlerA pipes to eventHandlerB, eventHandlerB receives 'myEvent'.  
-
-An event handler for 'myEvent' is declared for eventHandlerB, and when eventHandlerB receives a 'myEvent' event, its handler causes it to translate the fa-surface on the second view.
+* ##Event Handlers on the Controller
+* 
+* In the example below, there are two views, each with one surface.  In the html, the second view has a fa-pipe-from directive with a reference to "eventHandlerB" on the controller.  
+* 
+* Two event handlers are instantiated on the controller.  EventHandlerA explicitly pipes to eventHandlerB using:  "eventHandlerA.pipe(eventHandlerB)".
+* If this is not done, eventHandlerB will not receive any events from eventHandlerA.
+* 
+* Via fa-click, if the fa-surface on the first view is clicked, it calls surfaceClick(), which causes eventHandlerA to emit 'myEvent'.
+* Because evenHandlerA pipes to eventHandlerB, eventHandlerB receives 'myEvent'.  
+* 
+* An event handler for 'myEvent' is declared for eventHandlerB, and when eventHandlerB receives a 'myEvent' event, its handler causes it to translate the fa-surface on the second view.
 
 ```html
 <fa-view>
@@ -1769,26 +1775,27 @@ eventHandlerB.on('myEvent', function() {
 });
 ```
 
-##Changing Pipes based on user interaction
-
-Another feature of fa-pipe-to and fa-pipe-from is the ability to switch pipes.
-
-Using fa-pipe-to & fa-pipe-from involves binding it to a reference of source/target event handler on the controller.
-If the event handler that fa-pipe-to/fa-pipe-to is bound to changes, the directives unpipes from that event handler, and can pipe to another event handler.
-
-Below is an example with piping that involves switching pipes based on user interaction.
-
-Touch events from a single directional pad conditionally affect three different Scroll Views on a page.
-Based on which checkboxes are checked, the directional pad scroll events will affect either Scroll View #1, Scroll View #2, or Scroll View #3.
-The pipes are databound using fa-pipe-to and fa-pipe-from, and they are swapped out using the controller.
-
-
+* ##Changing Pipes based on user interaction
+* 
+* Another feature of fa-pipe-to and fa-pipe-from is the ability to switch pipes.
+* 
+* Using fa-pipe-to & fa-pipe-from involves binding it to a reference of source/target event handler on the controller.
+* If the event handler that fa-pipe-to/fa-pipe-to is bound to changes, the directives unpipes from that event handler, and can pipe to another event handler.
+* 
+* Below is an example with piping that involves switching pipes based on user interaction.
+* 
+* Touch events from a single directional pad conditionally affect three different Scroll Views on a page.
+* Based on which checkboxes are checked, the directional pad scroll events will affect either Scroll View #1, Scroll View #2, or Scroll View #3.
+* The pipes are databound using fa-pipe-to and fa-pipe-from, and they are swapped out using the controller.
+* 
+* 
 * This directive pipes a target event handler to an element's event handler.
-There are two main fa-views: the directional pad which contains a Scroll View, and the other fa-view that contains 3 Scroll Views.
-The Scroll View of the directional pad uses fa-pipe-from to pipe events from mainPipe to the Scroll View's event handler.
-The surface within the directional pad uses fa-pipe-to to pipe fa-surface events to mainPipe.
+* There are two main fa-views: the directional pad which contains a Scroll View, and the other fa-view that contains 3 Scroll Views.
+* The Scroll View of the directional pad uses fa-pipe-from to pipe events from mainPipe to the Scroll View's event handler.
+* The surface within the directional pad uses fa-pipe-to to pipe fa-surface events to mainPipe.
+* 
+* In the second view containing 3 Scroll Views, each Scroll View pipes from $scope.emptyPipe by default, another instantiated EventHandler that has no events piped to it.  
 
-In the second view containing 3 Scroll Views, each Scroll View pipes from $scope.emptyPipe by default, another instantiated EventHandler that has no events piped to it.  
 
 ```html
 <fa-view>
@@ -1831,11 +1838,11 @@ In the second view containing 3 Scroll Views, each Scroll View pipes from $scope
 </fa-view>
 ```html
 
-The directional pad has a list of input checkboxes created by an ng-repeated list from $scope.inputList.
-If a checkbox is checked, it calls checkBoxChange(), passing the letter (such as 'A') and and the model (such as 'checkBox.A') of the respective checkbox.
-If the checkbox is checked, the model (checkBox.A) is assigned the value of "true", and if it is unchecked, it is asigned the value of "false".
-
-In the controller, $scope.checkBoxChange() changes the value of the pipe of the respective Scroll View that corresponds to the checkBox model: if the checkbox is checked, it assigns the respective Scroll View to pipe from $scope.mainPipe, and if unchecked, it will continue to pipe from $scope.emptyPipe.
+* The directional pad has a list of input checkboxes created by an ng-repeated list from $scope.inputList.
+* If a checkbox is checked, it calls checkBoxChange(), passing the letter (such as 'A') and and the model (such as 'checkBox.A') of the respective checkbox.
+* If the checkbox is checked, the model (checkBox.A) is assigned the value of "true", and if it is unchecked, it is asigned the value of "false".
+* 
+* In the controller, $scope.checkBoxChange() changes the value of the pipe of the respective Scroll View that corresponds to the checkBox model: if the checkbox is checked, it assigns the respective Scroll View to pipe from $scope.mainPipe, and if unchecked, it will continue to pipe from $scope.emptyPipe.
 
 ```javascript
 // Event Handlers
@@ -1871,8 +1878,7 @@ $scope.checkBoxChange = function(model, value) {
   };
 };
 ```
-
- */
+*/
 
 angular.module('famous.angular')
   .directive('faPipeFrom', ['$famous', '$famousDecorator', '$famousPipe', function ($famous, $famousDecorator, $famousPipe) {
@@ -1972,13 +1978,46 @@ angular.module('famous.angular')
  * @description
  * A directive to insert a {@link https://famo.us/docs/0.1.1/core/RenderNode/ Famo.us RenderNode} that is
  * a wrapper for inserting a renderable component (like a Modifer or Surface) into the render tree.
- * allows you to pass a reference to an arbitrary render node from your controller.
+ * It allows you to pass a reference to an arbitrary render node from your controller.
  * @usage
  * ```html
  * <fa-render-node fa-node="arbitrary render node reference">
  *     <!-- content -->
  * </fa-render-node>
  * ```
+  
+Fa-render-node can wrap a custom-made widget or any renderable component from Famous and allow it to be inserted in the Render Tree.  
+
+In the example below, we instantiate a Famous View, add a Modifier to it, and add a surface to it - more in line with a "vanilla Famous" approach than the declarative approach with Famous-Angular.  
+
+In the html view, we declare an fa-render-node with the name of our View on the scope, and it will appear on the page.
+
+```html
+<fa-render-node fa-node="masterView" id="render"></fa-render-node>
+```
+
+```javascript
+var View = $famous['famous/core/View'];
+var Modifier = $famous['famous/core/Modifier'];
+var Surface = $famous['famous/core/Surface'];
+var Transform = $famous['famous/core/Transform'];
+
+$scope.masterView = new View();
+
+var _surf = new Surface({properties: {backgroundColor: 'red'}});
+_surf.setContent("I'm a surface");
+
+var _mod = new Modifier();
+
+var _width = 320;
+var _height = 568;
+_mod.transformFrom(function(){
+  return Transform.translate(Math.random() * _width, 0, 1);
+});
+
+$scope.masterView.add(_mod).add(_surf);
+```javascript
+
  */
 
 angular.module('famous.angular')

docs/unstable/directive/faApp/index.md

@@ -51,6 +51,11 @@ it is inside of a <a href="api/directive/faSurface">fa-surface</a> directive.
   <!-- other fa- scene graph components -->
 </fa-app>
 ```
+
+Declaring fa-app creates a Famous context, the root of a Render Tree.  In the html, it appears as a div with the css class "famous-container".  
+Every element (e.g. fa-modifier's, fa-surface's) nested within an <fa-app> is added to the context.  
+ and everything nested within it is added to the context.
+ This creates a div with the css class famous-container.
 
 
 

docs/unstable/directive/faPipeFrom/index.md

@@ -56,6 +56,7 @@ To pass information between two unrelated views, or even between a nested View t
 
 In the example below, even though a fa-view, fa-modifier, and fa-surface are all nested within a Scroll View, the events (such as touch or scroll) from its children do not propagate upwards.
 Note:  This example will not work.
+
 ```html
 <fa-scroll-view>
     <fa-view ng-repeat="view in views">
@@ -149,6 +150,7 @@ The surface within the directional pad uses fa-pipe-to to pipe fa-surface events
 
 In the second view containing 3 Scroll Views, each Scroll View pipes from $scope.emptyPipe by default, another instantiated EventHandler that has no events piped to it.  
 
+
 ```html
 <fa-view>
   <fa-scroll-view fa-pipe-from="mainPipe">

docs/unstable/directive/faRenderNode/index.md

@@ -32,7 +32,7 @@ docType: "directive"
 
 A directive to insert a <a href="https://famo.us/docs/0.1.1/core/RenderNode/">Famo.us RenderNode</a> that is
 a wrapper for inserting a renderable component (like a Modifer or Surface) into the render tree.
-allows you to pass a reference to an arbitrary render node from your controller.
+It allows you to pass a reference to an arbitrary render node from your controller.
 
 
 
@@ -50,6 +50,38 @@ allows you to pass a reference to an arbitrary render node from your controller.
 </fa-render-node>
 ```
 
+Fa-render-node can wrap a custom-made widget or any renderable component from Famous and allow it to be inserted in the Render Tree.  
+
+In the example below, we instantiate a Famous View, add a Modifier to it, and add a surface to it - more in line with a "vanilla Famous" approach than the declarative approach with Famous-Angular.  
+
+In the html view, we declare an fa-render-node with the name of our View on the scope, and it will appear on the page.
+
+```html
+<fa-render-node fa-node="masterView" id="render"></fa-render-node>
+```
+
+```javascript
+var View = $famous['famous/core/View'];
+var Modifier = $famous['famous/core/Modifier'];
+var Surface = $famous['famous/core/Surface'];
+var Transform = $famous['famous/core/Transform'];
+
+$scope.masterView = new View();
+
+var _surf = new Surface({properties: {backgroundColor: 'red'}});
+_surf.setContent("I'm a surface");
+
+var _mod = new Modifier();
+
+var _width = 320;
+var _height = 568;
+_mod.transformFrom(function(){
+  return Transform.translate(Math.random() * _width, 0, 1);
+});
+
+$scope.masterView.add(_mod).add(_surf);
+```javascript
+  
   
 
   

src/scripts/directives/fa-app.js

@@ -16,6 +16,11 @@
  *   <!-- other fa- scene graph components -->
  * </fa-app>
  * ```
+
+Declaring fa-app creates a Famous context, the root of a Render Tree.  In the html, it appears as a div with the css class "famous-container".  
+Every element (e.g. fa-modifier's, fa-surface's) nested within an <fa-app> is added to the context.  
+ and everything nested within it is added to the context.
+ This creates a div with the css class famous-container.    
  */
 
 angular.module('famous.angular')