SlideShare a Scribd company logo
1 of 7
How to setup Ionic 2
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.
1. Install Node.js
2. Install Ionic 2 Alpha
3. Setup cutePuppyPics
4. Run cutePuppyPics Project
5. Add Android Platform
6. Install Android Emulator
7. 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 - 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.
https://github.com/driftyco/ionic2-starter-tabs/archive/master.zip
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.
https://webpack.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
http://www.codeandyou.com/2015/03/genymotion-is-fast-and-easy-to-use.html
7. Run cutePuppyPics project intoEmulator – Run following command into command line
to run project into android emulator.
ionic run android
Thanks
http://www.codeandyou.com
http://www.codeandyou.com/2015/10/how-to-setup-
ionic-2.html
Keywords – Ionic 2, Ionic 2 Documentation, How to setup Ionic 2

More Related Content

What's hot

Top Cordova Challenges and How to Tackle Them
Top Cordova Challenges and How to Tackle ThemTop Cordova Challenges and How to Tackle Them
Top Cordova Challenges and How to Tackle ThemIonic Framework
 
Cordova, Angularjs & Ionic @ Codeaholics
Cordova, Angularjs & Ionic @ CodeaholicsCordova, Angularjs & Ionic @ Codeaholics
Cordova, Angularjs & Ionic @ CodeaholicsEddie Lau
 
Mobile App Development Trends in 2021
Mobile App Development Trends in 2021Mobile App Development Trends in 2021
Mobile App Development Trends in 2021Vincent Lau
 
Building capacitor apps in appflow webinar
Building capacitor apps in appflow webinarBuilding capacitor apps in appflow webinar
Building capacitor apps in appflow webinarIonic Framework
 
Developing Hybrid Applications with IONIC
Developing Hybrid Applications with IONICDeveloping Hybrid Applications with IONIC
Developing Hybrid Applications with IONICFuat Buğra AYDIN
 
Cross Platform Mobile Apps with the Ionic Framework
Cross Platform Mobile Apps with the Ionic FrameworkCross Platform Mobile Apps with the Ionic Framework
Cross Platform Mobile Apps with the Ionic FrameworkTroy Miles
 
Heading towards the great release of angular 8.0 development observe the uno...
Heading towards the great release of angular 8.0 development  observe the uno...Heading towards the great release of angular 8.0 development  observe the uno...
Heading towards the great release of angular 8.0 development observe the uno...Concetto Labs
 
ASJ Workshop - Introduction
ASJ Workshop - IntroductionASJ Workshop - Introduction
ASJ Workshop - IntroductionAmsavarthan Lv
 
Startup Concept Development with Remote Resources using React Native, Enginee...
Startup Concept Development with Remote Resources using React Native, Enginee...Startup Concept Development with Remote Resources using React Native, Enginee...
Startup Concept Development with Remote Resources using React Native, Enginee...engineermaste solution
 
Ionic CLI Adventures
Ionic CLI AdventuresIonic CLI Adventures
Ionic CLI AdventuresJuarez Filho
 
Base register login forgot password swift 3 template
Base register login forgot password swift 3 templateBase register login forgot password swift 3 template
Base register login forgot password swift 3 templateHarshal Lonare
 
DevLab london Tizen sdk by Adam Panasiuk
DevLab london Tizen sdk by Adam PanasiukDevLab london Tizen sdk by Adam Panasiuk
DevLab london Tizen sdk by Adam PanasiukBeMyApp
 
React native automation testing
React native automation testingReact native automation testing
React native automation testingJayad Aadrit
 
Building your Own Mobile Enterprise Application: It’s Not as Hard as You Migh...
Building your Own Mobile Enterprise Application: It’s Not as Hard as You Migh...Building your Own Mobile Enterprise Application: It’s Not as Hard as You Migh...
Building your Own Mobile Enterprise Application: It’s Not as Hard as You Migh...Jason Conger
 
Hire react native developer
Hire react native developer Hire react native developer
Hire react native developer Shivani
 
React native portfolio - Kapil
React native portfolio - KapilReact native portfolio - Kapil
React native portfolio - Kapilkapil maheshwari
 

What's hot (20)

Top Cordova Challenges and How to Tackle Them
Top Cordova Challenges and How to Tackle ThemTop Cordova Challenges and How to Tackle Them
Top Cordova Challenges and How to Tackle Them
 
