Navigation

    Monaca & Onsen UI
    • Register
    • Login
    • Search
    • Tags
    • Users
    • Blog
    • Playground
    1. Home
    2. FernandoFactor
    F
    • Flag Profile
    • Profile
    • Following
    • Followers
    • Blocks
    • Topics
    • Posts
    • Best
    • Groups
    Save
    Saving

    FernandoFactor

    @FernandoFactor

    0
    Reputation
    4
    Posts
    887
    Profile views
    0
    Followers
    0
    Following
    Joined Last Online

    FernandoFactor Follow

    Posts made by FernandoFactor

    • RE: AngularJS or pure Javascript for multiple HTML files?

      @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 :)

      posted in Onsen UI
      F
      FernandoFactor
    • RE: AngularJS or pure Javascript for multiple HTML files?

      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

      posted in Onsen UI
      F
      FernandoFactor
    • RE: AngularJS or pure Javascript for multiple HTML files?

      @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…

      posted in Onsen UI
      F
      FernandoFactor
    • AngularJS or pure Javascript for multiple HTML files?

      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

      posted in Onsen UI
      F
      FernandoFactor