OnsenUI | An anatomy of a page

Written by on April 9, 2015

OnsenUI | An anatomy of a page

Multi page – multiple HTML architecture

This approach is almost identical to second solution, with only one difference. Instead of using one large HTML file every page is now held in a single separate HTML file. This way you will have a better readability, but an application will not be as fast (like in the second solution).

Demo

I will not embed a working example because it is identical to previous one. Click on a top link if you want to see how it works.

HTML:
<!-- index.html -->
<!DOCTYPE html>
<html>

<head>
  <script src="https://code.angularjs.org/1.3.0/angular.js"></script>
  <script src="http://onsenui.io/OnsenUI/build/js/onsenui.js"></script>
  <link rel="stylesheet" href="http://onsenui.io/OnsenUI/build/css/onsenui.css" />
  <link rel="stylesheet" href="//cdnjs.cloudflare.com/ajax/libs/onsen/1.2.0-beta/css/onsen-css-components.css" />
  <link rel="stylesheet" href="http://onsenui.io/OnsenUI/build/css/topcoat-mobile-onsen-ios7.css" />
  <link rel="stylesheet" href="style.css" />
  <script src="script.js"></script>
</head>

<body ng-controller="MainController">

  <ons-navigator animation="slide" var="app.navi">
    <ons-page>
      <ons-toolbar>
        <div class="center">Main Page</div>
      </ons-toolbar>
  
      <p style="text-align: center">
        <ons-button modifier="light" ng-click="app.navi.pushPage('page.html');">Push</ons-button>
      </p>
    </ons-page>   
  </ons-navigator>    

</body>

</html>
<!-- page.html -->
<ons-page>
  <ons-toolbar>
    <div class="center">Second Page</div>
  </ons-toolbar>

  <p style="text-align: center">
    <ons-button modifier="light" ng-click="app.navi.popPage('index.html');">Pop</ons-button>
  </p>
</ons-page>
JavaScript:
var module = ons.bootstrap('my-app', ['onsen']);
module.controller('MainController', function($scope) {
  ons.ready(function() {

  });
});

Working example

I still want to show you how a second example looks like wrapped inside a real Android application.

Open your minimized command prompt. You should be inside a www directory. Copy our HTML example into index.html (copy only BODY content) and our JavaScript example into js/app.js file (replace previous content). Now get back to the project root directory and execute these three lines.

cordova platform add android
cordova build android
cordova emulate android

Here is how our app should look like :

Who Am I?

Between working as a senior Java developer in one of the largest insurance companies in the world and traveling, in my free time, I work as a professional mobile development adviser. I'm also a major jQuery Mobile supporter back at StackOverflow and a forum moderator at the official Ionic Framework forum.



Categories

1 thought on “OnsenUI | An anatomy of a page”

Leave a Reply