Ionic 2 - Hybridapps auf Steroiden

Ionic 2
HYBRID APPS AUF STEROIDEN

Inhalte
Projektumgebung
- Build
- Debugging
- Testautomatisierung
- Externe Bibliotheken nutzen
Vorgehen
- Bottom Up
- Test First
- Top Down
Ionic Services
- Welche Dienste?
- Wie eingesetzt?
- Wie tragfähig?
Ionic
- Projektstruktur
- Wichtige Komponenten
- Client Server
Kommunikation
- Promises
- Lifecycle Hooks
- Navigation
- Tabs
- Modals
- Formulare
- Toasts
- Locale Storage
- Plugins

Szenario
Search Favorites About
Details
Tabs
Input

Webstorm (€) Visual Studio Code Visual Studio (€) Atom Chrome

1. npm installieren: nodejs.org/en/download/
2. npm install –g cordova
3. npm install –g ionic
4. npm install –g typings

npm --version Version con NPM abrufen
npm help {befehl} Ruft die Hilfe für den entsprechenden Befehl auf
npm install [-g] {Paketname} Installiert das Paket im aktuellen Projekt bzw. global
npm install {Paketname}@{Version} Installiert das Paket mit der entsprechenden Version in das aktuelle Projekt.
--save Das Paket wird in die Liste der Abhängigkeiten des Projekts eingetragen
--save-dev
Das Paket wird in die Liste der Abhängigkeiten des Projekts eingetragen die zur
Entwicklungszeit gelten.
--force Das Paket wird installiert selbst wenn es schon vorhanden ist.
npm list Zeigt alle installierten Pakete im aktuellen Projekt an.
npm view {Paketname} Ruft diverse Informationen zum angegebenen Paket ab.
npm view {Paketname} {Detailbezeichnung} Ruft nur die Detailinformationen ab (bspw. Versions)
npm update
Aktualisiert alle Pakete des aktuellen Projekts die als Abhängigkeiten gespeichert
wurden.
npm update [-g] {Paketname}[@{Version}]
Aktualisiert das gegebene Paket ggf. auf eine bestimmte Version oder auf die
neuste.
npm uninstall {Paketname} Deinstalliert das angegebene Paket.
--save Entfernt das Paket aus den Projektabhängigkeiten.
--save-dev Entfernt das Paket aus den Projektabhängigkeiten für die Entwicklungszeit.
Die wichtigsten Befehle für NPM im Kontext von Ionic

ionic start {AppName} blank --v2 Leeres Projekt für Ionic 2 erstellen.
ionic start {AppName} tabs Projekt mit Tab Template für Ionic 1 erstellen.
ionic start {AppName} sidemenu Projekt mit Sidemenu Template für Ionic 1 erstellen.
ionic platform add android/ios Android bzw. iOs als Plattform hinzufügen.
ionic platform list Zeigt alle installierten Plattformen an.
Ionic platform remove {platform} Entfern die angegebene Plattform.
ionic build android/ios Plattform bauen.
ionic emulate android/ios Plattformversion im Emulator starten.
ionic run android/ios Plattformversion auf Gerät starten.
ionic serve
--lab
--consolelogs |-c
--serverlogs |-s
App im Browser ausführen.
App im Browser mit Ansichten für iOS und Android ausführen.
Ausgabe des Consolen loggings in der CLI.
Server Logs in der CLI ausgeben.
ionic login Bei den Ionic Services anmelden.
ionic upload Die aktuelle App in die Ionic Cloud hochladen.
ionic share Die aktuelle App über die Ionic Cloud mit anderen Personen teilen.
ionic --help Auflistung und Erläuterung aller CLI Befehle.
cordova clean Entfernt alle
Die wichtigsten Befehle für Ionic und Cordova

cd {app name}
ionic serve --lab

Jede Seite erhält ein Verzeichnis mit:
- Darstellung .html
- Styles .scss
- Logik .ts

Applikationsweite Einstellungen können plattformspezifisch konfiguriert werden.

Das Bootstrapping wird an zentraler Stelle verwaltet und beim Programmstart eingeleitet.

Cordova plugins werden zentral gespeichert und direkt über Ionic verwendet.
Es gibt kein ngCordova!

Cordova Plugins u.ä. werden über Hooks in die Applikation eingebunden.
Dies geschieht weitestgehend automatisch.

Ionic speichert alle wichtigen Bibliotheken und Frameworks zunächst
im node_modues Verzeichnis.
Zusätzliche Pakete sollten IMMER über NPM installiert werden damit
der Buildprozess korrekt fuktioniert!

