SlideShare une entreprise Scribd logo
1  sur  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

Contenu connexe

Tendances

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
 

Tendances (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
 

En vedette

En vedette (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
 

Similaire à 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
 

Similaire à 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
 

Plus de 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
 

Plus de 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
 

Dernier

Professional Resume Template for Software Developers
Professional Resume Template for Software DevelopersProfessional Resume Template for Software Developers
Professional Resume Template for Software DevelopersVinodh Ram
 
Short Story: Unveiling the Reasoning Abilities of Large Language Models by Ke...
Short Story: Unveiling the Reasoning Abilities of Large Language Models by Ke...Short Story: Unveiling the Reasoning Abilities of Large Language Models by Ke...
Short Story: Unveiling the Reasoning Abilities of Large Language Models by Ke...kellynguyen01
 
Advancing Engineering with AI through the Next Generation of Strategic Projec...
Advancing Engineering with AI through the Next Generation of Strategic Projec...Advancing Engineering with AI through the Next Generation of Strategic Projec...
Advancing Engineering with AI through the Next Generation of Strategic Projec...OnePlan Solutions
 
Adobe Marketo Engage Deep Dives: Using Webhooks to Transfer Data
Adobe Marketo Engage Deep Dives: Using Webhooks to Transfer DataAdobe Marketo Engage Deep Dives: Using Webhooks to Transfer Data
Adobe Marketo Engage Deep Dives: Using Webhooks to Transfer DataBradBedford3
 
(Genuine) Escort Service Lucknow | Starting ₹,5K To @25k with A/C 🧑🏽‍❤️‍🧑🏻 89...
(Genuine) Escort Service Lucknow | Starting ₹,5K To @25k with A/C 🧑🏽‍❤️‍🧑🏻 89...(Genuine) Escort Service Lucknow | Starting ₹,5K To @25k with A/C 🧑🏽‍❤️‍🧑🏻 89...
(Genuine) Escort Service Lucknow | Starting ₹,5K To @25k with A/C 🧑🏽‍❤️‍🧑🏻 89...gurkirankumar98700
 
Asset Management Software - Infographic
Asset Management Software - InfographicAsset Management Software - Infographic
Asset Management Software - InfographicHr365.us smith
 
Building Real-Time Data Pipelines: Stream & Batch Processing workshop Slide
Building Real-Time Data Pipelines: Stream & Batch Processing workshop SlideBuilding Real-Time Data Pipelines: Stream & Batch Processing workshop Slide
Building Real-Time Data Pipelines: Stream & Batch Processing workshop SlideChristina Lin
 
Engage Usergroup 2024 - The Good The Bad_The Ugly
Engage Usergroup 2024 - The Good The Bad_The UglyEngage Usergroup 2024 - The Good The Bad_The Ugly
Engage Usergroup 2024 - The Good The Bad_The UglyFrank van der Linden
 
Steps To Getting Up And Running Quickly With MyTimeClock Employee Scheduling ...
Steps To Getting Up And Running Quickly With MyTimeClock Employee Scheduling ...Steps To Getting Up And Running Quickly With MyTimeClock Employee Scheduling ...
Steps To Getting Up And Running Quickly With MyTimeClock Employee Scheduling ...MyIntelliSource, Inc.
 
Building a General PDE Solving Framework with Symbolic-Numeric Scientific Mac...
Building a General PDE Solving Framework with Symbolic-Numeric Scientific Mac...Building a General PDE Solving Framework with Symbolic-Numeric Scientific Mac...
Building a General PDE Solving Framework with Symbolic-Numeric Scientific Mac...stazi3110
 
Unlocking the Future of AI Agents with Large Language Models
Unlocking the Future of AI Agents with Large Language ModelsUnlocking the Future of AI Agents with Large Language Models
Unlocking the Future of AI Agents with Large Language Modelsaagamshah0812
 
Cloud Management Software Platforms: OpenStack
Cloud Management Software Platforms: OpenStackCloud Management Software Platforms: OpenStack
Cloud Management Software Platforms: OpenStackVICTOR MAESTRE RAMIREZ
 
TECUNIQUE: Success Stories: IT Service provider
TECUNIQUE: Success Stories: IT Service providerTECUNIQUE: Success Stories: IT Service provider
TECUNIQUE: Success Stories: IT Service providermohitmore19
 
chapter--4-software-project-planning.ppt
chapter--4-software-project-planning.pptchapter--4-software-project-planning.ppt
chapter--4-software-project-planning.pptkotipi9215
 
The Real-World Challenges of Medical Device Cybersecurity- Mitigating Vulnera...
The Real-World Challenges of Medical Device Cybersecurity- Mitigating Vulnera...The Real-World Challenges of Medical Device Cybersecurity- Mitigating Vulnera...
The Real-World Challenges of Medical Device Cybersecurity- Mitigating Vulnera...ICS
 
ODSC - Batch to Stream workshop - integration of Apache Spark, Cassandra, Pos...
ODSC - Batch to Stream workshop - integration of Apache Spark, Cassandra, Pos...ODSC - Batch to Stream workshop - integration of Apache Spark, Cassandra, Pos...
ODSC - Batch to Stream workshop - integration of Apache Spark, Cassandra, Pos...Christina Lin
 
Introduction to Decentralized Applications (dApps)
Introduction to Decentralized Applications (dApps)Introduction to Decentralized Applications (dApps)
Introduction to Decentralized Applications (dApps)Intelisync
 
Alluxio Monthly Webinar | Cloud-Native Model Training on Distributed Data
Alluxio Monthly Webinar | Cloud-Native Model Training on Distributed DataAlluxio Monthly Webinar | Cloud-Native Model Training on Distributed Data
Alluxio Monthly Webinar | Cloud-Native Model Training on Distributed DataAlluxio, Inc.
 

Dernier (20)

Professional Resume Template for Software Developers
Professional Resume Template for Software DevelopersProfessional Resume Template for Software Developers
Professional Resume Template for Software Developers
 
Short Story: Unveiling the Reasoning Abilities of Large Language Models by Ke...
Short Story: Unveiling the Reasoning Abilities of Large Language Models by Ke...Short Story: Unveiling the Reasoning Abilities of Large Language Models by Ke...
Short Story: Unveiling the Reasoning Abilities of Large Language Models by Ke...
 
Advancing Engineering with AI through the Next Generation of Strategic Projec...
Advancing Engineering with AI through the Next Generation of Strategic Projec...Advancing Engineering with AI through the Next Generation of Strategic Projec...
Advancing Engineering with AI through the Next Generation of Strategic Projec...
 
Adobe Marketo Engage Deep Dives: Using Webhooks to Transfer Data
Adobe Marketo Engage Deep Dives: Using Webhooks to Transfer DataAdobe Marketo Engage Deep Dives: Using Webhooks to Transfer Data
Adobe Marketo Engage Deep Dives: Using Webhooks to Transfer Data
 
(Genuine) Escort Service Lucknow | Starting ₹,5K To @25k with A/C 🧑🏽‍❤️‍🧑🏻 89...
(Genuine) Escort Service Lucknow | Starting ₹,5K To @25k with A/C 🧑🏽‍❤️‍🧑🏻 89...(Genuine) Escort Service Lucknow | Starting ₹,5K To @25k with A/C 🧑🏽‍❤️‍🧑🏻 89...
(Genuine) Escort Service Lucknow | Starting ₹,5K To @25k with A/C 🧑🏽‍❤️‍🧑🏻 89...
 
Asset Management Software - Infographic
Asset Management Software - InfographicAsset Management Software - Infographic
Asset Management Software - Infographic
 
Building Real-Time Data Pipelines: Stream & Batch Processing workshop Slide
Building Real-Time Data Pipelines: Stream & Batch Processing workshop SlideBuilding Real-Time Data Pipelines: Stream & Batch Processing workshop Slide
Building Real-Time Data Pipelines: Stream & Batch Processing workshop Slide
 
Engage Usergroup 2024 - The Good The Bad_The Ugly
Engage Usergroup 2024 - The Good The Bad_The UglyEngage Usergroup 2024 - The Good The Bad_The Ugly
Engage Usergroup 2024 - The Good The Bad_The Ugly
 
Steps To Getting Up And Running Quickly With MyTimeClock Employee Scheduling ...
Steps To Getting Up And Running Quickly With MyTimeClock Employee Scheduling ...Steps To Getting Up And Running Quickly With MyTimeClock Employee Scheduling ...
Steps To Getting Up And Running Quickly With MyTimeClock Employee Scheduling ...
 
Exploring iOS App Development: Simplifying the Process
Exploring iOS App Development: Simplifying the ProcessExploring iOS App Development: Simplifying the Process
Exploring iOS App Development: Simplifying the Process
 
Building a General PDE Solving Framework with Symbolic-Numeric Scientific Mac...
Building a General PDE Solving Framework with Symbolic-Numeric Scientific Mac...Building a General PDE Solving Framework with Symbolic-Numeric Scientific Mac...
Building a General PDE Solving Framework with Symbolic-Numeric Scientific Mac...
 
Unlocking the Future of AI Agents with Large Language Models
Unlocking the Future of AI Agents with Large Language ModelsUnlocking the Future of AI Agents with Large Language Models
Unlocking the Future of AI Agents with Large Language Models
 
Cloud Management Software Platforms: OpenStack
Cloud Management Software Platforms: OpenStackCloud Management Software Platforms: OpenStack
Cloud Management Software Platforms: OpenStack
 
TECUNIQUE: Success Stories: IT Service provider
TECUNIQUE: Success Stories: IT Service providerTECUNIQUE: Success Stories: IT Service provider
TECUNIQUE: Success Stories: IT Service provider
 
chapter--4-software-project-planning.ppt
chapter--4-software-project-planning.pptchapter--4-software-project-planning.ppt
chapter--4-software-project-planning.ppt
 
Call Girls In Mukherjee Nagar 📱 9999965857 🤩 Delhi 🫦 HOT AND SEXY VVIP 🍎 SE...
Call Girls In Mukherjee Nagar 📱  9999965857  🤩 Delhi 🫦 HOT AND SEXY VVIP 🍎 SE...Call Girls In Mukherjee Nagar 📱  9999965857  🤩 Delhi 🫦 HOT AND SEXY VVIP 🍎 SE...
Call Girls In Mukherjee Nagar 📱 9999965857 🤩 Delhi 🫦 HOT AND SEXY VVIP 🍎 SE...
 
The Real-World Challenges of Medical Device Cybersecurity- Mitigating Vulnera...
The Real-World Challenges of Medical Device Cybersecurity- Mitigating Vulnera...The Real-World Challenges of Medical Device Cybersecurity- Mitigating Vulnera...
The Real-World Challenges of Medical Device Cybersecurity- Mitigating Vulnera...
 
ODSC - Batch to Stream workshop - integration of Apache Spark, Cassandra, Pos...
ODSC - Batch to Stream workshop - integration of Apache Spark, Cassandra, Pos...ODSC - Batch to Stream workshop - integration of Apache Spark, Cassandra, Pos...
ODSC - Batch to Stream workshop - integration of Apache Spark, Cassandra, Pos...
 
Introduction to Decentralized Applications (dApps)
Introduction to Decentralized Applications (dApps)Introduction to Decentralized Applications (dApps)
Introduction to Decentralized Applications (dApps)
 
Alluxio Monthly Webinar | Cloud-Native Model Training on Distributed Data
Alluxio Monthly Webinar | Cloud-Native Model Training on Distributed DataAlluxio Monthly Webinar | Cloud-Native Model Training on Distributed Data
Alluxio Monthly Webinar | Cloud-Native Model Training on Distributed Data
 

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