Download as PDF, PPTX
![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 {}](https://image.slidesharecdn.com/ionic2jcconf2016-161015075137/75/Ionic2-45-2048.jpg)
![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();
});
}
}](https://image.slidesharecdn.com/ionic2jcconf2016-161015075137/75/Ionic2-46-2048.jpg)
![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](https://image.slidesharecdn.com/ionic2jcconf2016-161015075137/75/Ionic2-48-2048.jpg)
![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 {}](https://image.slidesharecdn.com/ionic2jcconf2016-161015075137/75/Ionic2-55-2048.jpg)
![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)](https://image.slidesharecdn.com/ionic2jcconf2016-161015075137/75/Ionic2-56-2048.jpg)
More Related Content
![[DevFest Strasbourg 2025] - NodeJs Can do that !!](https://cdn.slidesharecdn.com/ss_thumbnails/devfeststrasbourg2025-nodejscandothat-251127142731-da65b6fd-thumbnail.jpg?width=640&height=640&fit=bounds)
![[BDD 2025 - Artificial Intelligence] AI for the Underdogs: Innovation for Sma...](https://cdn.slidesharecdn.com/ss_thumbnails/ai-aifortheunderdogsinnovationforsmallbusinesses-251124030839-72a599a4-thumbnail.jpg?width=640&height=640&fit=bounds)
![Support, Monitoring, Continuous Improvement & Scaling Agentic Automation [3/3]](https://cdn.slidesharecdn.com/ss_thumbnails/agenticcommunityseries-day3-cfd-251120170304-ddef8112-thumbnail.jpg?width=640&height=640&fit=bounds)
Ionic2
- 1.
- 2.
- 3.
- 6.
- 9.
- 10.
- 11.
- 12.
- 13.
- 14.
- 15. Install Node.js • nvminstall 6.8.0 • nvm use 6.8.0
- 16. Install Ionic • npminstall -g ionic • npm install -g cordova
- 17. Init Project • ionicstart jcconf2016 --v2 • cd jcconf2016 • ionic serve • ionic platform add android --save (=cordova platform …)
- 18.
- 20. Clone from Git •git clone… • cd jcconf2016 • npm install • ionic serve • ionic state reset • ionic prepare
- 21. Clone from Git •ionic serve → www folder • ionic state reset → platforms and plugins • ionic prepare → platforms/android
- 23.
- 24. Android • install AndroidSDK • ionic build android
- 25. Android • install AndroidSDK • ionic build android
- 26. iOS • install Xcode •ionic prepare • open platforms/ios/jcconf2016.xco deproj
- 30.
- 35.
- 37.
- 38.
- 39.
- 40.
- 41.
- 42.
- 43. theme/variables.scss // Ionic Variablesand 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; …
- 44. app/app.scss // http://ionicframework.com/docs/v2/theming/ // AppGlobal 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.
- 45. 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 {}
- 46. 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(); }); } }
- 47. 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() { } }
- 48. 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
- 49. 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) { } }
- 50. pages/home/home.html <ion-header> <ion-navbar> <ion-title>Home</ion-title> </ion-navbar> </ion-header> <ion-content padding> <h2>Welcome toIonic!</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>
- 51.
- 52.
- 53. services/Cache.ts export class Cache<T>{ value:T; time:String = new Date().toJSON(); constructor(value:T) { this.value = value; } }
- 54. 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); } }
- 55. 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 {}
- 56. 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)
- 57. 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"); } }
- 59. Backend • RESTful API •WebSocket • …
- 60.
- 63.
- 66.
- 71.