Ionic Framework |An anatomy of a page

Written by on April 9, 2015

Ionic Framework |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 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>
</body>

</html>
<!-- home.html -->
<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>
<!-- second.html -->
<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>
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) {

});

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 don’t forget ng-app=”myApp”) 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.

ionic platform add android
ionic build android
ionic 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

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