ionic2
TRANSCRIPT
Init Project
• ionic start jcconf2016 --v2• cd jcconf2016• ionic serve• ionic platform add android --save
(=cordova platform …)
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
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>
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"); }
}