Splash screens und App Icons können für jedes plattform gesondert
angegeben werden.
Sie werden über die CLI aus einer Vorlage heraus generiert.

Type Script 1.x benötigt Typeings um Javascript Frameworks ansprechen zu können.
Diese sind separat mit jedem Framework herunter zu laden.

Die eigentliche App wird nach einem ionic build im www Verzeichnis zur Verfügung gestellt.
Im www Verzeichnis sollte nicht entwickelt werden!!!

Konfiguration aller wichtigen Umgebungsparameter der App (Version, App Package, API Version, …)
Konfiguration des Buildprozesses
Konfiguration der Ionic Parameter (welche Ionic Version, wird typscript verwendet, …)
NPM und Cordova Config (welche Pakete werden verwendet, Plattformen addressiert, Plugins verwendet)
Konfiguration des Typescript Transpilings (in welche JS Version, welche Dateien, wo liegen die Typings)
Konfiguration des Linters zur statischen Codeanalyse
Registrierung der eigentlichen Typings

<?xml version="1.0" encoding="UTF-8"?>
<widget xmlns="http://www.w3.org/ns/widgets" xmlns:cdv="http://cordova.apache.org/ns/1.0" id="de.MovieManiaProductions.MoviewMania" version="1.0.0">
<name>movieMania</name>
<description>An Ionic Framework and Cordova project.</description>
<author email="hi@ionicframework" href="http://ionicframework.com/">Ionic Framework Team</author>
<content src="index.html" />
<access origin="*" />
<allow-intent href="http://*/*" />
<allow-intent href="https://*/*" />
<allow-intent href="tel:*" />
<allow-intent href="sms:*" />
<allow-intent href="mailto:*" />
<allow-intent href="geo:*" />
<platform name="android">
<allow-intent href="market:*" />
</platform>
<platform name="ios">
<allow-intent href="itms:*" />
<allow-intent href="itms-apps:*" />
</platform>
<preference name="webviewbounce" value="false" />
<preference name="UIWebViewBounce" value="false" />
<preference name="DisallowOverscroll" value="true" />
…
<feature name="StatusBar">
<param name="ios-package" onload="true" value="CDVStatusBar" />
</feature>
<plugin name="cordova-plugin-device" spec="~1.1.3" />
<plugin name="cordova-plugin-console" spec="~1.0.4" />
…
</widget>
Package ID darf sich zukünftig nicht mehr ändern!!!
Entspricht der Version im Store!

npm install karma --save-dev
npm install -g karma-cli
karma init karma.conf.js

1. Ersetze karma.conf.js durch: https://github.com/HerrLoesch/IonicWorkshop/blob/master/karma.conf.js
2. Füge folgende Abhänigkeiten in der package.json hinzu: "jasmine-core": "^2.4.1",
"karma": "^0.13.22",
"karma-chrome-launcher": "^1.0.1",
"karma-jasmine": "^1.0.2",
"run-sequence": "1.1.5",
"karma-browserify": "5.0.5",
"browserify": "13.0.0",
"browserify-istanbul": "2.0.0",
"tsify": "0.16.0",
"isparta": "4.0.0"
"scripts": {
"test": "karma start karma.conf.js --
browsers=Chrome --single-run=false --debug"
},
3. Ergänze folgendes Script in package.json:

Komponente erzeugen mit der wir die Daten auslesen:
ionic g provider Movies

import {beforeEachProviders, it, describe, expect, inject} from '@angular/core/testing';
import {Movies} from './movies';
describe('movie services', () => {
it('should return true', () => {
expect(true).toBeTruthy();
});
});
1. Füge neue Datei hinzu movies.spec.ts
2. Schreibe folgenden Inhalt in die Datei:
3. npm test
-> Test sollte erfolgreich sein
4. Ändere im test expect(true) zu expect(false)
-> Test sollte fehlschlagen

npm install karma-htmlfile-reporter --save-dev
karma.conf.js erweitern:
module.exports = function(config) {
config.set({
reporters: ['progress', 'html'],
htmlReporter: {
outputFile: 'test/results.html',
// Optional
pageTitle: ‚Moview Mania',
subPageTitle: 'Test results',
groupSuites: true,
useCompactStyle: true,
useLegacyStyle: true
}
});
};
Html Report

Debuggen mit Chrome
npm test
F12
ts Datei wählen
Break Point setzen
F5