Cordova, Angularjs & Ionic @ Codeaholics
Cordova, Angularjs & Ionic @ CodeaholicsCordova, Angularjs & Ionic @ Codeaholics
Cordova, Angularjs & Ionic @ Codeaholics
 
Mobile App Development Trends in 2021
Mobile App Development Trends in 2021Mobile App Development Trends in 2021
Mobile App Development Trends in 2021
 
Building capacitor apps in appflow webinar
Building capacitor apps in appflow webinarBuilding capacitor apps in appflow webinar
Building capacitor apps in appflow webinar
 
Ionic event: March 2021
Ionic event: March 2021Ionic event: March 2021
Ionic event: March 2021
 
Developing Hybrid Applications with IONIC
Developing Hybrid Applications with IONICDeveloping Hybrid Applications with IONIC
Developing Hybrid Applications with IONIC
 
Ionic Framework
Ionic FrameworkIonic Framework
Ionic Framework
 
Ionic Framework
Ionic FrameworkIonic Framework
Ionic Framework
 
Cross Platform Mobile Apps with the Ionic Framework
Cross Platform Mobile Apps with the Ionic FrameworkCross Platform Mobile Apps with the Ionic Framework
Cross Platform Mobile Apps with the Ionic Framework
 
Heading towards the great release of angular 8.0 development observe the uno...
Heading towards the great release of angular 8.0 development  observe the uno...Heading towards the great release of angular 8.0 development  observe the uno...
Heading towards the great release of angular 8.0 development observe the uno...
 
ASJ Workshop - Introduction
ASJ Workshop - IntroductionASJ Workshop - Introduction
ASJ Workshop - Introduction
 
Startup Concept Development with Remote Resources using React Native, Enginee...
Startup Concept Development with Remote Resources using React Native, Enginee...Startup Concept Development with Remote Resources using React Native, Enginee...
Startup Concept Development with Remote Resources using React Native, Enginee...
 
Ionic CLI Adventures
Ionic CLI AdventuresIonic CLI Adventures
Ionic CLI Adventures
 
Base register login forgot password swift 3 template
Base register login forgot password swift 3 templateBase register login forgot password swift 3 template
Base register login forgot password swift 3 template
 
DevLab london Tizen sdk by Adam Panasiuk
DevLab london Tizen sdk by Adam PanasiukDevLab london Tizen sdk by Adam Panasiuk
DevLab london Tizen sdk by Adam Panasiuk
 
React native automation testing
React native automation testingReact native automation testing
React native automation testing
 
Building your Own Mobile Enterprise Application: It’s Not as Hard as You Migh...
Building your Own Mobile Enterprise Application: It’s Not as Hard as You Migh...Building your Own Mobile Enterprise Application: It’s Not as Hard as You Migh...
Building your Own Mobile Enterprise Application: It’s Not as Hard as You Migh...
 
Hire react native developer
Hire react native developer Hire react native developer
Hire react native developer
 
React native portfolio - Kapil
React native portfolio - KapilReact native portfolio - Kapil
React native portfolio - Kapil
 
Angular 2.0
Angular 2.0Angular 2.0
Angular 2.0
 

Viewers also liked

Viewers also liked (7)

Major minor project 2
Major minor project 2Major minor project 2
Major minor project 2
 
Overview of the MCA 21 Project (Mr. Avinash K. Srivastava, India)
Overview of the MCA 21 Project (Mr. Avinash K. Srivastava, India)Overview of the MCA 21 Project (Mr. Avinash K. Srivastava, India)
Overview of the MCA 21 Project (Mr. Avinash K. Srivastava, India)
 
M Tech Projects List
M Tech Projects ListM Tech Projects List
M Tech Projects List
 
Hybrid Application Development documentation report (MCA Project)
Hybrid Application Development documentation report (MCA Project)Hybrid Application Development documentation report (MCA Project)
Hybrid Application Development documentation report (MCA Project)
 
Google Presentation
Google PresentationGoogle Presentation
Google Presentation
 
Ionic 2: The Power of TypeScript
Ionic 2:  The Power of TypeScriptIonic 2:  The Power of TypeScript
Ionic 2: The Power of TypeScript
 
Top Rumors About Apple March 21 Big Event
Top Rumors About Apple March 21 Big EventTop Rumors About Apple March 21 Big Event
Top Rumors About Apple March 21 Big Event
 

Similar to How to setup ionic 2

Hybrid Apps in a Snap
Hybrid Apps in a SnapHybrid Apps in a Snap
Hybrid Apps in a SnapPaulina Gallo
 
