Ionic Hybrid Application Development

Installation configuration under Windows

NPM install-g Ionic
NPM install-g Cordova
Ionic start MyProject
CD MyProject
Ionic Platform Add Android
Ionic Build Android
Ionic emulate Android
(build emulate can be executed in combination: Ionic run Android)

Prepare for installation configuration under Mac

Installing Xcode and command-line tools
Command line Tools, Downloads, Preferences, Xcode

To install git, install Nodejs
If you have Ruby installed, you can use brew to install Nodejs

Brew install node 
npm install-g Cordova Ionic Gulp Gulp Select whether to install   as appropriate;
NPM Install ios -sim 
Ionic start myApp sidemenu 
Ionic Platform Add iOS # Add the iOS platform to project 
Ionic Build iOS # Compile the iOS code 
Ionic emulate iOS # Launch the app on an iOS simulator 
Ionic run iOS # Launch on device* 
Note You cannot use sudo ionic run iOS, remember.  
If an error occurs:

to fetch platform iosProbably this is either a connection problem,or platform spec is incorrect.Check your connection and platform name/version/URL.Error:EPERM,utime ‘/Users/name/.cordova/lib/npm_cache/cordova-ios/3.9.2/package.npmignore‘

• 1
• 2
• 3
• 4
• 5

• 1
• 2
• 3
• 4
• 5

Then run this command:

RM-RF ~/.cordova
Delete the cache.

After the project is created, you will be prompted if you need to create a ionic account to push the message.

To start the Ionic server using Chrome Debug Run command:

Ionic serve
Follow the prompts to select a network device.

You can see the prompt message:
HTTP://192.168.2.102:8100 use Chrome to access this address, you can use the browser to view the current program.

When you are prompted for the yellow bar, refresh the browser.

In the browser input:

Chrome://inspect
You can define the port forwarding of the development machine and the mobile phone here.

Installing Ngcordova

Ngcordova is a series of open-source ANGULARJS services and extensions that are encapsulated on a cordovaapi basis.

The first step is to install brow, which is used to manage front-end resource dependencies

Using the CD command, set the current path to Ionic/www/lib

NPM Install Bower-g
Bower Install Ngcordova

The path looks like this:

The code can refer to the angular here instead of the angular under/lib/ionic.
References to index.html plus Ngcordova:

<script src="lib/bower_components/ngCordova/dist/ng-cordova.js"></script>

• 1

• 1

It is quoted in this way:

var mainApp=angular.module(‘mainApp‘,[‘ionic‘,‘ngCordova‘]);

• 1

• 1

Common commands

$ ionic build <PLATFORM>$ ionic emulate <PLATFORM>$ ionic run <PLATFORM>$ ionic run android --livereload -c -s //真机调试可以实时修改$ ionic package <MODE> <PLATFORM>$ ionic lib update 更新当前项目的ionic js类库

• 1
• 2
• 3
• 4
• 5
• 6

• 1
• 2
• 3
• 4
• 5
• 6

It's a good idea to configure the Whitelist in config:

<allow-navigation href="http://www.abcdefg.com/*" />

• 1

• 1

Publish plus a file

Build a build-extras.gradle under the ionic/platforms/android.
Content:

false } }

• 1

• 1

Compile command:

Ionic Build–release Android

Generate key:

Keytool-genkey-alias demo.keystore-keyalg rsa-validity 40000-keystore demo.keystore
/* Description:-genkey generate key
-alias Demo.keystore alias Demo.keystore
-KEYALG RSA uses RSA algorithm to encrypt signature
-validity 40000 expiry date 4,000 days
-keystore Demo.keystore */
Signature:
Jarsigner-verbose-keystore Demo.keystore-signedjar demo_signed.apk demo.apk demo.keystore
/* Description:-verbose output Signature details
-keystore Demo.keystore KeyStore Location
-signedjar demor_signed.apk demo.apk Demo.keystore formally signed, three parameters in order to generate the file demo_signed, File demo.apk and KeyStore demo.keystore.*/to be signed

Zipalign (compression alignment) optimize your apk file

4 demo_signed.apk final.apk

Ionic Hybrid Application Development