Successfully reported this slideshow.
We use your LinkedIn profile and activity data to personalize ads and to show you more relevant ads. You can change your ad preferences anytime.

Ionic2

2,675 views

Published on

Ionic2

Published in: Technology
  • Be the first to comment

Ionic2

  1. 1. Ionic 2 Jiayun Zhou jiayun@gmail.com
  2. 2. Introduction
  3. 3. Ionic
  4. 4. Ionic 2
  5. 5. No Java
  6. 6. No JavaScript
  7. 7. TypeScript & Angular 2
  8. 8. • https://yakovfain.com/2016/01/03/why-java-developers-will-embrace-angular-2-and- typescript/
  9. 9. Setup
  10. 10. Install NVM • https://github.com/creationix /nvm
  11. 11. Install Node.js • nvm install 6.8.0 • nvm use 6.8.0
  12. 12. Install Ionic • npm install -g ionic • npm install -g cordova
  13. 13. Init Project • ionic start jcconf2016 --v2 • cd jcconf2016 • ionic serve • ionic platform add android --save (=cordova platform …)
  14. 14. edit .gitignore … hooks/ platforms/ plugins/ plugins/android.json plugins/ios.json www/ …
  15. 15. Clone from Git • git clone… • cd jcconf2016 • npm install • ionic serve • ionic state reset • ionic prepare
  16. 16. Clone from Git • ionic serve → www folder • ionic state reset → platforms and plugins • ionic prepare → platforms/android
  17. 17. Build
  18. 18. Android • install Android SDK • ionic build android
  19. 19. Android • install Android SDK • ionic build android
  20. 20. iOS • install Xcode • ionic prepare • open platforms/ios/jcconf2016.xco deproj
  21. 21. Dev Tools
  22. 22. Project Structure
  23. 23. hooks
  24. 24. ionic resources
  25. 25. www
  26. 26. config
  27. 27. src
  28. 28. Code Template
  29. 29. 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; …
  30. 30. 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.
  31. 31. 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 {}
  32. 32. 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(); }); } }
  33. 33. 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() { } }
  34. 34. 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
  35. 35. 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) { } }
  36. 36. 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>
  37. 37. pages/home/home.scss page-home { }
  38. 38. Coding
  39. 39. services/Cache.ts export class Cache<T> { value:T; time:String = new Date().toJSON(); constructor(value:T) { this.value = value; } }
  40. 40. 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); } }
  41. 41. 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 {}
  42. 42. 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(); }); } } force init (use when needed)
  43. 43. 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"); } }
  44. 44. Backend • RESTful API • WebSocket • …
  45. 45. UI Components
  46. 46. Plugins
  47. 47. Misc.
  48. 48. Thanks

×