Building an Ionic hybrid mobile app with TypeScript
Building an Ionic hybrid mobile app with TypeScript Building an Ionic hybrid mobile app with TypeScript
Building an Ionic hybrid mobile app with TypeScript Serge van den Oever
 
Intro to Ionic for Building Hybrid Mobile Applications
Intro to Ionic for Building Hybrid Mobile ApplicationsIntro to Ionic for Building Hybrid Mobile Applications
Intro to Ionic for Building Hybrid Mobile ApplicationsSasha dos Santos
 
Building Mobile Apps With Ionic & Loopback
Building Mobile Apps With Ionic & LoopbackBuilding Mobile Apps With Ionic & Loopback
Building Mobile Apps With Ionic & LoopbackChibuzor Obiora
 
Tutorial: Develop Mobile Applications with AngularJS
Tutorial: Develop Mobile Applications with AngularJSTutorial: Develop Mobile Applications with AngularJS
Tutorial: Develop Mobile Applications with AngularJSPhilipp Burgmer
 
Mobile os by waqas
Mobile os by waqasMobile os by waqas
Mobile os by waqas8neutron8
 
Introdução Ionic Framework - Meetup SP
Introdução Ionic Framework - Meetup SPIntrodução Ionic Framework - Meetup SP
Introdução Ionic Framework - Meetup SPLivio Alves, MBA
 
Pemrograman mobile menggunakan ionic framework
Pemrograman mobile menggunakan ionic frameworkPemrograman mobile menggunakan ionic framework
Pemrograman mobile menggunakan ionic frameworkPuguh Rismadi
 
Django simplified : by weever mbakaya
Django simplified : by weever mbakayaDjango simplified : by weever mbakaya
Django simplified : by weever mbakayaMbakaya Kwatukha
 
Android platform add with ionic framework
Android platform add with ionic frameworkAndroid platform add with ionic framework
Android platform add with ionic frameworkSaravanan KR
 
Angularjs Tutorial for Beginners
Angularjs Tutorial for BeginnersAngularjs Tutorial for Beginners
Angularjs Tutorial for Beginnersrajkamaltibacademy
 
React js t1 - introduction
React js   t1 - introductionReact js   t1 - introduction
React js t1 - introductionJainul Musani
 

Similar to How to setup ionic 2 (20)

Ionic2 First Lesson of Four
Ionic2 First Lesson of FourIonic2 First Lesson of Four
Ionic2 First Lesson of Four
 
Hybrid Apps in a Snap
Hybrid Apps in a SnapHybrid Apps in a Snap
Hybrid Apps in a Snap
 
Ionic
IonicIonic
Ionic
 
Building an Ionic hybrid mobile app with TypeScript
Building an Ionic hybrid mobile app with TypeScript Building an Ionic hybrid mobile app with TypeScript
Building an Ionic hybrid mobile app with TypeScript
 
Ionic framework
Ionic frameworkIonic framework
Ionic framework
 
Intro to Ionic for Building Hybrid Mobile Applications
Intro to Ionic for Building Hybrid Mobile ApplicationsIntro to Ionic for Building Hybrid Mobile Applications
Intro to Ionic for Building Hybrid Mobile Applications
 
Building Mobile Apps With Ionic & Loopback
Building Mobile Apps With Ionic & LoopbackBuilding Mobile Apps With Ionic & Loopback
Building Mobile Apps With Ionic & Loopback
 
Workshop Ionic Framework - CC FE & UX
Workshop Ionic Framework - CC FE & UXWorkshop Ionic Framework - CC FE & UX
Workshop Ionic Framework - CC FE & UX
 
Tutorial: Develop Mobile Applications with AngularJS
Tutorial: Develop Mobile Applications with AngularJSTutorial: Develop Mobile Applications with AngularJS
Tutorial: Develop Mobile Applications with AngularJS
 
Mobile os by waqas
Mobile os by waqasMobile os by waqas
Mobile os by waqas
 
Introdução Ionic Framework - Meetup SP
Introdução Ionic Framework - Meetup SPIntrodução Ionic Framework - Meetup SP
Introdução Ionic Framework - Meetup SP
 
Ionic
IonicIonic
Ionic
 
Pemrograman mobile menggunakan ionic framework
Pemrograman mobile menggunakan ionic frameworkPemrograman mobile menggunakan ionic framework
Pemrograman mobile menggunakan ionic framework
 
