In my previous article, we discussed installation requirements for OnsenUI framework, but we didn’t have time to do anything with it. In this article, we’re going to talk about page anatomy while creating a small working example.
 
For those of you who don’t know, Onsen UI is similar to jQuery Mobile from the architecture point of view (it’s also much faster). This is important because you will need to make a big decision. Why? An Onsen UI app is actually an AngularJS app, but you can also use it with plain JavaScript. My tutorials will all use pure AngularJS approach. You will need to decide which way you want to go.
 
 

Note: If this tutorial was helpful, need further clarification, something is not working or do you have a request for another Ionic post? Furthermore, if you don't like something about this blog, if something is bugging you, don't like how I'm doing stuff here, again leave me a comment below. I'm here to help you, I expect the same from you. Feel free to comment below, subscribe to my blog, mail me to dragan.gaic@gmail.com, or follow and mention me on twitter (@gajotres). Thanks and have a nice day!

PS. If you want my help, if possible (even if it takes you some time to do that), create a working example I can play with. Use Plunker for AngularJS based questions or jsFiddle for jQuery/jQuery Mobile based questions.


 

Table of Contents

Preparations

 
Before we can go any further, we need to create our first project. This step depends on the first article so make sure you’ve done everything mentioned including section 2.3. If you did everything correctly you should have a project/project folder.
 

Page architecture

 
This is the point where we need to plan carefully. What do we want to do? Are we going to create a single page application or a multipage one? Are we going to use single HTML file or several of them? I will name three available approaches and you decide which one best suits your needs.
 

Single page

 
This approach is the easiest one. Our application will have only one available page, and we don’t need to worry about navigation.
 
Demo
 
Embeded working example:
 
OnsenUI single page example
 
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-page>
    <ons-toolbar fixed-style>
      <div class="center">Title</div>
    </ons-toolbar>

    <p style="text-align: center">
      <ons-button modifier="light" ng-click="toggle()">Click Me!</ons-button>
    </p>
  </ons-page>

</body>
</html>
 
JavaScript:
 
var module = ons.bootstrap('my-app', ['onsen']);
module.controller('MainController', function($scope) {
  ons.ready(function() {
    $scope.toggle = function() {
        alert('This is a click event');
    };
  });
});
 
As you can see, our page content is held inside an ons-page directive. It’s a simple container that fits a content and as such should be used as a root component of each page. The content of a page component is scrollable. Inside we have one additional directive called ons-toolbar.
 

Multi page – single HTML architecture

 
Next approach is similar in nature to the first one. Main difference, it is used for two or more pages inside a single HTML file.
 
Every page (except the first one) is put into a single HTML fragment called ons-template. This is a good approach because templates will be cached for very fast loading, instead of having to fetch them from the network. I would advise you against it if you need to create a large application, it can get messy if everything is stored inside a single HTML file.
 
Demo
 
Embeded working example:
 
OnsenUI Multi page – single HTML architecture
 
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>    
  
  <ons-template id="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>
  </ons-template>
  
</body>
</html>

 
JavaScript:
 
var module = ons.bootstrap('my-app', ['onsen']);
module.controller('MainController', function($scope) {
  ons.ready(function() {

  });
});
 
This approach uses one additional directive called ons-navigator. If you’ve a prior Angular experience (with angular-ui-router), ons-navigator is equivalent to ui-view.
 
As a user navigates throughout your app, OnsenUI can keep track of their navigation history. By knowing their history, transitions between views correctly enter and exit using the platform’s transition style. This is what ons-navigator is supposed to do. If you remove it, you will not be able to see any page at all.
 
There’s still one big difference. If you take a look at JavaScript section you’ll notice that something is missing. Unlike Angular and Ionic Framework, Onsen UI doesn’t require manually set routing, so forget ngRoute modul.
 
Continue Reading

  • Uzoma Emuchay

    Could you do multiple html files interacting with jquery?