http://www.gajotres.net/ionic-2-tutorial-lets-create-our-first-application/
By
Gajotres -Last updated on March 31st, 2016
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).
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.
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
Preparations
- Android Environment (or iOS if you’re working on a MacOS)
- nodeJS
- Ionic 2
- Cordova
1. Update Ionic & Cordova
1
|
npm
install
-g cordova ionic@2.0.0-beta.22
|
1
|
npm update -g cordova ionic@2.0.0-beta.22
|
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
1
2
|
ionic start Ionic2FirstApp blank --v2
cd
Ionic2FirstApp
|
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.
1
|
ionic platform add android
|
1
|
ionic platform add ios
|
3. Install Cordova Whitelist Plugin
1
|
cordova plugin add cordova-plugin-whitelist
|
1
|
<
meta
http-equiv
=
"Content-Security-Policy"
content
=
"default-src *; script-src 'self' 'unsafe-inline' 'unsafe-eval' *; style-src 'self' 'unsafe-inline' *"
>
|
Example
![Ionic 2 First App](http://www.gajotres.net/wp-content/uploads/2015/12/Ionic2FirstAppComparison.jpg)
Embeded example:
Ionic Page Navigation
Source Code
Update: 31.03.2016 (March 31st) - Article and example are updated to match changes made to Ionic Beta 22 version
![Ionic 2 First App Folder Structure](http://www.gajotres.net/wp-content/uploads/2015/12/Ionic2FirstAppProjectFolder.jpg)
index.html
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
|
<!
DOCTYPE
html>
<
html
lang
=
"en"
>
<
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
http-equiv
=
"Content-Security-Policy"
content
=
"default-src *; script-src 'self' 'unsafe-inline' 'unsafe-eval' *; style-src 'self' 'unsafe-inline' *"
>
<
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
>
<!-- Zone.js and Reflect-metadata -->
<
script
src
=
"build/js/angular2-polyfills.js"
></
script
>
<!-- the bundle which is built from the app's source code -->
<
script
src
=
"build/js/app.bundle.js"
></
script
>
</
body
>
</
html
>
|
1
|
<
ion-app
></
ion-app
>
|
app.html
1
|
<
ion-nav
id
=
"nav"
[root]="rootPage" #content
swipe-back-enabled
=
"false"
></
ion-nav
>
|
1
|
[root]="rootPage"
|
app.js
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
|
import
'es6-shim'
;
import
{App, IonicApp, Platform} from
'ionic-angular'
;
import
{StatusBar} from
'ionic-native'
;
import
{MovieListPage} from
'./pages/movie-list/movie-list'
;
@App({
templateUrl:
'build/app.html'
,
config: {}
})
class
MyApp {
static
get parameters() {
return
[[IonicApp], [Platform]];
}
constructor(app, platform) {
this
.app = app;
this
.platform = platform;
this
.initializeApp();
this
.rootPage = MovieListPage;
}
initializeApp() {
this
.platform.ready().then(() => {
StatusBar.styleDefault();
});
}
}
|
1
2
3
4
|
import
'es6-shim'
;
import
{App, IonicApp, Platform} from
'ionic-angular'
;
import
{StatusBar} from
'ionic-native'
;
import
{MovieListPage} from
'./pages/movie-list/movie-list'
;
|
1
2
3
4
5
6
|
@App({
templateUrl:
'build/app.html'
,
config: {}
})
class
MyApp {
|
1
|
this
.rootPage = MovieListPage;
|
http://www.gajotres.net/ionic-2-tutorial-lets-create-our-first-application/2/
app.core.scss
@import "../pages/movie-list/movie-list";
@import "../pages/movie-info/movie-info";
movie-list.html
<ion-navbar *navbar> <ion-title>Movie List</ion-title> </ion-navbar> <ion-content padding> <ion-list> <ion-header> <ion-item> <ion-input type="text" placeholder="Search a movie..." (input)="searchMovieDB($event, searchKey)"></ion-input> </ion-item> </ion-header> <ion-item *ngFor="#movie of movies" (click)="itemTapped($event, movie)"> <ion-avatar item-left> <img src="https://image.tmdb.org/t/p/w92{{movie.poster_path}}"/> </ion-avatar> <h2>{{movie.original_title}}</h2> <p class="item-description">{{movie.overview}}</p> </ion-item> </ion-list> </ion-content>
<ion-header> <ion-item> <ion-input type="text" placeholder="Search a movie..." (input)="searchMovieDB($event, searchKey)"></ion-input> </ion-item> </ion-header>
(input)="searchMovieDB($event, searchKey)
<ion-item *ngFor="#movie of movies" (click)="itemTapped($event, movie)"> </ion-item>
*ngFor="#movie of movies"
<ion-avatar item-left> <img src="https://image.tmdb.org/t/p/w92{{movie.poster_path}}"/> </ion-avatar> <h2>{{movie.original_title}}</h2> <p class="item-description">{{movie.overview}}</p>
movie-list.js
import {Page, NavController} from 'ionic-angular'; import {MovieService} from '../services/MovieService'; import {MovieInfo} from '../movie-info/movie-info'; @Page({ templateUrl: 'build/pages/movie-list/movie-list.html', providers: [MovieService] }) export class MovieListPage { static get parameters() { return [[NavController], [MovieService]]; } constructor(nav, movieService) { this.nav = nav; this.movieService = movieService; } searchMovieDB(event, key) { if(event.target.value.length > 2) { this.movieService.searchMovies(event.target.value).subscribe( data => {this.movies = data.results; console.log(data);}, err => this.logError(err), () => console.log('Movie Search Complete') ); } } itemTapped(event, movie) { this.nav.push(MovieInfo, { movie: movie }); } }
import {Page, NavController} from 'ionic-angular'; import {MovieService} from '../services/MovieService'; import {MovieInfo} from '../movie-info/movie-info';
@Page({ templateUrl: 'build/pages/movie-list/movie-list.html', providers: [MovieService] })
EXCEPTION: No provider for MovieService! (MovieListPage -> MovieService)
static get parameters() { return [[NavController], [MovieService]]; } constructor(nav, movieService) { this.nav = nav; this.movieService = movieService; }
searchMovieDB(event, key) { if(event.target.value.length > 2) { this.movieService.searchMovies(event.target.value).subscribe( data => {this.movies = data.results; console.log(data);}, err => this.logError(err), () => console.log('Movie Search Complete') ); } }
itemTapped(event, movie) { this.nav.push(MovieInfo, { movie: movie }); }
MovieService.js
import {Http} from 'angular2/http'; import 'rxjs/add/operator/map'; export class MovieService { static get parameters() { return [[Http]]; } constructor(http) { this.http = http } searchMovies(movieName) { var url = 'http://api.themoviedb.org/3/search/movie?query=&query=' + encodeURI(movieName) + '&api_key=5fbddf6b517048e25bc3ac1bbeafb919'; this.response = this.http.get(url).map(res => res.json()); return this.response; } }
import {Http} from 'angular2/http'; import 'rxjs/add/operator/map';
movie-info.js
import {IonicApp, Page, NavController, NavParams} from 'ionic-angular'; @Page({ templateUrl: 'build/pages/movie-info/movie-info.html' }) export class MovieInfo { static get parameters() { return [[IonicApp], [NavController], [NavParams]]; } constructor(app, nav, navParams) { this.nav = nav; this.movie = navParams.get('movie'); console.log(this.movie); } }
this.movie = navParams.get('movie');
movie-info.html
<ion-navbar *navbar> <ion-title>Movie Details</ion-title> </ion-navbar> <ion-content> <div *ngIf="movie" class="selection"> <ion-card> <ion-item> <ion-avatar item-left image-large> <img src="https://image.tmdb.org/t/p/w92{{movie.poster_path}}"/> </ion-avatar> <ion-item-content class="movie-title-data"> <h1>{{movie.title}}</h1> <p>{{movie.release_date}}</p> </ion-item-content> </ion-item> <ion-item> <icon document item-left></icon> <h2>Overview</h2> <p class="item-description">{{movie.overview}}</p> </ion-item> <ion-item> <icon bookmark item-left></icon> <h2>Average Vote</h2> <p>{{movie.vote_average}}</p> </ion-item> </ion-card> </div> </ion-content>
Deployment
ionic build android
ionic run android -l -c -s
Download The Code
What to read next
IONIC 2 | Making REST HTTP Requests Like a ProWho 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.Blogs worth reading
If you're here looking for information related to the Ionic Framework, you will also like these blogs: