Announcement of Ionic 3
Wait, the Ionic 2 has just been launched a few months ago, is not it? Do not worry! Ionic 3 is Ionic 2 with some break changes. Like Angular, which arrives at its 4th version a few days ago, which means that when some updates require structural changes, the number of major versions increases accordingly.
This version comes with support for Angular 4 and an experimental support for Lazy Loading.
More details on the Ionic blog: http://blog.ionic.io/ionic-3-0-has-arrived/
Wait, the Ionic 2 has just been launched a few months ago, is not it? Do not worry! Ionic 3 is Ionic 2 with some break changes. Like Angular, which arrives at its 4th version a few days ago, which means that when some updates require structural changes, the number of major versions increases accordingly.
This version comes with support for Angular 4 and an experimental support for Lazy Loading.
More details on the Ionic blog: http://blog.ionic.io/ionic-3-0-has-arrived/
Create desktop applications with Ionic Split Pane and Grid
Create applications that work on a mobile, tablet, and now desktop application with the new Ionic Split Pane and Grid controls. We are getting closer to our vision of an ionic application running wherever your users are, and these two components are major pieces of this puzzle.
Discover Split Pane and the new Responsive Grid !
The Ionic 3 is still in beta. Before you start, you have to make a checklist.
- Node.js already installed with the command prompt.
- Ionic must be updated with this command.
npm install -g ioni
Create applications that work on a mobile, tablet, and now desktop application with the new Ionic Split Pane and Grid controls. We are getting closer to our vision of an ionic application running wherever your users are, and these two components are major pieces of this puzzle.
Discover Split Pane and the new Responsive Grid !
The Ionic 3 is still in beta. Before you start, you have to make a checklist.
- Node.js already installed with the command prompt.
- Ionic must be updated with this command.
npm install -g ioniCreate an Ionic 3 application
Always like the previous version of Ionic. Type this command to create a new Ionic 3 application.
ionic start ionic3 --v2ionic serve -l
You are going to have an ionic 3 project with 3 tabs: Home, about and contact.
In this project we will try to display a list of countries that exist in this link which displays the data in JSON format: https://restcountries.eu/rest/v2/all
Always like the previous version of Ionic. Type this command to create a new Ionic 3 application.
ionic start ionic3 --v2
This command always uses the prefix "--v2", but do not worry if you check the dependencies in "package.json", you will see the difference.
Now you have to place yourself, with the command prompt, in the folder of your project (ionic3) and run on the browser after typing this command.
ionic serve -l
You are going to have an ionic 3 project with 3 tabs: Home, about and contact.
In this project we will try to display a list of countries that exist in this link which displays the data in JSON format: https://restcountries.eu/rest/v2/all
Ionic 3: connection with a REST web service
First, to be able to access a REST API, we must create a service or a Provider by this command.
ionic g provider rest
You will get a folder provider in which there is a file rest.ts
Open this file and put the following code in this file:
Import { Injectable } from '@ angular / core' ;
Import { Http } from '@ angular / http' ;
Import 'rxjs / add / operator / map' ;
@ Injectable ()
Export class Rest
{
Constructor ( public http : Http )
{
This . Http = http ;
}
GetAll ()
{
Return this . Http . Get ( 'https://restcountries.eu/rest/v2/all' ). Map ( res => res . Json ());
}
}
We need to register "HttpModule" in "app.module.ts", add this import to "app.module.ts".
import { HttpModule } from '@angular/http';
In the @NgModule imports section, add "HttpModule" so that it looks like this.
imports: [
BrowserModule,HttpModule,
IonicModule.forRoot(MyApp)
],
Always in "app.module.ts", save the Provider "Rest" first.
import { Rest } from '../providers/rest';
In the @NgModule providers section, add "Rest".
providers: [
StatusBar,
SplashScreen,
{provide: ErrorHandler, useClass: IonicErrorHandler}, Rest
]
Now it's time to display the list of countries in the Home page. First, we need to change "home.ts" and put this code.
Import { Component } from '@ angular / core' ;
Import { NavController } from 'ionic-angular' ;
Import { Rest } from '../../providers/rest' ;
@ Component ({
Selector: 'page-home' ,
TemplateUrl: 'home.html'
})
Export class HomePage {
Items : string [];
Constructor ( public navCtrl : NavController , public rest : Rest ) {
This . GetPays ();
}
GetPays ()
{
This . Rest . GetAll (). Subscribe ( res => {
This . Items = res ;
});
}
}
Now change the code of the home.html file and put this code:
< Ion-header >
< Ion-navbar >
< Title-title > Home </ ion-title >
</ Ion-navbar >
</ Ion-header >
< Ion-content padding >
< Ion-list >
< Ion-item * ngFor = "let item of items" >
< Ion-avatar item-left >
< Img src = "{{item.flag}}" >
</ Ion-avatar >
< H2 > Country: </ h2 > < h2 > {{item.name}} </ h2 >
< P > Capital: {{item.capital}}, Region: {{item.region}} </ p >
</ Ion-item >
</ Ion-list >
</ Ion-content >
First, to be able to access a REST API, we must create a service or a Provider by this command.
ionic g provider restOpen this file and put the following code in this file:
We need to register "HttpModule" in "app.module.ts", add this import to "app.module.ts".Import { Injectable } from '@ angular / core' ;Import { Http } from '@ angular / http' ;Import 'rxjs / add / operator / map' ;@ Injectable ()Export class Rest{Constructor ( public http : Http ){This . Http = http ;}GetAll (){Return this . Http . Get ( 'https://restcountries.eu/rest/v2/all' ). Map ( res => res . Json ());}}
import { HttpModule } from '@angular/http';imports: [
BrowserModule,HttpModule,
IonicModule.forRoot(MyApp)
],import { Rest } from '../providers/rest';providers: [
StatusBar,
SplashScreen,
{provide: ErrorHandler, useClass: IonicErrorHandler}, Rest
]
Import { Component } from '@ angular / core' ;
Import { NavController } from 'ionic-angular' ;
Import { Rest } from '../../providers/rest' ;
@ Component ({
Selector: 'page-home' ,
TemplateUrl: 'home.html'
})
Export class HomePage {
Items : string [];
Constructor ( public navCtrl : NavController , public rest : Rest ) {
This . GetPays ();
}
GetPays ()
{
This . Rest . GetAll (). Subscribe ( res => {
This . Items = res ;
});
}
}
< Ion-header >
< Ion-navbar >
< Title-title > Home </ ion-title >
</ Ion-navbar >
</ Ion-header >
< Ion-content padding >
< Ion-list >
< Ion-item * ngFor = "let item of items" >
< Ion-avatar item-left >
< Img src = "{{item.flag}}" >
</ Ion-avatar >
< H2 > Country: </ h2 > < h2 > {{item.name}} </ h2 >
< P > Capital: {{item.capital}}, Region: {{item.region}} </ p >
</ Ion-item >
</ Ion-list >
</ Ion-content >
