ionic2

Ionic 2

Jiayun [email protected]

Introduction

Ionic 2

No Java

No JavaScript

TypeScript & Angular 2

• https://yakovfain.com/2016/01/03/why-java-developers-will-embrace-angular-2-and-typescript/

Install NVM

• https://github.com/creationix/nvm

Install Node.js

• nvm install 6.8.0• nvm use 6.8.0

Install Ionic

• npm install -g ionic• npm install -g cordova

Init Project

• ionic start jcconf2016 --v2• cd jcconf2016• ionic serve• ionic platform add android --save

(=cordova platform …)

edit .gitignore

…

hooks/platforms/plugins/plugins/android.jsonplugins/ios.jsonwww/

…

Clone from Git

• git clone…• cd jcconf2016• npm install• ionic serve• ionic state reset• ionic prepare

Clone from Git

• ionic serve→ www folder

• ionic state reset→ platforms and plugins

• ionic prepare→ platforms/android

Android

• install Android SDK• ionic build android

iOS

• install Xcode• ionic prepare• open

platforms/ios/jcconf2016.xcodeproj

Dev Tools

Project Structure

ionic resources

config

Code Template

theme/variables.scss

// Ionic Variables and Theming. For more info, please see:// http://ionicframework.com/docs/v2/theming/@import "ionic.globals";

// Shared Variables// --------------------------------------------------// To customize the look and feel of this app, you can override// the Sass variables found in Ionic's source scss files.// To view all the possible Ionic variables, see:// http://ionicframework.com/docs/v2/theming/overriding-ionic-variables/

$text-color: #000;$background-color: #fff;

…

app/app.scss

// http://ionicframework.com/docs/v2/theming/

// App Global Sass// --------------------------------------------------// Put style rules here that you want to apply globally. These// styles are for the entire app and not just one component.// Additionally, this file can be also used as an entry point// to import other Sass files to be included in the output CSS.//// Shared Sass variables, which can be used to adjust Ionic's// default Sass variables, belong in "theme/variables.scss".//// To declare rules for a specific mode, create a child rule// for the .md, .ios, or .wp mode classes. The mode class is// automatically applied to the <body> element in the app.

app/app.module.ts

@NgModule({ declarations: [ MyApp, AboutPage, ContactPage, HomePage, TabsPage ], imports: [ IonicModule.forRoot(MyApp) ], bootstrap: [IonicApp], entryComponents: [ MyApp, AboutPage, ContactPage, HomePage, TabsPage ], providers: []})export class AppModule {}

app/app.component.ts

import { Component } from '@angular/core';import { Platform } from 'ionic-angular';import { StatusBar } from 'ionic-native';import { TabsPage } from '../pages/tabs/tabs';

@Component({ template: `<ion-nav [root]="rootPage"></ion-nav>`})export class MyApp { rootPage = TabsPage;

constructor(platform: Platform) { 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(); }); }}

pages/tabs/tabs.ts

import { Component } from '@angular/core';

import { HomePage } from '../home/home';import { AboutPage } from '../about/about';import { ContactPage } from '../contact/contact';

@Component({ templateUrl: 'tabs.html'})export class TabsPage { // this tells the tabs component which Pages // should be each tab's root Page tab1Root: any = HomePage; tab2Root: any = AboutPage; tab3Root: any = ContactPage;

constructor() {

}}

pages/tabs/tabs.html

<ion-tabs> <ion-tab [root]="tab1Root" tabTitle="Home" tabIcon="home"></ion-tab> <ion-tab [root]="tab2Root" tabTitle="About" tabIcon="information-circle"></ion-tab> <ion-tab [root]="tab3Root" tabTitle="Contact" tabIcon="contacts"></ion-tab></ion-tabs

pages/home/home.ts

import { Component } from '@angular/core';

import { NavController } from 'ionic-angular';

@Component({ selector: 'page-home', templateUrl: 'home.html'})export class HomePage {

constructor(public navCtrl: NavController) {

}

}

pages/home/home.html

<ion-header> <ion-navbar> <ion-title>Home</ion-title> </ion-navbar></ion-header>

<ion-content padding> <h2>Welcome to Ionic!</h2> <p> This starter project comes with simple tabs-based layout for apps that are going to primarily use a Tabbed UI. </p> <p> Take a look at the <code>src/pages/</code> directory to add or change tabs, update any existing page or create new pages. </p></ion-content>

pages/home/home.scss

page-home {

}

Coding

services/Cache.ts

export class Cache<T> {

value:T;time:String = new Date().toJSON();

constructor(value:T) {this.value = value;

}}

services/CacheService.ts

import {Storage} from '@ionic/storage';import {Cache} from "./Cache";

export class CacheService {

private storage: Storage;

constructor() { this.storage = new Storage(); }

set<T>(key: string, value: T) { this.storage.set(key, new Cache<T>(value)); }

get<T>(key: string): Promise<Cache<T>> { return this.storage.get(key); }}

app/app.module.ts

import {CacheService} from "../services/CacheService";

@NgModule({ declarations: [ MyApp, AboutPage, ContactPage, HomePage, TabsPage ], imports: [ IonicModule.forRoot(MyApp) ], bootstrap: [IonicApp], entryComponents: [ MyApp, AboutPage, ContactPage, HomePage, TabsPage ], providers: [CacheService]})export class AppModule {}

app/app.component.ts

import {CacheService} from "../services/CacheService";

@Component({template: `<ion-nav [root]="rootPage"></ion-nav>`

})export class MyApp {

rootPage = TabsPage;

constructor(platform: Platform, cacheService: CacheService) {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();

});}

}

forceinit(usewhenneeded)

pages/home/home.ts

import {CacheService} from "../../services/CacheService";

@Component({ selector: 'page-home', templateUrl: 'home.html'})export class HomePage {

constructor(public navCtrl: NavController, cacheService: CacheService) { cacheService.set("TEST", "Hello"); }

}

Backend

• RESTful API• WebSocket• …

UI Components

Plugins

Thanks

ionic2

Technology