onsen ui - Include Files

Question

I have an onsen-ui project with several pages. I have the same navigator control on each of these pages. Is there anyway I can extract this navigator control out of all my pages and keep it one file, then import/include this file in all my pages? In C# I can create a UserControl and include this UserControl in all my pages. I'm looking for something similar in Onsen-UI.

Consider the following:

<ons-page ng-controller="MyController as myCtrl">

    <div class="navigation-bar">

        <div class="navigation-bar__left">
            <ons-toolbar-button ng-click="myCtrl.back()"><ons-icon icon="fa-chevron-left"></ons-icon></ons-toolbar-button>
        </div>

        <div class="navigation-bar__center">
            My Page
        </div>

        <div class="navigation-bar__right">
            <ons-toolbar-button ng-click="myCtrl.doSomeTask()"><ons-icon icon="fa-cog"></ons-icon></ons-toolbar-button>
        </div>
    </div>

    <ons-scroller>
        /*... my page content...*/
    </ons-scroller>

</ons-page>

The "navigation-bar" div I'd like to extract out to some other file and include/import in all my other pages. Can someone tell me how to do this?

Answer 1

I figured it out. The trick is to use "ng-include".

So in my controller-page I have:

<ons-page ng-controller="MyController as myCtrl">

    <ng-include src="'incNavBar.html'"></ng-include>

    <ons-scroller>
        /*... my page content...*/
    </ons-scroller>

</ons-page>

And I have another filed called incNavBar.html which includes the following:

<div class="navigation-bar">

    <div class="navigation-bar__left">
        <ons-toolbar-button ng-click="myCtrl.back()"><ons-icon icon="fa-chevron-left"></ons-icon></ons-toolbar-button>
    </div>

    <div class="navigation-bar__center">
        My Page
    </div>

    <div class="navigation-bar__right">
        <ons-toolbar-button ng-click="myCtrl.doSomeTask()"><ons-icon icon="fa-cog"></ons-icon></ons-toolbar-button>
    </div>
</div>

Keep in mind you must use both double and single quotes for the src attribute as I've done above.