In my previous article, I showed you an anatomy of Ionic 2 page. Now let’s do something with that knowledge, we’re going to create our first Ionic 2 application, and we’re going to create something useful. Our application will use a Master-Detail pattern and REST protocol (We will use it to query international movie database).
 
I don’t know if you remember (for those of you who read my blog before), but I did the same thing with Ionic 1. It’s even the same app we’re going to create today. You can find it here: Creating your first Ionic Framework application. This way you can compare old example with a new one.
 
 

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

 
Ionic 2 is causing you problems? Are you struggling to make it work? Trust me, I wasn’t in any better situation. If you require more information beyond the subject of this article you will probably find it in a list below. Take a look; if there’s a topic not covered there, leave me a comment and I’ll cover it.
 
 

Preparations

 
Before we can begin, make sure you have everything preconfigured for Ionic 2.
 
You should have these:
 
  • Android Environment (or iOS if you’re working on a MacOS)
  • nodeJS
  • Ionic 2
  • Cordova
 
Find more information here: IONIC 2 | INSTALLATION GUIDE if you don’t have a previous Ionic 2 installation or if you have never read my previous articles on this topic.
 

1. Update Ionic & Cordova

 
You need to have a latest nodeJS version, without it, you’ll not be able to install/update Cordova and Ionic appropriately.
 
If you have a previous Ionic/Cordova installation make sure its up to date, older versions may not work with this tutorial. Though latest versions may also mess things up:
 
npm install -g cordova ionic@beta
 
or you can even do it like this:
 
npm update -g cordova ionic@beta
 
I will remove beta keyword once Ionic 2 reach RC status.
 
Warning: Ionic2 is still in beta so the final implementation may differ from this code. I will update this article if and when that happens.
 
 
 

2. Create A New Project

 
ionic start Ionic2FirstApp blank --v2
cd Ionic2FirstApp
 
Open app directory and remove all content from a directory called pages but don’t delete it. Somewhere below you’ll find a link to GitHub repo holding a working example (or you can copy past provided code). Download zipped project repo folder, copy app and www directory and past it into a newly created folder.
 
Warning: Since some of you never worked with Ionic CLI. From this point and further, every time I tell you to execute something, do that inside a project folder.
 
Add Android platform:
 
ionic platform add android
 
MacOS users can also add iOS platform:
 
ionic platform add ios
 

3. Install Cordova Whitelist Plugin

 
Install Cordova Whitelist Plugin:
 
cordova plugin add cordova-plugin-whitelist
 
Open www folder and add this security meta tag to index.html file:
 
<meta http-equiv="Content-Security-Policy" content="script-src 'self' 'unsafe-eval' 'unsafe-inline' *; object-src 'self'; style-src 'self' 'unsafe-inline'; media-src *">
 
Be careful, don’t do this step before you add designated platform(s) (Android/iOS).
 
GitHub - Whitelist
 
 
Install Whitelist plugin only if you’re using Cordova 4.0 +. Without it, you’ll receive “Application Error: There was a network error.” error.
 

Example

 
Before we start, you can find a working example at the Ionic View service. Search for an ID 8A865059.
 
Ionic 2 First App
 
Or you can look at this embedded example:
 
Embeded example:
 
Ionic Page Navigation
 
Unfortunately, I can’t show you an embedded working example like before. For some reason, this code works just fine when executed on my local Windows-based Apache server, but fails on my Linux-based hosted Apache server. Hopefully, I’ll find a solution for this problem.
 

Source Code

 
Update: 28.06.2016 (June 28st) - Article and example are updated to match changes made to Ionic 2.0.0-beta.10 version
 
If GitHub repo is not available, and you can only use code provided below, this is what project folder looks like (image was taken from Sublime text editor):
 
Ionic 2 First App Folder Structure
 
index.html
<!DOCTYPE html>
<html lang="en" dir="ltr">
<head>
  <title>Ionic</title>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0, user-scalable=no">
  <meta name="format-detection" content="telephone=no">
  <meta name="msapplication-tap-highlight" content="no">

  <link ios-href="build/css/app.ios.css" rel="stylesheet">
  <link md-href="build/css/app.md.css" rel="stylesheet">
  <link wp-href="build/css/app.wp.css" rel="stylesheet">
</head>

<body>
  <ion-app></ion-app>

  <!-- cordova.js required for cordova apps -->
  <script src="cordova.js"></script>
  <!-- Polyfill needed for platforms without Promise and Collection support -->
  <script src="build/js/es6-shim.min.js"></script>
  <!-- Zone.js and Reflect-metadata  -->
  <script src="build/js/Reflect.js"></script>
  <script src="build/js/zone.js"></script>
  <!-- the bundle which is built from the app's source code -->
  <script src="build/js/app.bundle.js"></script>
</body>

</html>
 
The main index.html is part of a www directory and it will always look the same.
 
Only thing worth pointing out is:
  <ion-app></ion-app>
 
That component will initialize our application.
 
app.html
<ion-nav [root]="rootPage"></ion-nav>
 
This line is the most important part of any Ionic 2 application. ion-nav component handles application navigation and history.
 
Take a careful look at this property:
 