Beispiel lodash
npm install -g typings
npm install lodash --save
typings install lodash –save
import {[Funktionen die verwendet werden]} from 'lodash';
Überall wo es verwendet wird

Die Suche
Test First & Bottom Up
Details
Tabs
Input

import {beforeEachProviders, it, describe, expect, inject} from '@angular/core/testing';
import {Movies} from './movies';
import {includes, find} from 'lodash';
describe('movie search', () => {
beforeEachProviders(() => [Movies]);
it('should return an array of movies for the search text lo', inject([Movies], (movieRepository) =>{
var movies = movieRepository.search("lo");
expect(Array.isArray(movies)).toBeTruthy;
expect(movies.length).toBeGreaterThan(0);
}));
[2. Test]
});
Der 1. Test

Der (Fake)Provider + Domain Object
import { Injectable } from '@angular/core';
import 'rxjs/add/operator/map';
@Injectable()
export class Movies {
constructor() {}
public search(searchText: string) {
let data = new Array();
let movie = {};
movie.Title = "olo";
data.push(movie);
return data;
}
}
export class Movie {
public Title : string;
public Year : number;
public imdbID: string;
public Type: string;
public Poster: string;
}
Beispiel: http://www.omdbapi.com/?s=lo
{
"Title":"The Hi-Lo Country",
"Year":"1998",
"imdbID":"tt0120699",
"Type":"movie",
"Poster":"https://images-na.ssl-images-...
},

Quelle: http://www.joshmorony.com/an-in-depth-explanation-of-providers-in-ionic-2/
Was ist ein Provider

Der echte Provider
import { Injectable } from '@angular/core';
import { Http } from '@angular/http';
@Injectable()
export class Movies {
constructor(private http: Http) {}
public search(searchText: string) {
return new Promise(resolve => {
let url = 'http://www.omdbapi.com/?s=' + searchText;
console.log('start searching:' + url);
this.http.get(url)
.map(result => result.json())
.subscribe(data => resolve(data.Search));
});
}
}

it('should return movies which titles contain the text lo', inject([Movies], (movieRepository) => {
var movies = movieRepository.search("lo");
var foundSearchPhrase = find(movies, function(movie) {
var missmatchFound = !includes(movie.Title, 'lo');
return missmatchFound;
});
expect(movies.length).toBeGreaterThan(0);
expect(foundSearchPhrase).toBeFalsy("Found at least one element which does not contain lo.");
}));
Der 2. Test

ionic g page Search
Die Search Page – noch ohne Suche (1)
View:
<ion-header>
<ion-navbar>
<ion-title>Search</ion-title>
</ion-navbar>
</ion-header>
<ion-content padding>
<ion-list >
<ion-item *ngFor="let movie of movies">
{{movie.Title}}
</ion-item>
</ion-list>
</ion-content>
Logik:
import { Component } from '@angular/core';
import { Movies } from '../../providers/movies/movies';
@Component({
templateUrl: 'build/pages/search/search.html',
providers: [Movies]
})
export class SearchPage {
public movies: any;
constructor(private movieRepository: Movies) {
this.movieRepository.search("lo").then(data => {
this.movies = data;
});
}}

import { ionicBootstrap, Platform } from 'ionic-angular';
import { StatusBar } from 'ionic-native';
import { SearchPage } from './pages/Search/Search';
@Component({
template: '<ion-nav [root]="rootPage"></ion-nav>‚
})
export class MyApp {
rootPage: any = SearchPage;
constructor(public platform: Platform) {
platform.ready().then(() => {
StatusBar.styleDefault();
});
}}
ionicBootstrap(MyApp);
app.ts anpassen

ionic serve

Die Search Page – mit On-Input Suche
<ion-header>
…
</ion-header>
<ion-searchbar name="searchBar"
[(ngModel)]="searchText"
(ionInput)="onSearchInput($event)" >

</ion-searchbar>
<ion-list >
{{movie.Title}}
</ion-item>
</ion-list>
</ion-content>
public movies: any;
public searchText: string;
public onSearchInput() {
this.search(this.searchText);
}
constructor(private movieRepository: Movies) { }
private search(text: string){
this.movieRepository.search(text)
.then(data => this.movies = data)
.catch(error => console.log(error));
}
}

Binding Typen
<ion-header>
…
</ion-header>
<ion-searchbar name="searchBar"
[(ngModel)]="searchText"
[showCancelButton]="shouldShowCancel"
(ionInput)="onSearchInput($event)"
(ionCancel)="onCancel($event)">
</ion-searchbar>
<ion-list >
{{movie.Title}}
</ion-item>
</ion-list>
</ion-content>
One Way Binding
Interpolation
Event Binding
One Way Binding

