This document discusses Ionic 2, a hybrid mobile app framework built on AngularJS. It provides an overview of what Ionic is, why developers should use Ionic 2, and how some features work differently in Ionic 2 compared to previous versions. These include generating pages, routing, accessing native device APIs, and getting help resources. The document aims to help developers get started with building hybrid mobile apps using Ionic 2.

1. IONIC 2 - THE JOURNEY
CONTINUES..

2. ruby developersameera (sam)

3. REINTERACTIVE

4. WHAT IS A HYBRID MOBILE APP?
Mobile apps build with web technologies like HTML, CSS,
and JavaScript

5. WHAT IS A IONIC
Hybrid mobile framework build on top of AngularJS
http://ionicframework.com/

6. WHY IONIC 2 ?

7. 2.0.0-BETA.1
OK, LETS START...
disclaimer
https://github.com/driftyco/ionic/tree/2.0

8. npm install -g ionic@beta
ionic start demoProject blank --v2 --ts
CREATING A NEW PROJECT

9. ionic generate page search
ionic generate --list
GENERATORS

10. support native look and feel
LOOK & FEEL
app.variables.scss
app.core.scss
app.ios.scss / app.md.scss
home.scss

11. ionic serve -l
HOW TO CHECK

12. #ionic1
var app = angular.module('ionicApp', ['ionic'])
app.config(function($stateProvider, $urlRouterProvider) {
$urlRouterProvider.otherwise('/')
$stateProvider.state('home', {
url: '/',
template: '<p>Hello, world!</p>'
})
})
ROUTING
no more $urlRouterProvider
no more urls

13. #ionic 2
export class StartPage {
constructor(nav: NavController) {
this.nav = nav;
}
goBack(){
this.nav.pop();
}
goToOtherPage(){
//push another page onto the history stack
//causing the nav controller to animate the new page in
this.nav.push(OtherPage);
}
ROUTING WITH IONIC2
Using NavController
uses basic push() and pop()

14. No more
ACCESSING NATIVE API
ngcordova.com
plugins will support as a first class citizen in ionic2

15. ..so it will be like..
#https://github.com/marcusasplund/ionic2-camera-demo/blob/master/app/pages/
takePhoto() {
this.platform.ready().then(() => {
let options = {
quality: 80,
destinationType: Camera.DestinationType.DATA_URL,
sourceType: Camera.PictureSourceType.CAMERA,
allowEdit: false,
encodingType: Camera.EncodingType.JPEG,
saveToPhotoAlbum: false
};
// https://github.com/apache/cordova-plugin-camera#module_camera.getPic
navigator.camera.getPicture(
(data) => {
let imagedata = "data:image/jpeg;base64," + data;
this._zone.run(()=> this.images.unshift({

16. but.. for now.. (ionic 2 beta.1)
#https://blog.nraboy.com/2016/01/show-native-toast-notifications-in-an-ionic-
import {Page, Platform} from 'ionic/ionic';
@Page({
templateUrl: 'build/pages/home/home.html',
})
export class HomePage {
constructor(platform: Platform) {
this.platform = platform;
}
showToast(message, position) {
this.platform.ready().then(() => {
window.plugins.toast.show(message, "short", position);
});

17. WHERE TO GET HELP
40+ Ionic Framework 2 Resources (http://mcgivery.com/15-
ionic-framework-2-resources/)
http://ionicframework.com/docs/v2/
https://forum.ionicframework.com
http://www.joshmorony.com/
https://blog.nraboy.com
http://gonehybrid.com/
https://www.packtpub.com *

18. THANK YOU
QUESTIONS ?