Ionic 2 | Tutorial | Let’s Create Our First Application
来源:互联网 发布:dva防御矩阵原理 编辑:程序博客网 时间:2024/05/16 18:13
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 aMaster-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 tohelp you, I expect the same from you. Feel free to comment below, subscribe to my blog, mail me todragan.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. UsePlunker for AngularJS based questions orjsFiddle 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. UsePlunker for AngularJS based questions orjsFiddle 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
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
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 aprofessional mobile development adviser. I'm also a major jQuery Mobilesupporter back at StackOverflow and aforum 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: 0 0
- Ionic 2 | Tutorial | Let’s Create Our First Application
- GNUStep:create our first gui application
- Struts 2 Tutorial: Create Struts 2 Application in Eclipse
- 2 our first React Component
- Ionic 2 Tutorial
- First touch of Ionic 2
- 生命诚可贵,独立价最高——Let's follow our heart!
- hdu - 4304 - Let's Hit Our Head! 莫名奇妙的数论
- Tutorial 1 Create a Simple web dynpro application
- ROS_launch("let's create a launch file called turtlemimic.launch")
- Spring's WebSphereUowTransactionManager & 'application class loader first'
- My First Cloud Application's Design
- 2 Your first Netty application
- OpenGL Tutorial 2 : The first triangle
- 教程 1:让我们通过例子来学习(Tutorial 1: Let’s learn by example)
- 关于File's Owner, First Responder, Application Delegate的解释
- LET'S BUILD A COMPILER!(2)
- HDU_1824 Let's go home 2-Sat
- 矩阵快速幂
- java工具类去掉字符串String中的.点。android开发java程序员常用工具类
- javascript类学习(一)——构造器与原型链实现简单的继承
- DEDECMS后台Sitemap模板
- android的ColorStateList简单使用
- Ionic 2 | Tutorial | Let’s Create Our First Application
- Swift开篇003->控制流、函数
- Android activity的生命周期
- opencamera相机开发
- Android官方MVP架构解读
- js 自定义弹出框
- Glide 详解
- JS实现字体逐个显示
- 史上最全的“大数据”学习资源整理