Die Search Page mit Thumbnails
…
<ion-list>
<ion-thumbnail item-left>
<img *ngIf="movie.Poster !== 'N/A'" src="{{movie.Poster}}">
</ion-thumbnail>
<h2>{{movie.Title}}</h2>
<p>{{movie.Year}}</p>
<p>{{movie.Type}}</p>
</ion-item>
</ion-list>
</ion-content>

Die Search Page mit Thumbnails und Sliding
…
<ion-list>
<ion-item-sliding *ngFor="let movie of movies">
<ion-item>
…
</ion-item>
<ion-item-options side="right">
<button primary>
<ion-icon ios="ios-star" md="md-star"></ion-icon>
</button>
</ion-item-options >
</ion-item-sliding>
</ion-list>
</ion-content>

Die Detailansicht
Top Down entwickeln
Details
Tabs
Input

ionic g page Details
Die Details Page Styling (1)
Logik:
@Component({
templateUrl: 'build/pages/details/details.html',
})
export class DetailsPage {
public movie: any;
constructor() {
this.movie = {
"Title": "Lo",
"Year": "2009",
"Rated": "N/A",
"Released": "24 Oct 2009",
"Runtime": "80 min",
…
}
}
}
App.ts
…
rootPage: any = DetailsPage;
});
}
}
…

Die Details Page Styling (2)
<ion-card>
<ion-card-content>
<p>{{movie.Plot}}</p>
</ion-card-content>
<ion-row>
<ion-col>
<ion-badge>
<ion-icon name="star-half">{{movie.imdbRating}}</ion-icon>
</ion-badge>
</ion-col>
<ion-col>
<ion-badge>
<ion-icon name="text"> {{movie.imdbVotes}}</ion-icon>
</ion-badge>
</ion-col>
</ion-row>
</ion-card>
</ion-content>

Die Details Page Daten
Provider
public getMovie(imdbID: string) {
return new Promise(resolve => {
let url = 'http://www.omdbapi.com/?i=' + imdbID;
console.log('start getting movie:' + url);
this.http.get(url)
.map(result => result.json())
.subscribe(data => resolve(data));
});
}
Logik
@Component({
providers: [Movies]
})
export class DetailsPage {
public movie: any = {};
constructor(private movieRepository: Movies) {
this.setMovie("tt1047490");
}
private setMovie(imdbId: string){
this.movieRepository.getMovie(imdbId)
.then(data => this.movie = data );
}
}

Die Details Page Daten mit OnInit import { Component, OnInit } from '@angular/core';
@Component({
providers: [Movies]
})
export class DetailsPage implements OnInit {
constructor(private movieRepository: Movies) { }
ngOnInit() { this.setMovie("tt1047490"); }
private setMovie(imdbId: string){
…
}
}
Quelle: https://angular.io/docs/ts/latest/guide/lifecycle-hooks.html

Die Navigation per Navigation Controller
Details
Tabs
Input