[root]="rootPage"
 
This is a special way AngularJS 2 allows us to access navigation directly from application classes. In this case, an application is referencing root property to rootPage variable. In the next section, you’ll learn how to access nav component through this variable.
 
app.ts
import {Component} from '@angular/core';
import {Platform, ionicBootstrap} from 'ionic-angular';
import {StatusBar} from 'ionic-native';
import {MovieListPage} from './pages/movie-list/movie-list';


@Component({
  templateUrl: 'build/app.html',
})

export class MyApp {
  rootPage: any = MovieListPage;

  constructor(platform: Platform) {
    platform.ready().then(() => {
      // Okay, so the platform is ready and our plugins are available.
      // Here you can do any higher level native things you might need.
      StatusBar.styleDefault();
    });
  }
}

ionicBootstrap(MyApp);
 
I will not go into great details here; if you want to learn more take a look at my previous article.
 
First, root component needs to import everything required for successful application initialization:
 
import {Component} from '@angular/core';
import {Platform, ionicBootstrap} from 'ionic-angular';
import {StatusBar} from 'ionic-native';
import {MovieListPage} from './pages/movie-list/movie-list';
 
Connect the root component model with a view (app.ts with app.html) and initialize a class:
 
@Component({
  templateUrl: 'build/app.html',
})
 
Now define an application root page:
 
  rootPage: any = MovieListPage;
 
A variable rootPage is the same one we talked about in previous section (app.html). MovieListPage is imported in app.ts fourth line.
 
Continue to the next page

  • Truc

    EXCEPTION: Cannot resolve all parameters for MovieService(?). Make sure they all have valid type or annotations.

  • Truc

    I got this error “EXCEPTION: Cannot resolve all parameters for MovieService(?). Make sure they all have valid type or annotations.”. Pls help

    • At what point have you received this error?

    • Oh I found a problem after Ionic 2.0.0-alpha.49 update. Apparently I must enforce metadata generation in my MovieService. I’ll update this article in next few minutes.

  • Basszer Billi

    Hi, I downloaded the source code from Git, but when I try run ionic serve, I’ve got errors.
    Emit skipped at State.emit, at transform, …
    It seems every error is from awesome-typescript-loader. How can I fix this?
    Thx

    • Basszer Billi

      oh, my bad, I had to install it.
      sorry 🙂

  • Piccaza

    Thank you so much. Took a long time to find out a tutorial on this topic. Ver very helpful.

    Also I have doubt regarding the `pop` , how it should written?

    In the above example when we come back to movies-list page from movie-info page, do we have to manually pop the movie-info page from nav?
    If so where do we have to write on what event. I am not getting idea on that.

  • Bla

    Just a quick question if you don’t mind, is the app made in Ionic2 able to be publish to app store yet? I know it’s in Beta, but I want to use it so badly..

    • Few people already done that while Ionic was still in the alpha so give it a go.

  • Gus Smith

    Using Ionic 2.0.0-beta.3
    Get error in service Unexpected token in line “constructor(@Inject(Http) http: Http)”

    Finally found another example that uses this:

    static get parameters() {
    return [[Http]];
    }

    constructor(http)

    Which works for me.

    • Thanks m8, I’ve updated article GitHub example, and tomorrow I’ll update this article.

  • Saifuddin

    app.html is not in the project in ionic beta version. please update your tutorial

    • Project has been updated to Ionic 2.0.0-beta.10 version.

  • selamet rahardjo

    hi, nice article, i have question can we access function that in @App class from @Page class? i mean i need some global function that will be available for @Page whether in class (.ts) or in layout (.html), thanks.

  • KingOfMyRoom

    Thank you for the tutorial. It’s really helpful to get a working example and get familiar with Ionic.

  • Abhinav

    mate! I’ve learnt a lot from your tuts.! Although, not directly related to this project, it would be awesome if you could just tell me how can we align an icon to the far right of a block/full width button. Or text to the far left. Can’t figure it out, for past 1 and a half hour. Thanks

  • Remzo

    I was lost quit quickly (newbie problems)

    It happened here:

    Somewhere below you’ll find a link to GitHub repo holding a working example (or you can copy past provided code).

    Can anyone please tell me:

    Where is “somewhere below”?
    Where is the “provided code”?

    Thanks!

  • Magiczny

    It seems to me that after the new update of Ionic you need to update the tutorial -> for instance when you start a new blank application there is no more app.html. Cheers;)

  • Vinicius Secco

    Hi! Great tutorial!

    There is a way to align multiple avatars?

    Thanks!

  • Phyo Zaw

    I downloaded the file from git and run it with ionic serve. However , I got only blank page. Is there anything missing I don’t know . Thanks

    • Salman

      I guess there is a folder (build) missing.

  • Dipak Mahapurkar

    Nice tutorial, I want to implement common tabs and sidemenu for all view, in ionic v1 this will i done, but in ionic v2 how i can implement such functionality. Please help me. Thanks you.

    • Slash

      I @dipakmahapurkar:disqus, do you found some solution? I’m not doing the same thing, but I tried to do something similar. I would have one menu and one header for all views. Some suggestions or examples?

  • Dwayne Patel

    ionic view not working