How to load multiple .html files using onsen ui?

Question

I am a newbie to onsen ui.

https://onsen.io/v2/guide/#making-your-web-and-hybrid-app-feel-native

I don't want to put all javascript programs in one html.

if i have muitple html, any idea how to load it??

www
- index.html
- page2.html

index.html

<template id="page1.html">
  <ons-page id="page1">
    <ons-toolbar>
      <div class="center">Page 1</div>
    </ons-toolbar>

    <p>This is the first page.</p>

    <ons-button id="push-button">Push page</ons-button>
  </ons-page>
</template>

</body>
</html>
<script>
document.addEventListener('init', function(event) {
  var page = event.target;

  if (page.id === 'page1') {
    page.querySelector('#push-button').onclick = function() {
      document.querySelector('#myNavigator').pushPage('page2.html', {data: {title: 'Page 2'}});
    };
  } else if (page.id === 'page2') {
    page.querySelector('ons-toolbar .center').innerHTML = page.data.title;
  }
});
</script>

page2.html

<template id="page2.html">
  <ons-page id="page2">
    <ons-toolbar>
      <div class="left"><ons-back-button>Page 1</ons-back-button></div>
      <div class="center"></div>
    </ons-toolbar>

    <p>This is the second page.</p>
  </ons-page>
</template>

Anyidea how to using load onsen ui multiple .html page???

Answer 1

To put Javascript directly in the HTML files, like you describe, is not considered good development practice. You should link to external .js files instead. There are a number of good reasons for this, including easier maintenance, more modular code (making it easier to reuse code for other projects), and improved performance (both actual and perceived).

You should do the same with any CSS you use to override/modify the native Onsen UI look.

If you remove the Javascript from the actual HTML, you can now place the HTML for all pages in one single .html file. If you only have a few pages, that is probably the best alternative.

You can check this answer for how you actually use separate HTML files: How to use multiple html files in onsenui