Navigation & Parameterübergabe programmatisch
View
…
<ion-list>
<ion-item-sliding *ngFor="let movie of movies">
<button ion-item (click)="showDetails(movie.imdbID)">
</ion-thumbnail>
</button>
<button primary>
</button>
</ion-item-options>
</ion-item-sliding>
</ion-list>
…
Logik
…
import { NavController } from 'ionic-angular';
import { DetailsPage } from '../details/details';
@Component({
providers: [Movies]
})
public showDetails(imdbID: string) {
this.navCtrl.push(DetailsPage, {"id": imdbID);
}
constructor(private movieRepository: Movies,
public navCtrl: NavController) {
}
…

Ergebnis der Anpassung der Suche

Navigation & Parameterübergabe deklarativ
<button ion-item [navPush]="detailsPage" [navParams]="movie" >
</ion-thumbnail>
</button>

Navigationsparameter abrufen
import { Component, OnInit } from '@angular/core';
import { NavParams } from 'ionic-angular';
@Component({
providers: [Movies]
})
export class DetailsPage implements OnInit{
constructor(private movieRepository: Movies, private params: NavParams) { }
ngOnInit()
{
this.setMovie(this.params.get("id"));
}
…

Zurück navigieren
Logik
…
@Component({
providers: [Movies]
})
public goBack() {
this.navCtrl.pop();
}
constructor(private movieRepository: Movies,
public navCtrl: NavController) {
}
…
<ion-navbar>…</ion-navbar>

Navigation ohne Stack
import { App, ViewChild } from '@angular/core';
@App({
template: '<ion-nav #myNav [root]="rootPage"></ion-nav>'
})
@ViewChild('myNav') nav: NavController
private rootPage = TabsPage;
// Wait for the components in MyApp's template to be initialized
// In this case, we are waiting for the Nav with id="my-nav"
ngAfterViewInit() {
// Let's navigate from TabsPage to Page1
this.nav.push(Page1);
}
}

Favorites Page
ionic g page Favorites
<ion-header>
<ion-navbar>
<ion-title>Favorites</ion-title>
</ion-navbar>
</ion-header>
Hier finden sich irgend wann einmal die beliebtesten Filme des Nutzers.
</ion-content>

Die Tabs
Details
Tabs
Input

About Page
ionic g page About
<ion-header>
<ion-navbar>
<ion-title>About</ion-title>
</ion-navbar>
</ion-header>
<p>Diese App wurde von Hendrik Lösch gebaut...</p>
<p> Alle Quellen finden sich <a href="https://github.com/HerrLoesch/MoviewMania">hier</a></p>
</ion-content>

Die Tabs
App.html
<ion-tabs selectedIndex="1">
<ion-tab tabTitle="Search" tabIcon="search" [root]="searchRoot"></ion-tab>
<ion-tab tabTitle="Favorites" tabIcon="star" [root]="favoritesRoot" tabBadge="5" tabBadgeStyle="danger"></ion-tab>
<ion-tab tabTitle="About" tabIcon="information" [root]="aboutRoot"></ion-tab>
</ion-tabs>

Anpassung der App.ts
App.ts
import { SearchPage } from './pages/Search/Search';
import { FavoritesPage } from './pages/favorites/favorites';
import { AboutPage } from './pages/about/about';
@Component({
templateUrl: 'build/app.html'
})
searchRoot = SearchPage;
favoritesRoot = FavoritesPage;
aboutRoot = AboutPage;
});
}
}
ionicBootstrap(MyApp);

Modals
Details
Tabs
Input

Anpassungen an der Suche
View:
<button primary (click)="addFavorite(movie)">
</button>
</ion-item-options>
Logik:
import { NavController, ModalController } from 'ionic-angular';
import { FavoriteInput } from '../favorite-input/favorite-input';
@Component({
templateUrl: 'search.html',
providers: [Movies]
})
constructor(... private modalCtrl: ModalController) {
}
public addFavorite(movie: any){
console.log("start adding favorite:");
console.log(movie);
let modal = this.modalCtrl.create(FavoriteInput, movie);
modal.present();
}
…

Die Eingabemaske
<ion-header>
<ion-toolbar>
<ion-title>
Add Favorite
</ion-title>
<ion-buttons start>
<button ion-button (click)="dismiss()">
<span color="primary" showWhen="ios">Cancel</span>
<ion-icon name="md-close" showWhen="android,windows"></ion-icon>
</button>
</ion-buttons>
</ion-toolbar>
</ion-header>
<h2>{{title}}</h2>
<p>{{year}}</p>
<ion-item>
<ion-textarea placeholder="comments" rows="5"></ion-textarea>
</ion-item>
<button (click)="save()" ion-button full>Save</button>
</ion-content>

Die Logik
import { Component, OnInit } from '@angular/core';
import { NavParams, ViewController } from 'ionic-angular';
@Component({
selector: 'page-favorite-input',
templateUrl: 'favorite-input.html'
})
export class FavoriteInput implements OnInit {
title:string;
year:string;
ngOnInit() {
this.title = this.params.get("Title");
this.year = this.params.get("Year");
}
constructor(private params: NavParams, private viewController: ViewController) {}
public dismiss() { this.viewController.dismiss(); }
public save(){ }
}
Geht nicht für komplexe Datentypen

Forms mit FormBuilder
Details
Tabs
Input
?

View:
<form (ngSubmit)="save()" [formGroup]="formData">
<ion-item>
<ion-textarea placeholder="comments"rows="5"
formControlName="comments"></ion-textarea>
</ion-item>
<button type="submit"
[disabled]="!formData.valid"
ion-button full>Save</button>
</form>
Anpassungen an Favorite Input
Logik:
import {Validators, FormBuilder, FormGroup } from '@angular/for
...
formData: FormGroup;
constructor(... private formBuilder: FormBuilder) {
this.formData = this.formBuilder.group(
{comments: ['', Validators.minLength(5)]});
}
public save(){
let favorite = {
"comments": this.formData.value.comments,
"imdbID": this.params.get("imdbID")
};
this.viewController.dismiss();
}