Django simplified : by weever mbakaya
Django simplified : by weever mbakayaDjango simplified : by weever mbakaya
Django simplified : by weever mbakaya
 
Ionic setup
Ionic setupIonic setup
Ionic setup
 
ionicSetup
ionicSetupionicSetup
ionicSetup
 
CocoaPods.pptx
CocoaPods.pptxCocoaPods.pptx
CocoaPods.pptx
 
Android platform add with ionic framework
Android platform add with ionic frameworkAndroid platform add with ionic framework
Android platform add with ionic framework
 
Angularjs Tutorial for Beginners
Angularjs Tutorial for BeginnersAngularjs Tutorial for Beginners
Angularjs Tutorial for Beginners
 
React js t1 - introduction
React js   t1 - introductionReact js   t1 - introduction
React js t1 - introduction
 

More from codeandyou forums

How to validate server certificate
How to validate server certificateHow to validate server certificate
How to validate server certificatecodeandyou forums
 
How to call $scope function from console
How to call $scope function from consoleHow to call $scope function from console
How to call $scope function from consolecodeandyou forums
 
Understand components in Angular 2
Understand components in Angular 2Understand components in Angular 2
Understand components in Angular 2codeandyou forums
 
Understand routing in angular 2
Understand routing in angular 2Understand routing in angular 2
Understand routing in angular 2codeandyou forums
 
What is JSON? Why use JSON? JSON Types? JSON Helpful Tools?
What is JSON? Why use JSON? JSON Types? JSON Helpful Tools?What is JSON? Why use JSON? JSON Types? JSON Helpful Tools?
What is JSON? Why use JSON? JSON Types? JSON Helpful Tools?codeandyou forums
 
How to install ssl certificate from .pem
How to install ssl certificate from .pemHow to install ssl certificate from .pem
How to install ssl certificate from .pemcodeandyou forums
 
Protractor end-to-end testing framework for angular js
Protractor   end-to-end testing framework for angular jsProtractor   end-to-end testing framework for angular js
Protractor end-to-end testing framework for angular jscodeandyou forums
 
How routing works in angular js
How routing works in angular jsHow routing works in angular js
How routing works in angular jscodeandyou forums
 
How to use proxy server in .net application
How to use proxy server in .net applicationHow to use proxy server in .net application
How to use proxy server in .net applicationcodeandyou forums
 
How to catch query string in angular js
How to catch query string in angular jsHow to catch query string in angular js
How to catch query string in angular jscodeandyou forums
 
Different way to share data between controllers in angular js
Different way to share data between controllers in angular jsDifferent way to share data between controllers in angular js
Different way to share data between controllers in angular jscodeandyou forums
 
Angular.js interview questions
Angular.js interview questionsAngular.js interview questions
Angular.js interview questionscodeandyou forums
 
How to set up a proxy server on windows
How to set up a proxy server on windows How to set up a proxy server on windows
How to set up a proxy server on windows codeandyou forums
 
What is $root scope in angularjs
What is $root scope in angularjsWhat is $root scope in angularjs
What is $root scope in angularjscodeandyou forums
 
How to save log4net into database
How to save log4net into databaseHow to save log4net into database
How to save log4net into databasecodeandyou forums
 

More from codeandyou forums (16)

How to validate server certificate
How to validate server certificateHow to validate server certificate
How to validate server certificate
 
How to call $scope function from console
How to call $scope function from consoleHow to call $scope function from console
How to call $scope function from console
 
Understand components in Angular 2
Understand components in Angular 2Understand components in Angular 2
Understand components in Angular 2
 
Understand routing in angular 2
Understand routing in angular 2Understand routing in angular 2
Understand routing in angular 2
 
MongoDB 3.2.0 Released
MongoDB 3.2.0 ReleasedMongoDB 3.2.0 Released
MongoDB 3.2.0 Released
 
What is JSON? Why use JSON? JSON Types? JSON Helpful Tools?
What is JSON? Why use JSON? JSON Types? JSON Helpful Tools?What is JSON? Why use JSON? JSON Types? JSON Helpful Tools?
What is JSON? Why use JSON? JSON Types? JSON Helpful Tools?
 
How to install ssl certificate from .pem
How to install ssl certificate from .pemHow to install ssl certificate from .pem
How to install ssl certificate from .pem
 
