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, 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

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

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

  • Tolga

    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.

  • Tolga

    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.

  • Jerez Bain

    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

  • ujala

    thankkkkk youuuuu sooooo dammmm much it help alot