Using multiple html files in onsen UI

Question

I just discovered onsen ui and I really like the design and the feeling of it.

I have a problem, though:

http://onsen.io/guide/overview.html#DefiningMultiplePagesinSingleHTML

Here it says: "Instead of creating menu.html and content.html in separate files, you can also define the page content in the same page."

I don't like to have my whole app in one html file so I tried to put each template into a separate file. This is my file structure:

www
- index.html
- products.html
- services.html

This is my tabbar:

<ons-tabbar>
  <ons-tabbar-item active="true" page="products.html">
    <div class="tab">
      <ons-icon icon="ion-home" class="tab-icon"></ons-icon>
      <div class="tab-label">Products</div>
    </div>
  </ons-tabbar-item>

  <ons-tabbar-item page="services.html">
    <div class="tab">
      <ons-icon icon="ion-gear-a" class="tab-icon"></ons-icon>
      <div class="tab-label">Services</div>
    </div>
  </ons-tabbar-item>
</ons-tabbar>

EDIT contents of services.html (products.html is similar):

<ons-template id="services.html">
  <ons-page>
    <ons-toolbar>
      <div class="center">Services</div>
    </ons-toolbar>

    <ons-list>
      <ons-list-item>Item1</ons-list-item>
      <ons-list-item>Item2</ons-list-item>
      <ons-list-item>Item3</ons-list-item>
    </ons-list>
  </ons-page>
</ons-template>

END EDIT

Now, when the app loads (Firefox, Chrome, iOS emulator) it will display the tabbar and empty content. In the console you can see that the external html files have not been loaded yet. If I click on Services, the browser gets the services.html file, but it is not displayed. I click on Products, the products.html file gets loaded, but not displayed.

Finally: If I click on Services the second time, the contents of the external html file are being displayed correctly.

Is this a bug? Is there a workaround? I tried loading the pages into $templateCache on the ons.ready() event. They were successfully loaded, but again not displayed until the second click...

Would be a shame if a great framework like this would not offer splitting a project into multiple files.

Answer 1

Remove the <ons-template> tag. It's only needed if you define the templates in index.html.