In my previous article, we discussed installation requirements for Ionic 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.
 
 
 
 

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

Table of Contents

Click here if you want to see other tutorials; or articles about Ionic themes, templates, plugins ...

Tutorials

Other Resources (themes, templates, plugins, Cordova plugins, starter apps)

Cordova Plugin Tutorials

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, step by step.
 
Open command prompt and go to your project directory. Do not create a new project folder in advance, Ionic CLI tools will do this job for us.
 
Before creating our project make sure you have the latest Ionic Framework installation:
npm update -g ionic
 
This next line will create a blank Ionic project called ionicDemoApp1 inside a directory that holds the same name.
 
ionic start ionicDemoApp1 blank
 
Open the newly created folder:
 
cd ionicDemoApp1
cd www
 
Now minimize a command prompt and carefully read next few segments.
 

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:
 
Ionic Single page
 
HTML:
 
<!DOCTYPE html>
<html ng-app="myApp">

  <head>
    <meta charset="utf-8" />
    <meta name="viewport" content="initial-scale=1, maximum-scale=1, user-scalable=no, width=device-width" />
    <title>Ionic Framework Example</title>
    <link href="//code.ionicframework.com/nightly/css/ionic.css" rel="stylesheet"/>
    <script src="//code.ionicframework.com/nightly/js/ionic.bundle.js"></script>
    <script src="app.js"></script>
  </head>
  
  <body ng-controller="MainCtrl">
  
    <ion-pane>
      <ion-header-bar class="bar-header">
          <h1 class="title">Main Page</h1>
      </ion-header-bar>    
      <ion-content has-header="true" padding="true">
        <a class="button" ng-click="toggle()">Click me</a>
      </ion-content>
    </ion-pane>
  
  </body>

</html>
 
JavaScript:
 
var app = angular.module('myApp', ['ionic']);

app.controller('MainCtrl', function($scope) {
    $scope.toggle = function() {
        alert('This is a click event');
    };
});
 
As you can see, our page content is held inside an ion-pane directive. It’s a simple container that fits a content, with no side effects. Inside we have two additional directives. First one is an ion-header-bar. It adds a fixed header bar above some content. The second one is an ionContent directive; it provides an easy to use content area that can be configured to use Ionic’s custom Scroll View or the built-in overflow scrolling of the browser.
 

Multi page – single HTML architecture

 
Next approach is similar in nature to the first one. The main difference, it is used for two or more pages inside a single HTML file.
 
Every page is put into a single <script type=”text/ng-template”> file. 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:
 
Ionic Multi page – single HTML architecture
 
HTML:
 
<!DOCTYPE html>
<html ng-app="myApp">

<head>
  <meta charset="utf-8" />
  <meta name="viewport" content="initial-scale=1, maximum-scale=1, user-scalable=no, width=device-width" />
  <title>Ionic Framework Example</title>
  <link href="//code.ionicframework.com/nightly/css/ionic.css" rel="stylesheet"/>
  <script src="//code.ionicframework.com/nightly/js/ionic.bundle.js"></script>
  <script src="app.js"></script>
</head>

<body>
  <div ng-controller="MainCtrl">
    <ion-nav-view animation="slide-left-right"></ion-nav-view>
  </div>
  <script id="home.html" type="text/ng-template">
    <ion-view>
      <ion-header-bar class="bar-header">
          <h1 class="title">Main Page</h1>
      </ion-header-bar>    
      <ion-content has-header="true" padding="true">
        <a class="button icon-right ion-chevron-right" href="#/second">Go to the music page!</a>
      </ion-content>
    </ion-view>
  </script>
  <script id="second.html" type="text/ng-template">
    <ion-view>
      <ion-header-bar class="bar-header">
          <h1 class="title">Second Page</h1>
      </ion-header-bar>        
      <ion-content has-header="true" padding="true">
        <a class="button icon-left ion-home" href="#/">Go back!</a>
      </ion-content>
    </ion-view>
  </script>  
</body>

</html>
 
As you can see we are no longer using ion-pane directive, ion-view is used instead. It is a container for view content and any navigational and header bar information.
 
Another difference is the ion-nav-view directive. As a user navigates throughout your app, Ionic 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 ion-nav-view is supposed to do. If you remove it, you will not be able to see any page at all.
 
If you’ve a prior AngularJS experience (with angular-ui-router), ion-nav-view is equivalent to ui-view. On top of that, ion-nav-view provides for animations, history, and more.
 
JavaScript:
 
var app = angular.module('myApp', ['ionic']);

app.config(function($stateProvider, $urlRouterProvider) {
  $stateProvider
  .state('index', {
    url: '/',
    templateUrl: 'home.html'
  })
  .state('music', {
    url: '/second',
    templateUrl: 'second.html'
  });
  $urlRouterProvider.otherwise('/');  
});

app.controller('MainCtrl', function($scope) {

});
 
In our config block, we inject $stateProvider and $urlRouterProvider. These provide the basic blocks necessary to configure our application’s state machine.
 
In our application, we have declared two states, and each one is given a link to the appropriate template. When this is run, the template is injected where ion-nav-view is located in the parent template.
 
As you can see, this approach is similar to AngualarJS. With a few big differences. First, you don’t need to initialize ngRoute module (Ionic will do this automatically) and a routing syntax is different, so be careful.
 
Continue Reading