Search code examples
onsen-ui

Onsen UI - reusable HTML fragments without Angular JS?

I'm having a play around with Onsen UI and wondering if there's a way to define and include fragments of HTML when Onsen UI is being used without Angular JS?

For example, say I have two pages:

<ons-template id="page1.html">
    <ons-page>
        <ons-toolbar>
            <ons-toolbar-button onclick="menu.toggleMenu()"><ons-icon icon="fa-bars"></ons-icon></ons-toolbar-button>
            <div class="center">Page 1</div>
        </ons-toolbar>
        <p>Page 1 content</p>
    </ons-page>
</ons-template>

<ons-template id="page2.html">
    <ons-page>
        <ons-toolbar>
            <ons-toolbar-button onclick="menu.toggleMenu()"><ons-icon icon="fa-bars"></ons-icon></ons-toolbar-button>
            <div class="center">Page 2</div>
        </ons-toolbar>
        <p>Page 2 content</p>
    </ons-page>
</ons-template>

The definition of the <ons-toolbar-button> is duplicated in both pages, so is there a mechanism to define the code fragment and inject it multiple times?

<ons-toolbar-button onclick="menu.toggleMenu()"><ons-icon icon="fa-bars"></ons-icon></ons-toolbar-button>

I know that using Angular this can be done using the ngInclude directive, but wondering if <ons-template> can somehow be used to do this without the need to go Angular?

Solution

  • Onsen UI 1.x is based on Angular, so it's hard to perform any action without using it.

    What are you looking for is Onsen UI 2, which is based on Web Components. This means that it's totally agnostic (platform independent) and can be used in combination with any other framework. Actually it's in alpha release but it's already quite stable, a beta is expected very soon.

    If you want to take a look at Onsen UI 2.0 you can:

    Quickstart
$ git clone http://github.com/OnsenUI/onsenui2-quickstart
$ cd onsenui2-quickstart
$ npm install && gulp serve