Install Ionic
npm install -g cordova ionic
|
Start an App
ionic start <app-name> tabs
|
Run your App
Get all cordova plugin in place
Create a new page crud from command line
ionic generate page <page-name>
|
Create a new provider from command line
ionic g provider <provider-name>
|
Check all default plugins that are used in the new Ionic 3 app.
ionic cordova plugin list
|
Check cordova plugin list
launch android studio
tools -> android -> sdk manager
install the required things from
https://cordova.apache.org/docs/en/latest/guide/platforms/android/
tools => android => avd manager => create device
This command will create a folder which will have respective os builds.
ionic cordova platform add android
|
ionic cordova platform add ios
|
Build for Browser
ionic cordova platform add browser
|
ionic cordova build browser
|
To build for browser:
To run:
ionic cordova run browser
|
More options
cordova run browser -- --port=8001 --target=Firefox
|
Run the app on the specific OS
ionic cordova run ios --device
|
ionic cordova run android --device
|
Emulate the app in OS
ionic cordova emulate ios
|
ionic cordova emulate android
|
This will build a debuggable apk, mostly testing and not ready for the app stores.
ionic cordova build android
|
ionic build android –release will generate an apk ready for release to the app store but hasn’t been signed yet.
This will generate an apk ready for releasing to the app store, but hasn’t been signed yet.
ionic build android --release
|
Run the application
adb install -r /platforms/android/ant-build/app_name.apk
|
Generate icons & splash screens
ionic cordova resources --icon
|
ionic cordova resources --splash
|
For platform specific splash screens
ionic cordova resources android --splash
|
or
http://blog.ionic.io/automating-icons-and-splash-screens/
add ionic splash screen
ionic cordova plugin add --save cordova-plugin-splashscreen
|
get ionic information
Update npm
How to create keystore key?
keytool -genkey -v -keystore [your keystore file path]{C:/index.keystore} -alias [your_alias_name]{index} -keyalg RSA -keysize 2048 -validity 10000[in days]
keytool -genkey -v -keystore c:/app-nameee.keystore -alias app-nameee-aliasss -keyalg RSA -keysize 2048 -validity 10000
|
keytool -genkey -v -keystore H:/git-repos/wordpress-mobile-app/docs/keystores/app-nameee.keystore -alias app-nameee-aliasss -keyalg RSA -keysize 2048 -validity 10000
|
To disable animation for all your navigation go to your app.module.ts file and add to the config animate:false
IonicModule.forRoot(MyApp, { animate: false })
page animation
this.navCtrl.push(ShopPage, {}, { animate: true, animation: ‘transition’, duration: 5000, direction: ‘forward’ });
Shortcut for pushing page without passing data
usrPage = userProfilePage
[navPush]=”usrPage”
Add elvis eperator (?) in templeate stop errors when object is not available. Eg category node is not available in the below line.
{{quoteGroup?.category}}
if using “providers” and api. You need to place these lines in app.module.ts
import { HttpModule } from ‘@angular/http’;
and add “HttpModule” in @NgModule – imports below.
Error => the connection to the server was unsuccessful. (file ///android_asset/www/index.html)
https://stackoverflow.com/questions/12319809/application-error-the-connection-to-the-server-was-unsuccessful-file-andr
Lists & Performance Issues
<ion-list [virtualScroll]=”items”>
<ion-item *virtualItem=”let item”>
{?{ item }}
</ion-item>
</ion-list>
How to remove splash screen from ionic application
https://stackoverflow.com/questions/40255115/how-to-remove-splash-screen-from-ionic-application
https://stackoverflow.com/questions/29472150/cordova-splash-screen-remove
ionic resources not copying in www
ionic cordova platform rm android
ionic cordova platform add android@latest
cordova platform update android
if you get error delete platforms folder.
Phonegap offical docs
http://docs.phonegap.com/phonegap-build/configuring/
Phonegap offical docs for preferences
http://docs.phonegap.com/phonegap-build/configuring/preferences/
ionViewDidLoad() function is automatically trigger or you can place code in consutrustor.
