ionic tutorial - Installation or Setup in Ionicframework - ionic framework - ionic 2 - ionic creator - ionic development



1. Install the Ionic Framework and Cordova (since Ionic apps are based on Cordova) using npm (the Node Package Manager):

Make sure you have an up-to-date version of Node.js installed on your system. If you don't have Node.js installed, you can install it from here. Also, for Mac users, having the latest Xcode version installed on your system brings to you command-line-tools and iOs Simulator, download here. Open a terminal window (Mac) or a command window (Windows), and install Cordova and Ionic:

$ npm install -g cordova ionic
Click below button to copy the code. From wikitechy - ionic tutorial - ionic framework tutorial - team

On a Mac, you may have to use sudo depending on your system configuration:

$ sudo npm install -g cordova ionic
Click below button to copy the code. From wikitechy - ionic tutorial - ionic framework tutorial - team

If you already have Cordova and Ionic installed on your computer, make sure you update to the latest version:

$ npm update -g cordova ionic
Click below button to copy the code. From wikitechy - ionic tutorial - ionic framework tutorial - team

or

$ sudo npm update -g cordova ionic
Click below button to copy the code. From wikitechy - ionic tutorial - ionic framework tutorial - team

Follow the Android and iOS platform guides to install required platform dependencies. Note: iOS development requires Mac OS X. iOS simulator through the Ionic CLI requires the ios-sim npm package, which can be installed with the command:

$ sudo npm -g install ios-sim
Click below button to copy the code. From wikitechy - ionic tutorial - ionic framework tutorial - team

2. Start a new Ionic project:

Create an Ionic project using one of the ready-made app templates, or a blank one to start fresh.

$ ionic start myApp blank
Click below button to copy the code. From wikitechy - ionic tutorial - ionic framework tutorial - team

or

$ ionic start myApp tabs
Click below button to copy the code. From wikitechy - ionic tutorial - ionic framework tutorial - team

or

$ ionic start myApp sidemenu
Click below button to copy the code. From wikitechy - ionic tutorial - ionic framework tutorial - team

3. Test the Ionic app:

To test your Ionic app in a desktop browser on both iOS and Android platforms:

$ ionic serve --lab
Click below button to copy the code. From wikitechy - ionic tutorial - ionic framework tutorial - team

Whereas ionic serve --lab is great to test the app UI on multiple platforms it could lead to some problems for Javascript Console or Element Inspection, in that case what you may prefer:

$ ionic serve
Click below button to copy the code. From wikitechy - ionic tutorial - ionic framework tutorial - team

To test your Ionic app in an emulator:

$ cd myApp
$ ionic platform add ios android
$ ionic build ios
$ ionic emulate ios
Click below button to copy the code. From wikitechy - ionic tutorial - ionic framework tutorial - team

Substitute ios with android for Android emulator testing:

$ ionic build android
$ ionic emulate android
Click below button to copy the code. From wikitechy - ionic tutorial - ionic framework tutorial - team

To test your Ionic app in an Android device connected via USB:

$ ionic run android
Click below button to copy the code. From wikitechy - ionic tutorial - ionic framework tutorial - team

To test your Ionic app in an iOS device connected via USB:

$ ionic run ios --device
Click below button to copy the code. From wikitechy - ionic tutorial - ionic framework tutorial - team

Related Searches to Installation or Setup in Ionicframework