Native Storage & Plugins
Why?
This plugin is created because of the non-persistent property of LocalStorage in the WebView of
Android and iOS. In iOS stored data from LocalStorage can be removed by the OS, when running out of
memory.
When to use the plugin
•Simple: Uniform and convenient way of organizing, storing, and accessing the data
•Fast: Less than 1 milisecond to save or retrieve an object (in general)
•Persistence: Save data over multiple sessions, i.e. holds the data till the application is
removed from the device
•Small data: Store small amounts of persistent data (less than a few hundred kilobytes)
• It is possible to store more than a few megabytes, but that's not the intended usage of
the plugin.
Quelle: https://github.com/TheCocoaProject/cordova-plugin-nativestorage

Plugin hinzufügen
npm install –g cordova
ionic plugin add cordova-plugin-nativestorage
ionic g provider store
Nur falls Cordova noch nicht installiert ist.
Fügt es nur der config.xml aber nicht
package.json hinzu!!!
"cordovaPlugins": [
"cordova-plugin-whitelist",
"cordova-plugin-console",
"cordova-plugin-statusbar",
"cordova-plugin-device",
"cordova-plugin-splashscreen",
"ionic-plugin-keyboard",
"cordova-plugin-nativestorage"
],

Provider erzeugen
ionic g provider favoriteStore
import { Injectable, OnInit, OnDestroy } from '@angular/core';
import { NativeStorage } from 'ionic-native';
@Injectable()
export class FavoritesStore implements OnInit, OnDestroy {
constructor(private nativeStorage: NativeStorage) { }
private dataKey: "favorites";
private favorites: Array<any>;
public ngOnInit() {
this.loadFavorites();
}
public ngOnDestroy(){
this.saveFavorites();
}
private loadFavorites() {
NativeStorage.getItem(this.dataKey)
.then(
data => this.favorites = data,
error => console.error(error)
);
}
private saveFavorites() {
NativeStorage.setItem(this.dataKey, {property: this.favorites})
.then(
() => {
console.log('Stored favorites');
console.log(this.favorites);
},
error => console.error('Error storing item', error)
);
public addFavorite(favorite: any) {
this.favorites.push(favorite);
}
public getFavorites(){
return this.favorites;
}
}

Provider bereitstellen
app.module.ts
import { FavoritesStore } from '../providers/favoritesStore';
import { NativeStorage } from 'ionic-native';
@NgModule({
declarations: [
…
],
imports: [
IonicModule.forRoot(MyApp)
],
bootstrap: [IonicApp],
entryComponents: [
…
],
providers: [FavoritesStore, NativeStorage]
})
Dadurch steht die gleiche Instanz des Providers allen zur Verfügung.

Provider Nutzen
import { FavoritesStore } from '../../providers/favoritesStore';
@Component({
selector: 'page-favorite-input',
templateUrl: 'favorite-input.html'
})
constructor(…, private store: FavoritesStore) { }
public save(){
let favorite =
{
"comments": this.formData.value.comments,
"imdbID": this.params.get("imdbID")
};
this.store.addFavorite(favorite);

Alerts
Details
Tabs
Input

Toasts
Details
Tabs
Input

showScuessToast() {
let toast = this.toastCtrl.create({
message: 'Favorite was added successfully',
duration: 3000,
position: 'top'
});
toast.present();
}

Probleme beim Erstellen eines neuen Projekts weil npm kein install ausführen kann.
Lösung: Aller neuste Node Version installieren und den Rechner neu starten.

Man kann selbst in neuen Projekten keine Ionicons sehen
(betrifft vor allem RC0)
^ Symbol entfernen oder auf Version 2.0.0 wechseln
Danach noch einmal npm install ausführen.

Es ist nicht möglich zu einer bestimmten Seite zu wechseln
Die Seite muss in declarations und(!) entryComponents der app.module.ts
eingetragen werden.

Ionic 2 - Hybridapps auf Steroiden

Empfohlen

Empfohlen

Weitere ähnliche Inhalte

Was ist angesagt?

Was ist angesagt? (7)

Andere mochten auch

Andere mochten auch (20)

Ähnlich wie Ionic 2 - Hybridapps auf Steroiden

Ähnlich wie Ionic 2 - Hybridapps auf Steroiden (20)

Mehr von Hendrik Lösch

Mehr von Hendrik Lösch (20)

Ionic 2 - Hybridapps auf Steroiden