Protractor end-to-end testing framework for angular js
Protractor   end-to-end testing framework for angular jsProtractor   end-to-end testing framework for angular js
Protractor end-to-end testing framework for angular js
 
How routing works in angular js
How routing works in angular jsHow routing works in angular js
How routing works in angular js
 
How to use proxy server in .net application
How to use proxy server in .net applicationHow to use proxy server in .net application
How to use proxy server in .net application
 
How to catch query string in angular js
How to catch query string in angular jsHow to catch query string in angular js
How to catch query string in angular js
 
Different way to share data between controllers in angular js
Different way to share data between controllers in angular jsDifferent way to share data between controllers in angular js
Different way to share data between controllers in angular js
 
Angular.js interview questions
Angular.js interview questionsAngular.js interview questions
Angular.js interview questions
 
How to set up a proxy server on windows
How to set up a proxy server on windows How to set up a proxy server on windows
How to set up a proxy server on windows
 
What is $root scope in angularjs
What is $root scope in angularjsWhat is $root scope in angularjs
What is $root scope in angularjs
 
How to save log4net into database
How to save log4net into databaseHow to save log4net into database
How to save log4net into database
 

Recently uploaded

SAM Training Session - How to use EXCEL ?
SAM Training Session - How to use EXCEL ?SAM Training Session - How to use EXCEL ?
SAM Training Session - How to use EXCEL ?Alexandre Beguel
 
UI5ers live - Custom Controls wrapping 3rd-party libs.pptx
UI5ers live - Custom Controls wrapping 3rd-party libs.pptxUI5ers live - Custom Controls wrapping 3rd-party libs.pptx
UI5ers live - Custom Controls wrapping 3rd-party libs.pptxAndreas Kunz
 
Real-time Tracking and Monitoring with Cargo Cloud Solutions.pptx
Real-time Tracking and Monitoring with Cargo Cloud Solutions.pptxReal-time Tracking and Monitoring with Cargo Cloud Solutions.pptx
Real-time Tracking and Monitoring with Cargo Cloud Solutions.pptxRTS corp
 
VictoriaMetrics Q1 Meet Up '24 - Community & News Update
VictoriaMetrics Q1 Meet Up '24 - Community & News UpdateVictoriaMetrics Q1 Meet Up '24 - Community & News Update
VictoriaMetrics Q1 Meet Up '24 - Community & News UpdateVictoriaMetrics
 
How to submit a standout Adobe Champion Application
How to submit a standout Adobe Champion ApplicationHow to submit a standout Adobe Champion Application
How to submit a standout Adobe Champion ApplicationBradBedford3
 
Strategies for using alternative queries to mitigate zero results
Strategies for using alternative queries to mitigate zero resultsStrategies for using alternative queries to mitigate zero results
Strategies for using alternative queries to mitigate zero resultsJean Silva
 
Ronisha Informatics Private Limited Catalogue
Ronisha Informatics Private Limited CatalogueRonisha Informatics Private Limited Catalogue
Ronisha Informatics Private Limited Catalogueitservices996
 
VK Business Profile - provides IT solutions and Web Development
VK Business Profile - provides IT solutions and Web DevelopmentVK Business Profile - provides IT solutions and Web Development
VK Business Profile - provides IT solutions and Web Developmentvyaparkranti
 
Precise and Complete Requirements? An Elusive Goal
Precise and Complete Requirements? An Elusive GoalPrecise and Complete Requirements? An Elusive Goal
Precise and Complete Requirements? An Elusive GoalLionel Briand
 
Odoo 14 - eLearning Module In Odoo 14 Enterprise
Odoo 14 - eLearning Module In Odoo 14 EnterpriseOdoo 14 - eLearning Module In Odoo 14 Enterprise
Odoo 14 - eLearning Module In Odoo 14 Enterprisepreethippts
 
Not a Kubernetes fan? The state of PaaS in 2024
Not a Kubernetes fan? The state of PaaS in 2024Not a Kubernetes fan? The state of PaaS in 2024
Not a Kubernetes fan? The state of PaaS in 2024Anthony Dahanne
 
The Role of IoT and Sensor Technology in Cargo Cloud Solutions.pptx
The Role of IoT and Sensor Technology in Cargo Cloud Solutions.pptxThe Role of IoT and Sensor Technology in Cargo Cloud Solutions.pptx
The Role of IoT and Sensor Technology in Cargo Cloud Solutions.pptxRTS corp
 
