I made this article for all of you who are willing to play with Ionic framework, for whatever end purpose.
 
The main idea is to make a simple working example where you will be able to see some commonly used Ionic functionalities like Master-Detail pattern, sharing data between pages, and finally REST requests (we will use it to query international movie database)).
 
I will not go into great details explaining how Angular works, that’s something you will need to do in your own spare time. Though, I will try to make this example as simple as possible.
 
I don’t know if you have previously read my blog, but I did the same thing with the original Ionic 1. We are even going to create the same application. If you are interested, you can find my previous article here: Creating your first Ionic Framework application. This way you can compare the new and the old article.
 
 

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

 
Is Ionic (2 or 3) causing you problems? Are you struggling with your application? Trust me, I was in the same situation like you. 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 here, leave me a comment, and I will do my best to cover it.
 
 

Preparations

 
The first and foremost, take care your Ionic [2|3] work environment is set up and ready. Also one last thing, this framework is now known simply as Ionic. As such, further down the line, I will refer to it only as such; I will not use version numbers, it will be referred to as Ionic.
 
Make sure you have these:
 
  • Android Environment (or iOS if you’re working on a MacOS)
  • nodeJS
  • Ionic
  • Cordova
 
If you don’t have a prior Ionic installation find more information here: Ionic [2|3] | Installation Guide.
 

1. Update Ionic CLI

 
Make sure you have the latest nodeJS version. Without it, we will not be able to appropriately install/update Cordova and Ionic. Worst case scenario, use any recent version you like or prefer.
 
If your development environment is set up and ready for Ionic/Cordova, just take care it’s up to date; older versions may not work with this tutorial:
 
npm install -g ionic cordova
 
or to do a simple update:
 
npm update -g ionic cordova
 
 

2. Create A New Project

 
ionic start IonicFirstApplicationExample blank
cd IonicFirstApplicationExample 
 
You can find a working example at the end of this article if you’re an inpatient type. Just follow the provided README.md instructions.
 
Warning: As some of you don't have a prior Ionic CLI experience, from this point and on, every time I tell you to execute something, do that inside an example project folder.
 

3. Add Required Platform

 
Add Android platform:
 
ionic cordova platform add android
 
MacOS users can also add iOS platform:
 
ionic cordova platform add ios
 
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

 
If, by some strange reason, GitHub repository is not available, and you can only use a code provided in this article, this is what project folder looks like (image was taken from the Sublime text editor):
 
Ionic 2 First App Folder Structure
 

Source Walkthrough

 
I will cover important TypeScript/HTML content:
 
app.module.ts
This specific example requires two distinct pages. The first page will hold a list of queried movies. The second one is just a plain info page where you can find more details about a searched movie.
 
When Ionic application is generated as a blank template it always comes with one existing page (component) HomePage. We will need to add one more (Movie Info page):
 
ionic generate page movie-info
 
This will generate a new page folder called movie-info (inside pages folder) including our new MovieInfoPage page. Everything is done automatically, a MovieInfoPage name was formed using page name we provided with ionic generate.
 
All of this can be also done manually but CLI automation is much faster and error free.
 
Last but not least, include this new page into app.module.ts file (as currently this is not done automatically):
 
import { BrowserModule } from '@angular/platform-browser';
import { ErrorHandler, NgModule } from '@angular/core';
import { IonicApp, IonicErrorHandler, IonicModule } from 'ionic-angular';
import { HttpModule } from '@angular/http';
import { SplashScreen } from '@ionic-native/splash-screen';
import { StatusBar } from '@ionic-native/status-bar';

import { MyApp } from './app.component';
import { HomePage } from '../pages/home/home';
import { MovieInfoPage } from '../pages/movie-info/movie-info';
import { MovieService } from '../services/rest/movie-service';


