Page Template

A page template is composed of different sections:

• header
• footer
• left & right margins

These sections are HTML snippets displayed around the body of the page. By default, these section are pre-defined for an application in a template called basic or basic_mobile for a mobile application. In terms of Angular sections, they depend on the Application controller. Any scope variables defined in the application controller is accessible from these sections.

In addition to display logo or application information, page template are also in charge of the the page navigation (usually from a main or side menu). To do so, developer can use the routeToPage() function such as follow

<a ng-click="routeToPage('MySecondPage')">Second Page</a>

Note that the routing between pages is managed by the Angular-Route library. For that reason, the usage of the angular service $location is possible. All pages are dependent of the root path, such as:

$location.url( '/MySecondPage' );

Changing the Browser URL is also possible by putting the right path behind the # sign, such as:

.../index.html#/MySecondPage

Inject a View in Template

Views can be injected into one section of the application template by using the following html snippet:

<div id="sample-view-wrapper" dfx-view-wrapper="MySampleView" dfx-view-wrapper-id="123" flex="100" layout="column"> </div>