Ionic is an open source front-end framework for development of hybrid mobile application in HTML 5. Ionic 2 provide a rich library of mobile-optimized HTML, CSS and JS components. Ionic 2 based on AngularJs 2 and SASS.
Ionic 2 still in alpha phase, today I am going to explain how to setup ionic 2.
- Install Node.js
- Install Ionic 2 Alpha
- Setup cutePuppyPics Project
- Run cutePuppyPics Project
- Add Android Platform
- Install Android Emulator
- Run cutePuppyPics project into Emulator
1. Install Node.js – We need to first install Node.js. For install Node.js go to following link
https://nodejs.org/en/
And download stable version of node.js, Right now V5.0.0 Stable version available on Nodejs.org.
After installation go into command prompt and type. It will show you latest version of node installed.
Node -- Version
2. Install Ionic 2 Alpha – To install the Ionic 2 Alpha, go into command prompt and type following command
npm install -g ionic@alpha
It will take some time to install Ionic 2 Alpha depend upon you internet speed.
3. Setup cutePuppyPics Project - When Ionic 2 Alpha installed successfully. Start your first Ionic application. Use following command to install “cutePuppyPics” Project. This command will download “cutePuppyPics” project from github.com and install dependent library and modules also.
ionic start cutePuppyPics --v2
4. Run cutePuppyPics Project - Go into “cutePuppyPics” folder and run following command into command prompt to run “CutePuppyPics” Project. And Ionic project will open into web browser on http://localhost:8100/
ionic serve
Ionic serve command compilie SASS to CSS. Also configure Webpack for project. webpack is a module bundler. It packs CommonJs/AMD modules i. e. for the browser. Allows to split your codebase into multiple bundles.
You can can learn more about WebPack on github.io.
5. Add Android Platform – Our Ionic 2 Alpha cutePuppyPics project running successfully. Now we need to test this project into android emulator. For that we first need to add Android Platform module to Cordova.
To add android platform support run following command into command line.
ionic platform add android
6. Install Android Emulator - Now we need Android SDK or Android emulator. You can use Genymotion, Genymotion is an Android emulator.
Genymotion is the fastest Android emulator for application testing and presentation purpose. Learn more here
7. Run cutePuppyPics project into Emulator – Run following command into command line to run project into android emulator.
ionic run android
Keywords
Ionic 2
Ionic 2 Documentation
How to setup
Ionic 2
I get No compatible version found: ionic@alpha when executing: npm install -g ionic@alpha
ReplyDelete