3. AngularJS or pure Javascript for multiple HTML files?

Notice: The Monaca & Onsen UI Community Forum is shutting down.

For Onsen UI bug reports, feature requests and questions, please use the Onsen UI GitHub issues page. For help with Monaca, please contact Monaca Support Team.

Thank you to all our community for your contributions to the forum. We look forward to hearing from you in the new communication channels.

AngularJS or pure Javascript for multiple HTML files?

  • F

    Hi I am new to Onsen Ui and I like this framework style a lot.

    But I’m a bit confused because I need to make web apps, no Cordova or something like, just web app also I don’t want to do a single page app because I want separate HTML pages.

    So even after study the docs and do a big research about this amazing framework I’m still confused if do I have to use AngularJS to do a web app with multiple HTML pages or can I do that with pure JavaScript?

    Thank you

    0 1 Reply
  • 侍

    @FernandoFactor Well, you can use straight JS no angular needed, but understand that Onsen is a mobile UI framework so your web app, may look a bit off. Furthermore, a lot of features are expecting mobile specific input and they may not respond like you would expect. Having said that, web apps have been created with the framework and do work well.

    0
    F
     1 Reply
  • F

    @munsterlander Thank you for this answer

    I still won’t mark my question as solved because I’m doing a sample code to show how my web app is been made and how will I include the separate HTML pages…

    0
  • F

    Sorry for the delay,

    Now I have a sample to show, as you can see this app works fine without AngularJS but everything together in one index.html file:

    <!doctype html>
<html lang="en">
  <head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no">
    <link rel="stylesheet" href="lib/onsen/css/onsenui.css"/>
    <link rel="stylesheet" href="lib/onsen/css/onsen-css-components.css"/>
    <script src="lib/onsen/js/onsenui.min.js"></script>
  </head>

<body>
  <ons-splitter>
  <ons-splitter-side id="menu" side="left" width="220px" collapse swipeable>
    <ons-page>
      <ons-list>
        <ons-list-item onclick="fn.load('main.html')" tappable>
          Main
        </ons-list-item>
        <ons-list-item onclick="fn.load('products.html')" tappable>
          Products
        </ons-list-item>
      </ons-list>
    </ons-page>
  </ons-splitter-side>
  <ons-splitter-content id="content" page="main.html"></ons-splitter-content>
</ons-splitter>

<ons-template id="main.html">
  <ons-page>
    <ons-toolbar>
      <div class="left">
        <ons-toolbar-button onclick="fn.open()">
          <ons-icon icon="md-menu"></ons-icon>
        </ons-toolbar-button>
      </div>
      <div class="center">
        Main
      </div>
    </ons-toolbar>
    <p style="text-align: center; opacity: 0.6; padding-top: 20px;">
      This is the main page!
    </p>
  </ons-page>
</ons-template>

<ons-template id="products.html">
  <ons-page>
    <ons-toolbar>
      <div class="left">
        <ons-toolbar-button onclick="fn.open()">
          <ons-icon icon="md-menu"></ons-icon>
        </ons-toolbar-button>
      </div>
      <div class="center">
        Products
      </div>
    </ons-toolbar>
    <p style="text-align: center; opacity: 0.6; padding-top: 20px;">
      Products here...
    </p>
  </ons-page>
</ons-template>

<script src="app.js"></script>
</body>
</html>

    app.js file:

    window.fn = {};

window.fn.open = function() {
  var menu = document.getElementById('menu');
  menu.open();
};

window.fn.load = function(page) {
  var content = document.getElementById('content');
  var menu = document.getElementById('menu');
  content.load(page)
    .then(menu.close.bind(menu));
};

    But I need separate files: one file for main.html and another for products.html so what should I do to override templates inside the index.html in order to include separate HTML files?

    Thank you

    0 2 Replies

  • @FernandoFactor maybe this example will use you https://docs.monaca.io/en/sampleapp/samples/ibeacon/

    0
    F
     1 Reply
  • 侍

    @FernandoFactor I only use vanilla JS. In this example, https://github.com/munsterlander/Onsen-Examples/tree/master/eBook-Template, I load multiple different files to the main one.

    0
  • F

    @quince said:

    @FernandoFactor maybe this example will use you https://docs.monaca.io/en/sampleapp/samples/ibeacon/

    @munsterlander said:

    @FernandoFactor I only use vanilla JS. In this example, https://github.com/munsterlander/Onsen-Examples/tree/master/eBook-Template, I load multiple different files to the main one.

    Thank you guys both samples will help me a lot, now I can study more and develop my web app, thank you again :)

    0
  • K

    @FernandoFactor I am still getting errors : Page Template not found. Could you please assist ?

    0