From f651daa6c8c3d27833ec425508be349ac76a7735 Mon Sep 17 00:00:00 2001 From: thuongvu Date: Mon, 9 Jun 2014 16:23:02 -0700 Subject: [PATCH] docs: add rendernode --- dist/famous-angular.js | 131 ++++++++++++------ docs/unstable/directive/faApp/index.md | 5 + docs/unstable/directive/faPipeFrom/index.md | 2 + docs/unstable/directive/faRenderNode/index.md | 34 ++++- famous-angular-docs | 2 +- src/scripts/directives/fa-app.js | 5 + src/scripts/directives/fa-pipe-from.js | 91 ++++++------ src/scripts/directives/fa-render-node.js | 35 ++++- 8 files changed, 211 insertions(+), 94 deletions(-) diff --git a/dist/famous-angular.js b/dist/famous-angular.js index de603310..73f2ad3f 100644 --- a/dist/famous-angular.js +++ b/dist/famous-angular.js @@ -893,6 +893,11 @@ angular.module('famous.angular') * * * ``` + +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 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 @@ -1707,11 +1713,11 @@ Note: This example will not work. ``` -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 @@ -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 @@ -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 @@ -1831,11 +1838,11 @@ In the second view containing 3 Scroll Views, each Scroll View pipes from $scope ```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 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 + +``` + +```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') diff --git a/docs/unstable/directive/faApp/index.md b/docs/unstable/directive/faApp/index.md index 1bce395f..d5197f8c 100644 --- a/docs/unstable/directive/faApp/index.md +++ b/docs/unstable/directive/faApp/index.md @@ -51,6 +51,11 @@ it is inside of a fa-surface directive. ``` + +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 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. diff --git a/docs/unstable/directive/faPipeFrom/index.md b/docs/unstable/directive/faPipeFrom/index.md index 6ea6913e..dea5e5d0 100644 --- a/docs/unstable/directive/faPipeFrom/index.md +++ b/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 @@ -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 diff --git a/docs/unstable/directive/faRenderNode/index.md b/docs/unstable/directive/faRenderNode/index.md index e16edf30..df0aaaf3 100644 --- a/docs/unstable/directive/faRenderNode/index.md +++ b/docs/unstable/directive/faRenderNode/index.md @@ -32,7 +32,7 @@ docType: "directive" A directive to insert a 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. @@ -50,6 +50,38 @@ allows you to pass a reference to an arbitrary render node from your controller. ``` +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 + +``` + +```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 + diff --git a/famous-angular-docs b/famous-angular-docs index 345576fd..08866b6f 160000 --- a/famous-angular-docs +++ b/famous-angular-docs @@ -1 +1 @@ -Subproject commit 345576fd1ccb67b631f438f5bde3f8967b22e2aa +Subproject commit 08866b6f01c6cf870c74b5dc22807449896ea8ef diff --git a/src/scripts/directives/fa-app.js b/src/scripts/directives/fa-app.js index eae81eb5..fa5a0d93 100644 --- a/src/scripts/directives/fa-app.js +++ b/src/scripts/directives/fa-app.js @@ -16,6 +16,11 @@ * * * ``` + +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 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') diff --git a/src/scripts/directives/fa-pipe-from.js b/src/scripts/directives/fa-pipe-from.js index 279ae3c7..b30dd298 100644 --- a/src/scripts/directives/fa-pipe-from.js +++ b/src/scripts/directives/fa-pipe-from.js @@ -18,11 +18,12 @@ ##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 @@ -33,11 +34,11 @@ Note: This example will not work. ``` -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 @@ -56,17 +57,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 @@ -95,26 +96,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 @@ -157,11 +159,11 @@ In the second view containing 3 Scroll Views, each Scroll View pipes from $scope ```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 @@ -197,8 +199,7 @@ $scope.checkBoxChange = function(model, value) { }; }; ``` - - */ +*/ angular.module('famous.angular') .directive('faPipeFrom', ['$famous', '$famousDecorator', '$famousPipe', function ($famous, $famousDecorator, $famousPipe) { diff --git a/src/scripts/directives/fa-render-node.js b/src/scripts/directives/fa-render-node.js index fe94c2b2..db088997 100644 --- a/src/scripts/directives/fa-render-node.js +++ b/src/scripts/directives/fa-render-node.js @@ -6,13 +6,46 @@ * @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 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 + +``` + +```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')