@NgModule({
  declarations: [
    MyApp,
    HomePage,
    MovieInfoPage
  ],
  imports: [
    BrowserModule,
    HttpModule,
    IonicModule.forRoot(MyApp)
  ],
  bootstrap: [IonicApp],
  entryComponents: [
    MyApp,
    HomePage,
    MovieInfoPage
  ],
  providers: [
    StatusBar,
    SplashScreen,
    MovieService,
    {provide: ErrorHandler, useClass: IonicErrorHandler}
  ]
})
export class AppModule {}
 
This is the place where we need to include all our components, pages, etc. Long ago when Angular 2 was in RC state this process was done on a component or page level, which was way worse compared to what we have today.
 
Now let’s look at other application content. Everything always starts with index.html. This page is pre-generated and you will mostly not need to use it. It is also included in the root src folder.
 
index.html
<!DOCTYPE html>
<html lang="en" dir="ltr">
<head>
  <meta charset="UTF-8">
  <title>Ionic App</title>
  <meta name="viewport" content="viewport-fit=cover, 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 rel="icon" type="image/x-icon" href="assets/icon/favicon.ico">
  <link rel="manifest" href="manifest.json">
  <meta name="theme-color" content="#4e8ef7">
  
  <!-- add to homescreen for ios -->
  <meta name="apple-mobile-web-app-capable" content="yes">
  <meta name="apple-mobile-web-app-status-bar-style" content="black">

  <!-- cordova.js required for cordova apps -->
  <script src="cordova.js"></script>

  <!-- un-comment this code to enable service worker
  <script>
    if ('serviceWorker' in navigator) {
      navigator.serviceWorker.register('service-worker.js')
        .then(() => console.log('service worker installed'))
        .catch(err => console.error('Error', err));
    }
  </script>-->

  <link href="build/main.css" rel="stylesheet">

</head>
<body>

  <!-- Ionic's root component and where the app will load -->
  <ion-app></ion-app>

  <!-- The polyfills js is generated during the build process -->
  <script src="build/polyfills.js"></script>

  <!-- The vendor js is generated during the build process
       It contains all of the dependencies in node_modules -->
  <script src="build/vendor.js"></script>

  <!-- The main bundle js is generated during the build process -->
  <script src="build/main.js"></script>

</body>
</html>
 
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 application. ion-nav component handles application navigation and history.
 
Take a careful look at this property:
 
[root]="rootPage"
 
This is a special way were Angular allows us to access application navigation directly from application classes. In our case, an application is pointing the root property to rootPage variable. Later down the line, you’ll be able to learn how to access navigation component through this variable.
 
app.component.ts
import { Component } from '@angular/core';
import { Platform } from 'ionic-angular';
import { StatusBar } from '@ionic-native/status-bar';
import { SplashScreen } from '@ionic-native/splash-screen';

import { HomePage } from '../pages/home/home';
@Component({
  templateUrl: 'app.html'
})
export class MyApp {
  rootPage:any = HomePage;

  constructor(platform: Platform, statusBar: StatusBar, splashScreen: SplashScreen) {
    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();
      splashScreen.hide();
    });
  }
}
 
I will not go into great details here; if you want to learn more take a look at my previous article.
 
The root component requires us to import everything application needs for a successful initialization:
 
import { Component } from '@angular/core';
import { Platform } from 'ionic-angular';
import { StatusBar } from '@ionic-native/status-bar';
import { SplashScreen } from '@ionic-native/splash-screen';
 
The first thing to do, connect the root component model with a provided view (app.html) and initialize a class:
 
@Component({
  templateUrl: 'app.html'
})
 
Now define an application root page:
 
rootPage:any = HomePage;
 
A variable rootPage is the same one we talked about in previous section (app.html). HomePage is imported in app.component.ts sixt 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

  • Mac S

    Getting Error while working with Git download:
    [WARN] Error occurred during command execution from a CLI plugin (@ionic/cli-plugin-cordova). Your plugins may be out of
    date.
    Error: Cannot find module ‘@ionic/app-scripts’