Exploring Selenium_Appium Frameworks for Seamless Integration with HeadSpin.pdf
Exploring Selenium_Appium Frameworks for Seamless Integration with HeadSpin.pdfExploring Selenium_Appium Frameworks for Seamless Integration with HeadSpin.pdf
Exploring Selenium_Appium Frameworks for Seamless Integration with HeadSpin.pdfkalichargn70th171
 
What’s New in VictoriaMetrics: Q1 2024 Updates
What’s New in VictoriaMetrics: Q1 2024 UpdatesWhat’s New in VictoriaMetrics: Q1 2024 Updates
What’s New in VictoriaMetrics: Q1 2024 UpdatesVictoriaMetrics
 
Post Quantum Cryptography – The Impact on Identity
Post Quantum Cryptography – The Impact on IdentityPost Quantum Cryptography – The Impact on Identity
Post Quantum Cryptography – The Impact on Identityteam-WIBU
 
2024 DevNexus Patterns for Resiliency: Shuffle shards
2024 DevNexus Patterns for Resiliency: Shuffle shards2024 DevNexus Patterns for Resiliency: Shuffle shards
2024 DevNexus Patterns for Resiliency: Shuffle shardsChristopher Curtin
 
Best Angular 17 Classroom & Online training - Naresh IT
Best Angular 17 Classroom & Online training - Naresh ITBest Angular 17 Classroom & Online training - Naresh IT
Best Angular 17 Classroom & Online training - Naresh ITmanoharjgpsolutions
 
VictoriaMetrics Anomaly Detection Updates: Q1 2024
VictoriaMetrics Anomaly Detection Updates: Q1 2024VictoriaMetrics Anomaly Detection Updates: Q1 2024
VictoriaMetrics Anomaly Detection Updates: Q1 2024VictoriaMetrics
 
JavaLand 2024 - Going serverless with Quarkus GraalVM native images and AWS L...
JavaLand 2024 - Going serverless with Quarkus GraalVM native images and AWS L...JavaLand 2024 - Going serverless with Quarkus GraalVM native images and AWS L...
JavaLand 2024 - Going serverless with Quarkus GraalVM native images and AWS L...Bert Jan Schrijver
 
Tech Tuesday Slides - Introduction to Project Management with OnePlan's Work ...
Tech Tuesday Slides - Introduction to Project Management with OnePlan's Work ...Tech Tuesday Slides - Introduction to Project Management with OnePlan's Work ...
Tech Tuesday Slides - Introduction to Project Management with OnePlan's Work ...OnePlan Solutions
 

Recently uploaded (20)

SAM Training Session - How to use EXCEL ?
SAM Training Session - How to use EXCEL ?SAM Training Session - How to use EXCEL ?
SAM Training Session - How to use EXCEL ?
 
UI5ers live - Custom Controls wrapping 3rd-party libs.pptx
UI5ers live - Custom Controls wrapping 3rd-party libs.pptxUI5ers live - Custom Controls wrapping 3rd-party libs.pptx
UI5ers live - Custom Controls wrapping 3rd-party libs.pptx
 
Real-time Tracking and Monitoring with Cargo Cloud Solutions.pptx
Real-time Tracking and Monitoring with Cargo Cloud Solutions.pptxReal-time Tracking and Monitoring with Cargo Cloud Solutions.pptx
Real-time Tracking and Monitoring with Cargo Cloud Solutions.pptx
 
VictoriaMetrics Q1 Meet Up '24 - Community & News Update
VictoriaMetrics Q1 Meet Up '24 - Community & News UpdateVictoriaMetrics Q1 Meet Up '24 - Community & News Update
VictoriaMetrics Q1 Meet Up '24 - Community & News Update
 
How to submit a standout Adobe Champion Application
How to submit a standout Adobe Champion ApplicationHow to submit a standout Adobe Champion Application
How to submit a standout Adobe Champion Application
 
Strategies for using alternative queries to mitigate zero results
Strategies for using alternative queries to mitigate zero resultsStrategies for using alternative queries to mitigate zero results
Strategies for using alternative queries to mitigate zero results
 
Ronisha Informatics Private Limited Catalogue
Ronisha Informatics Private Limited CatalogueRonisha Informatics Private Limited Catalogue
Ronisha Informatics Private Limited Catalogue
 
VK Business Profile - provides IT solutions and Web Development
VK Business Profile - provides IT solutions and Web DevelopmentVK Business Profile - provides IT solutions and Web Development
VK Business Profile - provides IT solutions and Web Development
 
