Ionic Framework |An anatomy of a page

Written by on April 9, 2015

Ionic Framework |An anatomy of a page

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

[spoiler title=” 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


[/spoiler]

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

Categories

8 thoughts on “Ionic Framework |An anatomy of a page”

  1. Hi
    I created the file ".npmrc" and enter the following line.
    prefix = "E:\\Tools\\NodeJs"

    Then all the node modules that I need are installed in this folder.
    After that, I created a test project in temp folder.

    By typing "ionic serve", the application starts on browser without any problem and it work. So far, so good.
    However, if I try the next step, "ionic platform add android", I got the following error.

    C:\Temp\myapp1>ionic platform add android
    Adding in default Ionic hooks
    Running command: "C:\Program Files\nodejs\node.exe" C:\Temp\myapp1\hooks\before_platform_add\init_directories.js C:\Temp\myapp1
    Unable to fetch platform android: Error: Failed to parse json
    Unexpected end of input

    —-
    I installed Android Sdk into folder "E:\Tools\Android"
    In Environment Variables, I created %ANDROID_HOME% user variable which locates this folder.

    And in "path" variable, I added the following entries:
    %ANDROID_HOME%\tools;
    %ANDROID_HOME%\platform-tools

    Moreover:
    E:\Tools\apache-ant-1.9.4\bin
    %JAVA_HOME%\bin
    C:\Program Files\nodejs
    C:\Program Files\nodejs\node_modules\npm
    C:\Program Files\nodejs\node_modules\npm\bin\
    E:\Tools\NodeJs\node_modules\cordova\bin;E:\Tools\NodeJs\;
    E:\Tools\NodeJs\node_modules\ionic\bin

    What is the problem? What is missing?

    Thanks for reply in advance.

  2. Hi Dragan

    Thanks for your reply. I tried to install cordova again. (multiple times)
    However, I have still same problem.

    Here is the complete commands and outputs. Should I uninstall or delete cordova before?

    c:\Temp\myapp1>npm install -g cordova
    npm WARN engine cordova-js@3.8.0: wanted: {"node":"~0.10.x"} (current: {"node":"0.12.1","npm":"2.5.1"})
    npm WARN engine npm@1.3.4: wanted: {"node":">=0.6","npm":"1"} (current: {"node":"0.12.1","npm":"2.5.1"})
    npm WARN engine xmlbuilder@2.2.1: wanted: {"node":"0.8.x || 0.10.x"} (current: {"node":"0.12.1","npm":"2.5.1"})
    E:\Tools\NodeJs\cordova -> E:\Tools\NodeJs\node_modules\cordova\bin\cordova
    cordova@4.3.0 E:\Tools\NodeJs\node_modules\cordova
    ├── underscore@1.7.0
    ├── q@1.0.1
    ├── nopt@3.0.1 (abbrev@1.0.5)
    └── cordova-lib@4.3.0 (valid-identifier@0.0.1, osenv@0.1.0, properties-parser@0.2.3, bplist-parser@0.0.6, mime@1.2.11, unorm@1.3.3, semver@2.0.11, dep
    , init-package-json@1.3.0, plist@1.1.0, npm@1.3.4, cordova-js@3.8.0)

    c:\Temp\myapp1>ionic platform add android
    Adding in default Ionic hooks
    Running command: "C:\Program Files\nodejs\node.exe" c:\Temp\myapp1\hooks\before_platform_add\init_directories.js c:\Temp\myapp1
    Unable to fetch platform android: Error: Failed to parse json
    Unexpected end of input

    c:\Temp\myapp1>

    • Let's try something else. We first need to check if Android SDK is installed properly.

      Execute these in command prompt:

      <code>android</code>

      and

      <code>adb</code>

      And tell me if you can see output.

  3. I’m having the same issue as Tolga and I can’t find anything on this elsewhere. Android SDK is installed correctly and produces the correct outputs

  4. hello. your tutorial is really helpful but how can I link third.html, fourth.html on home.html?
    it is under multiple page mulit HTML architecture tutorial.
    Thank you!

Leave a Reply