--- layout: "docs_api" version: "unstable" versionHref: "/docs/unstable" path: "api/directive/faApp/" title: "fa-app" header_sub_title: "Directive in module famous.angular" doc: "faApp" docType: "directive" ---

fa-app

This directive is the container and entry point to Famo.us/Angular. Behind the scenes, it creates a Famous context and then adds child elements to that context as they get compiled. Inside of this directive, normal HTML content will not get rendered to the screen unless it is inside of a fa-surface directive.

Usage

```html ```

Example

Fa-app creates a Famous Context, the root of the Render Tree. Renderables (such as fa-modifier's & fa-surface's) nested within an fa-app are added to this root context.

Declaring fa-app appends a div with the class of "famous-angular-container" to the DOM. It then instantiates a Context via Famous' Engine .createContext() method, passing in a reference to the famous-angular-container div, resulting in a Famous context that renderables can be added to connected to Angular. Fa-app can be declared as an element or as an attribute within another element.

{% assign lvl = page.url | append:'X' | split:'/' | size %} {% capture relative %}{% for i in (3..lvl) %}../{% endfor %}{% endcapture %}

Edit in Plunker

{% raw %} <fa-app>
  <fa-modifier>
    <fa-surface>This will be shown on screen.</fa-surface>
  </fa-modifier>
  <div>This will not appear on screen because it is not inside an fa-surface.</div>
</fa-app>{% endraw %}

{% raw %}fa-app {
  position: fixed;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
}{% endraw %}

{% raw %}angular.module('faAppExampleApp', ['famous.angular']);{% endraw %}

Common Qustions

Multiple fa-app's

Nesting an fa-app within another fa-app is possible, and the use case of this approach would be for css content overflow.

In the example below, there is an fa-surface with an fa-app nested inside. Normally, an fa-surface should not nest another Famous element within it because it is a leaf node that has the purpose of being a container for html content. The exception is nesting an fa-app within an fa-surface, which creates another Famous context, in which Famous elements can be nested inside.

{% assign lvl = page.url | append:'X' | split:'/' | size %} {% capture relative %}{% for i in (3..lvl) %}../{% endfor %}{% endcapture %}

Edit in Plunker

{% raw %}<fa-app style="width: 500px; height: 500px;">
  <fa-surface>
    <fa-app style="width: 200px; height: 200px; overflow: hidden;">
      <fa-image-surface 
         fa-image-url="https://famo.us/assets/images/famous_logo_white.svg" 
         fa-size="[400, 400]">
      </fa-image-surface>
    </fa-app>
  </fa-surface>
</fa-app>{% endraw %}

{% raw %}fa-app {
  background-color: #000;  
}{% endraw %}

{% raw %}angular.module('faAppExampleAppA', ['famous.angular']);{% endraw %}

The outer fa-app is sized 500x500, and it contains all of the content. The use case of this fa-app within another fa-app is to clip content using the css overflow:hidden property. The fa-image-surface links to a 400x400 sized image of the Famous logo. Its parent is the nested fa-app, whose size is only 200x200.

The larger image content (400x400) will overflow the boundaries of its parent, the the nested fa-app (200x200). Because fa-app has a css overflow:hidden property, it will clip the content of any of its children that is outside the 200x200 region. Any part of the 400x400 image that reaches outside of these boundaries are ignored. This may be useful for complex animations.

Take note: declaring multiple fa-apps within a page is permitted, but each new one incurs a penalty for performance. fa-app is similar to a Famo.us ContainerSurface, in that it creates an additional Context that the Famo.us Engine must manage.

Fa-app must be declared with a height & width

The element fa-app is declared within must have a set height and width styling, declared inline or as a css declaration in an external stylesheet.

<fa-app style="width: 320px; height: 568px;">
   <!-- other fa- scene graph components -->
</fa-app>

If fa-app is declared as an attribute of another element, that element must be a display:block element, such as a div or p.

<div fa-app style="width: 320px; height: 568px;">
  <!-- other fa- scene graph components -->
</div>