Precise and Complete Requirements? An Elusive Goal
Precise and Complete Requirements? An Elusive GoalPrecise and Complete Requirements? An Elusive Goal
Precise and Complete Requirements? An Elusive Goal
 
Odoo 14 - eLearning Module In Odoo 14 Enterprise
Odoo 14 - eLearning Module In Odoo 14 EnterpriseOdoo 14 - eLearning Module In Odoo 14 Enterprise
Odoo 14 - eLearning Module In Odoo 14 Enterprise
 
Not a Kubernetes fan? The state of PaaS in 2024
Not a Kubernetes fan? The state of PaaS in 2024Not a Kubernetes fan? The state of PaaS in 2024
Not a Kubernetes fan? The state of PaaS in 2024
 
The Role of IoT and Sensor Technology in Cargo Cloud Solutions.pptx
The Role of IoT and Sensor Technology in Cargo Cloud Solutions.pptxThe Role of IoT and Sensor Technology in Cargo Cloud Solutions.pptx
The Role of IoT and Sensor Technology in Cargo Cloud Solutions.pptx
 
Exploring Selenium_Appium Frameworks for Seamless Integration with HeadSpin.pdf
Exploring Selenium_Appium Frameworks for Seamless Integration with HeadSpin.pdfExploring Selenium_Appium Frameworks for Seamless Integration with HeadSpin.pdf
Exploring Selenium_Appium Frameworks for Seamless Integration with HeadSpin.pdf
 
What’s New in VictoriaMetrics: Q1 2024 Updates
What’s New in VictoriaMetrics: Q1 2024 UpdatesWhat’s New in VictoriaMetrics: Q1 2024 Updates
What’s New in VictoriaMetrics: Q1 2024 Updates
 
Post Quantum Cryptography – The Impact on Identity
Post Quantum Cryptography – The Impact on IdentityPost Quantum Cryptography – The Impact on Identity
Post Quantum Cryptography – The Impact on Identity
 
2024 DevNexus Patterns for Resiliency: Shuffle shards
2024 DevNexus Patterns for Resiliency: Shuffle shards2024 DevNexus Patterns for Resiliency: Shuffle shards
2024 DevNexus Patterns for Resiliency: Shuffle shards
 
Best Angular 17 Classroom & Online training - Naresh IT
Best Angular 17 Classroom & Online training - Naresh ITBest Angular 17 Classroom & Online training - Naresh IT
Best Angular 17 Classroom & Online training - Naresh IT
 
VictoriaMetrics Anomaly Detection Updates: Q1 2024
VictoriaMetrics Anomaly Detection Updates: Q1 2024VictoriaMetrics Anomaly Detection Updates: Q1 2024
VictoriaMetrics Anomaly Detection Updates: Q1 2024
 
JavaLand 2024 - Going serverless with Quarkus GraalVM native images and AWS L...
JavaLand 2024 - Going serverless with Quarkus GraalVM native images and AWS L...JavaLand 2024 - Going serverless with Quarkus GraalVM native images and AWS L...
JavaLand 2024 - Going serverless with Quarkus GraalVM native images and AWS L...
 
Tech Tuesday Slides - Introduction to Project Management with OnePlan's Work ...
Tech Tuesday Slides - Introduction to Project Management with OnePlan's Work ...Tech Tuesday Slides - Introduction to Project Management with OnePlan's Work ...
Tech Tuesday Slides - Introduction to Project Management with OnePlan's Work ...
 

How to setup ionic 2

  • 1. How to setup Ionic 2
  • 2. 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. 1. Install Node.js 2. Install Ionic 2 Alpha 3. Setup cutePuppyPics 4. Run cutePuppyPics Project 5. Add Android Platform 6. Install Android Emulator 7. 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
  • 3. 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 - 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. https://github.com/driftyco/ionic2-starter-tabs/archive/master.zip ionic start cutePuppyPics --v2
  • 4. 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
  • 5. 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. https://webpack.github.io/
  • 6. 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 http://www.codeandyou.com/2015/03/genymotion-is-fast-and-easy-to-use.html
  • 7. 7. Run cutePuppyPics project intoEmulator – Run following command into command line to run project into android emulator. ionic run android Thanks http://www.codeandyou.com http://www.codeandyou.com/2015/10/how-to-setup- ionic-2.html Keywords – Ionic 2, Ionic 2 Documentation, How to setup Ionic 2