SlideShare a Scribd company logo
1 of 32
Download to read offline
Ionic 2
The world's most popular cross-platform mobile development technology
What is Ionic Framework?
IonicFramework is an open source SDK that enables developersto
build performant, high-qualitymobileapps using familiarweb
technologies(HTML, CSS, and JavaScript).
Ionicis focused mainlyon the lookand feel, or the UI interaction,of
an app.
Ioniccurrently requires Angular in order to work at its full potential
Who is behind Ionic?
Ionicwas originallybuilt by BenSperry , Adam Bradley and Max
Lynch.
After releasingan alphaversion of Ionicin November 2013, they
released a 1.0 beta in March 2014 and a 1.0 finalin May2015.
In 2015 Ionic developersreportedly created over 1.3M apps with
Ionic, a number that continuesto grow each day.
What is cross-platform mobile development ?
Cross-platformmobiledevelopment refers to the development of
mobile appsthat can be used on multiple mobile platforms.
Multiple
devices
One
Code
HTML
JS
CSS
Build
Android
IOS
Windows Phone
Mobile Apps Types
Native Application - Android, IOS andWindows Phone
Code for every platform, Three developers
Hybrid Application - hybridmobile apps are built with a
combinationofweb technologieslikeHTML, CSS, and JavaScript.
The keydifferenceis that hybridapps are hosted insidea native
applicationthat utilizes a mobile platform’sWebView
One code , One developer
Cross-platform Approaches
Generate Native Application -Titanium & NativeScript
Generate Hybrid Application - Cordova , PhoneGap , Meteor and
Ionic.
All ofThem were buildingonCordova
Hybrid Application - Cordova
Hybrid Application - Cordova
WebView
The Cordova-enabledWebView may provide the applicationwith its entire user interface.
On some platforms, it can also be a component within a larger, hybrid applicationthat
mixes the WebView with native applicationcomponents.
Web App
This is the part where your applicationcode resides.The applicationitself is implemented
as a web page, by default a local file named index.html, that references CSS, JavaScript,
images, media files, or other resources are necessary for it to run. The app executes in
a WebView within the native applicationwrapper, which youdistribute to app stores
Hybrid Application - Cordova
Plugins
Plugins are an integral part of theCordova ecosystem.They provide aninterface for
Cordova and native components to communicate with each other and bindings to
standard deviceAPIs. This enables you to invoke native code from JavaScript.
ApacheCordova project maintains a set of plugins called theCore Plugins. These core
plugins provide your applicationto access device capabilities such as battery, camera,
contacts, etc.
Hybrid Application - Cordova
Plugins
Plugins are an integral part of theCordova ecosystem.They provide aninterface for
Cordova and native components to communicate with each other and bindings to
standard deviceAPIs. This enables you to invoke native code from JavaScript.
ApacheCordova project maintains a set of plugins called theCore Plugins. These core
plugins provide your applicationto access device capabilities such as battery, camera,
contacts, etc.
Back To Ionic 2
Ionic 2
OpenSource Cross Platform Mobile Development framework .
Built onCordova
Generate Hybrid MobileApps
Using Angular 2 forUI
Components ThemingCLI navigation
Back To Ionic 2
Ionic 2
OpenSource Cross Platform Mobile Development framework .
Built onCordova
Generate Hybrid MobileApps
Using Angular 2 forUI
Components ThemingCLI navigation
Ionic 2 - Concepts
CLI - TheCLI, or command line interface, is a tool that provides a number of helpful
commands to Ionic developers. In additionto installing and updating Ionic, the CLI comes
with a built-in development server, build and debugging tools, and much more. If you are
using the Ionic Cloud, the CLI can be used to export code and even interact with your
account programmatically.
Components- Components in Ionic are reusable UI elements that serve as the building
blocks for your mobile app.Components are made up of HTML, CSS, and sometimes
JavaScript. Every Ionic component adapts to the platform onwhich your app is running.
We call this Platform Continuity and go more in depth on how it works inTheming.
Ionic 2 - Concepts
Themes - Themes are sets of styles that get applied to an app. Ionic uses a light theme by
default, but it also comes with a dark theme. In additionto theming, Ionic’s Platform
Continuity enables components to have platform-specific styles.This means the app’s
styles will change based on the platform (iOS, Android, etc.) on which it’s being run,
offering your users an experience with which they’re familiar.
Navigation - Navigationworks like a stack — push a page to the stack to navigate to it,
and pop to go back.
Installing Ionic
Ionic CLI and Cordova
To create Ionic projects, you’ll need to install the latest version of the CLI and Cordova.
Before youdo that, you’ll need a recent version of Node.js.
npm install-g ioniccordova
PlatformGuides:
to build Native Android Application, youneed JAVA & Android SDK
to build Native IOS Application, youneed Objective C or Swift & XCode.
To build HybridCross MobileApplicationUsing Cordova , youneed (HTML,CSS,JS)
and Android SDK and XCode
Android Platform
Download Java Development Kit
Install Java Development Kit (JDK) 8 or later.
Download Android SDK from
https://dl.google.com/android/repository/sdk-tools-linux-3859397.zip
After installing the Android SDK, youmust also install the packages for whateverAPI
level youwish to target. It is recommended that youinstall the highest SDK version
Set Environment Variables
Set theJAVA_HOME environment variable to thelocationof yourJDK installation
Set theANDROID_HOME environment variable to thelocationof yourAndroid SDKinstallation
It is also recommended that you add theAndroid SDK's tools,tools/bin, and platform-
toolsdirectories to your PATH
Android Platform
Set Environment Variables
Set theJAVA_HOME environment variable to thelocationof yourJDK installation
Set theANDROID_HOME environment variable to thelocationof yourAndroid SDKinstallation
It is also recommended that you add theAndroid SDK's tools,tools/bin, and platform-
toolsdirectories to your PATH
Create First Ionic 2 App
Starting a new application, adding pages, navigating between those pages
Ionic uses TypeScript for its code
$ ionic start MyIonicProject tutorial
From your terminal , run this command
Ionic 2 App Templates
$ ionic start MyIonicProject tutorial –v2
Ionic 2 App Run
$ ionic cd MyIonicProject $ ionic serve
serve command run
web view application
To run your Ionic applicationon platform youmust add this platform before
$ ionic platform add android $ ionic platform add ios
Then
$ ionic run android $ ionic run ios
Project Structure
project directory
platforms
plugins
src
resources
www
config.xml
Project Structure – src folder
./src/index.html
src/index.html is the main entry point for the app, though its purpose is to set up
script and CSS includes and bootstrap, or start running, our app.
<ion-app></ion-app>
And the following scripts near the bottom:
<script src="cordova.js"></script>
<script src="build/ main.js"></script>
Project Structure – src folder
./src/
Inside of the src directory we find our raw, uncompiled code.This is where most of
the work for anIonic app will take place.Whenwe run ionic serve, our code inside
of src/ is transpiled into the correct Javascript version that the browser understands
(currently, ES5).That means we can work at a higher level using TypeScript, but
compile downto the older form of Javascript the browser needs.
src/app/app.module.ts is the entry point for our app.
Project Structure – src/app/app.module.ts
Every app has a root module that essentially controls the rest of the application
Project Structure – src/app/app.module.ts
Every app has a root module that essentially controls the rest of the application
In thismodule, we’re setting theroot component to MyApp, in src/app/app.component.ts. This
is thefirst component that gets loaded in our app, and typically it’s an empty shell for other
componentsto beloaded into. In app.component.ts, we’re setting our template to
src/app/app.html
Project Structure – Bootstrap
MyApp
(root comp)
app.component.ts
app.html
app.scss
app.module.ts
(root module)
load
other project’s pages
(Components)
load
Project Structure – Root Component
app.component.ts
rootPage:any = HomePage;
app.html
<ion-nav [root]="rootPage"></ion-nav>
app.scss
For global style
Angular 2 two way data
binding
Creating a Page
this command will create folder under this path ./src/pages/ with page name
each page will has three files
• page_name.ts
• page_name.html
• page_name.scss
$ ionic g page page_name
Each page in Ionic 2 will be like Angular 2 Component
To use this page in other page youshould import it first in app.module.ts
declarations and entryComponents (Factory Design Pattern)
Navigating to Pages
Navigationin Ionic works like a simple stack, where we push new pages onto the top
of the stack, which takes us forwards in the app and shows a back button.To go
backwards, we pop the top page off. Since we set this.navCtrl in the constructor, we
can call this.navCtrl.push(), and pass it the page we want to navigate to. We can also
pass it an object containing data we would like to pass to the page being navigated
to
Ionic 2 – Road Map
Ionic UI
Components
Ionic UI
Components
API’s
Ionic Native
Mobile
Functions
Do Behavior and
customize each
component.
Ionic 2 – Ionic UI Components
Ionic apps are made of high-level building blocks called components. Components
allow you to quickly construct an interface for your app. Ionic comes with a number
of components, including modals, popups, and cards
• Grid
• Inputs
• List
• Menus
• Loading
• Alert
• Toast
• Select
• Card
• Modals
• Navigation
• Icons
• Fabs
• Checkbox
• DateTime
• Buttons
• Tabs
• Radio
• Slides
• Segment
• Rang
• Toggle
• Toolbar
• Search Bar
Ionic 2 – Demo
Create MobileApp & using all Ionic 2 UIComponent
http://ionicframework.com/docs/components

More Related Content

What's hot

Applications Development
Applications DevelopmentApplications Development
Applications DevelopmentThe Sapper UAE
 
Wearables + Azure development
Wearables + Azure developmentWearables + Azure development
Wearables + Azure developmentAndri Yadi
 
VyAPI - A Modern Cloud Based Vulnerable Android App (Presented at c0c0n XII)
VyAPI - A Modern Cloud Based Vulnerable Android App (Presented at c0c0n XII)VyAPI - A Modern Cloud Based Vulnerable Android App (Presented at c0c0n XII)
VyAPI - A Modern Cloud Based Vulnerable Android App (Presented at c0c0n XII)Riddhi Shree
 
The unconventional devices for the Android video streaming
The unconventional devices for the Android video streamingThe unconventional devices for the Android video streaming
The unconventional devices for the Android video streamingMatteo Bonifazi
 
MOCA iBeacons SDK for iOS 7
MOCA iBeacons SDK for iOS 7MOCA iBeacons SDK for iOS 7
MOCA iBeacons SDK for iOS 7MOCA Platform
 
Mobile Application testing- All you want to know to get started!!
Mobile Application testing- All you want to know to get started!!Mobile Application testing- All you want to know to get started!!
Mobile Application testing- All you want to know to get started!!Neha Thakur
 
Wi engine 3
Wi engine 3Wi engine 3
Wi engine 3slsh123
 
Native Android Development with Spring
Native Android Development with SpringNative Android Development with Spring
Native Android Development with SpringRoy Clarkson
 

What's hot (8)

Applications Development
Applications DevelopmentApplications Development
Applications Development
 
Wearables + Azure development
Wearables + Azure developmentWearables + Azure development
Wearables + Azure development
 
VyAPI - A Modern Cloud Based Vulnerable Android App (Presented at c0c0n XII)
VyAPI - A Modern Cloud Based Vulnerable Android App (Presented at c0c0n XII)VyAPI - A Modern Cloud Based Vulnerable Android App (Presented at c0c0n XII)
VyAPI - A Modern Cloud Based Vulnerable Android App (Presented at c0c0n XII)
 
The unconventional devices for the Android video streaming
The unconventional devices for the Android video streamingThe unconventional devices for the Android video streaming
The unconventional devices for the Android video streaming
 
MOCA iBeacons SDK for iOS 7
MOCA iBeacons SDK for iOS 7MOCA iBeacons SDK for iOS 7
MOCA iBeacons SDK for iOS 7
 
Mobile Application testing- All you want to know to get started!!
Mobile Application testing- All you want to know to get started!!Mobile Application testing- All you want to know to get started!!
Mobile Application testing- All you want to know to get started!!
 
Wi engine 3
Wi engine 3Wi engine 3
Wi engine 3
 
Native Android Development with Spring
Native Android Development with SpringNative Android Development with Spring
Native Android Development with Spring
 

Similar to Ionic2 First Lesson of Four

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
 
Real World ionic Development
Real World ionic DevelopmentReal World ionic Development
Real World ionic DevelopmentChris Griffith
 
Rapid mobile app development using Ionic framework
Rapid mobile app development using Ionic frameworkRapid mobile app development using Ionic framework
Rapid mobile app development using Ionic frameworkSwaminathan Vetri
 
IONIC VS. REACT NATIVE – WHICH FRAMEWORK IS BETTER FOR CROSS-PLATFORM MOBILE ...
IONIC VS. REACT NATIVE – WHICH FRAMEWORK IS BETTER FOR CROSS-PLATFORM MOBILE ...IONIC VS. REACT NATIVE – WHICH FRAMEWORK IS BETTER FOR CROSS-PLATFORM MOBILE ...
IONIC VS. REACT NATIVE – WHICH FRAMEWORK IS BETTER FOR CROSS-PLATFORM MOBILE ...Laura Miller
 
Introduction To Ionic3
Introduction To Ionic3Introduction To Ionic3
Introduction To Ionic3Knoldus Inc.
 
Ionic Mobile Applications - Hybrid Mobile Applications Without Compromises
Ionic Mobile Applications - Hybrid Mobile Applications Without CompromisesIonic Mobile Applications - Hybrid Mobile Applications Without Compromises
Ionic Mobile Applications - Hybrid Mobile Applications Without CompromisesJacob Friesen
 
Titanium Studio [Updated - 18/12/2011]
Titanium Studio [Updated - 18/12/2011]Titanium Studio [Updated - 18/12/2011]
Titanium Studio [Updated - 18/12/2011]Sentinel Solutions Ltd
 
Common Ionic Development Mistakes Developers Tend To Make!
Common Ionic Development Mistakes Developers Tend To Make!Common Ionic Development Mistakes Developers Tend To Make!
Common Ionic Development Mistakes Developers Tend To Make!Techugo
 
Hybrid Mobile Apps - Meetup
Hybrid Mobile Apps - MeetupHybrid Mobile Apps - Meetup
Hybrid Mobile Apps - MeetupSanjay Patel
 
Building Mobile Apps With Ionic & Loopback
Building Mobile Apps With Ionic & LoopbackBuilding Mobile Apps With Ionic & Loopback
Building Mobile Apps With Ionic & LoopbackChibuzor Obiora
 
iOS-iPhone documentation
iOS-iPhone documentationiOS-iPhone documentation
iOS-iPhone documentationRaj Dubey
 
Cross-Platform Development using Angulr JS in Visual Studio
Cross-Platform Development using Angulr JS in Visual StudioCross-Platform Development using Angulr JS in Visual Studio
Cross-Platform Development using Angulr JS in Visual StudioMizanur Sarker
 
Developing ionic apps for android and ios
Developing ionic apps for android and iosDeveloping ionic apps for android and ios
Developing ionic apps for android and iosgautham_m79
 
Workshop on Hybrid App Development with Ionic Framework
Workshop on Hybrid App Development with Ionic FrameworkWorkshop on Hybrid App Development with Ionic Framework
Workshop on Hybrid App Development with Ionic FrameworkAayush Shrestha
 

Similar to Ionic2 First Lesson of Four (20)

Ionic
IonicIonic
Ionic
 
Ionic Framework
Ionic FrameworkIonic Framework
Ionic Framework
 
An overview of Ionic
An overview of IonicAn overview of Ionic
An overview of Ionic
 
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
 
Real World ionic Development
Real World ionic DevelopmentReal World ionic Development
Real World ionic Development
 
Ionic framework
Ionic frameworkIonic framework
Ionic framework
 
Rapid mobile app development using Ionic framework
Rapid mobile app development using Ionic frameworkRapid mobile app development using Ionic framework
Rapid mobile app development using Ionic framework
 
IONIC VS. REACT NATIVE – WHICH FRAMEWORK IS BETTER FOR CROSS-PLATFORM MOBILE ...
IONIC VS. REACT NATIVE – WHICH FRAMEWORK IS BETTER FOR CROSS-PLATFORM MOBILE ...IONIC VS. REACT NATIVE – WHICH FRAMEWORK IS BETTER FOR CROSS-PLATFORM MOBILE ...
IONIC VS. REACT NATIVE – WHICH FRAMEWORK IS BETTER FOR CROSS-PLATFORM MOBILE ...
 
Introduction To Ionic3
Introduction To Ionic3Introduction To Ionic3
Introduction To Ionic3
 
Ionic Mobile Applications - Hybrid Mobile Applications Without Compromises
Ionic Mobile Applications - Hybrid Mobile Applications Without CompromisesIonic Mobile Applications - Hybrid Mobile Applications Without Compromises
Ionic Mobile Applications - Hybrid Mobile Applications Without Compromises
 
Titanium Studio [Updated - 18/12/2011]
Titanium Studio [Updated - 18/12/2011]Titanium Studio [Updated - 18/12/2011]
Titanium Studio [Updated - 18/12/2011]
 
Common Ionic Development Mistakes Developers Tend To Make!
Common Ionic Development Mistakes Developers Tend To Make!Common Ionic Development Mistakes Developers Tend To Make!
Common Ionic Development Mistakes Developers Tend To Make!
 
Hybrid Mobile Apps - Meetup
Hybrid Mobile Apps - MeetupHybrid Mobile Apps - Meetup
Hybrid Mobile Apps - Meetup
 
Building Mobile Apps With Ionic & Loopback
Building Mobile Apps With Ionic & LoopbackBuilding Mobile Apps With Ionic & Loopback
Building Mobile Apps With Ionic & Loopback
 
iOS-iPhone documentation
iOS-iPhone documentationiOS-iPhone documentation
iOS-iPhone documentation
 
Cross-Platform Development using Angulr JS in Visual Studio
Cross-Platform Development using Angulr JS in Visual StudioCross-Platform Development using Angulr JS in Visual Studio
Cross-Platform Development using Angulr JS in Visual Studio
 
Ionic Framework
Ionic FrameworkIonic Framework
Ionic Framework
 
Developing ionic apps for android and ios
Developing ionic apps for android and iosDeveloping ionic apps for android and ios
Developing ionic apps for android and ios
 
Workshop on Hybrid App Development with Ionic Framework
Workshop on Hybrid App Development with Ionic FrameworkWorkshop on Hybrid App Development with Ionic Framework
Workshop on Hybrid App Development with Ionic Framework
 
Codename one
Codename oneCodename one
Codename one
 

Recently uploaded

4.16.24 Poverty and Precarity--Desmond.pptx
4.16.24 Poverty and Precarity--Desmond.pptx4.16.24 Poverty and Precarity--Desmond.pptx
4.16.24 Poverty and Precarity--Desmond.pptxmary850239
 
DIFFERENT BASKETRY IN THE PHILIPPINES PPT.pptx
DIFFERENT BASKETRY IN THE PHILIPPINES PPT.pptxDIFFERENT BASKETRY IN THE PHILIPPINES PPT.pptx
DIFFERENT BASKETRY IN THE PHILIPPINES PPT.pptxMichelleTuguinay1
 
ICS2208 Lecture6 Notes for SL spaces.pdf
ICS2208 Lecture6 Notes for SL spaces.pdfICS2208 Lecture6 Notes for SL spaces.pdf
ICS2208 Lecture6 Notes for SL spaces.pdfVanessa Camilleri
 
AUDIENCE THEORY -CULTIVATION THEORY - GERBNER.pptx
AUDIENCE THEORY -CULTIVATION THEORY -  GERBNER.pptxAUDIENCE THEORY -CULTIVATION THEORY -  GERBNER.pptx
AUDIENCE THEORY -CULTIVATION THEORY - GERBNER.pptxiammrhaywood
 
week 1 cookery 8 fourth - quarter .pptx
week 1 cookery 8  fourth  -  quarter .pptxweek 1 cookery 8  fourth  -  quarter .pptx
week 1 cookery 8 fourth - quarter .pptxJonalynLegaspi2
 
ANG SEKTOR NG agrikultura.pptx QUARTER 4
ANG SEKTOR NG agrikultura.pptx QUARTER 4ANG SEKTOR NG agrikultura.pptx QUARTER 4
ANG SEKTOR NG agrikultura.pptx QUARTER 4MiaBumagat1
 
Team Lead Succeed – Helping you and your team achieve high-performance teamwo...
Team Lead Succeed – Helping you and your team achieve high-performance teamwo...Team Lead Succeed – Helping you and your team achieve high-performance teamwo...
Team Lead Succeed – Helping you and your team achieve high-performance teamwo...Association for Project Management
 
Using Grammatical Signals Suitable to Patterns of Idea Development
Using Grammatical Signals Suitable to Patterns of Idea DevelopmentUsing Grammatical Signals Suitable to Patterns of Idea Development
Using Grammatical Signals Suitable to Patterns of Idea Developmentchesterberbo7
 
THEORIES OF ORGANIZATION-PUBLIC ADMINISTRATION
THEORIES OF ORGANIZATION-PUBLIC ADMINISTRATIONTHEORIES OF ORGANIZATION-PUBLIC ADMINISTRATION
THEORIES OF ORGANIZATION-PUBLIC ADMINISTRATIONHumphrey A Beña
 
IPCRF/RPMS 2024 Classroom Observation tool is your access to the new performa...
IPCRF/RPMS 2024 Classroom Observation tool is your access to the new performa...IPCRF/RPMS 2024 Classroom Observation tool is your access to the new performa...
IPCRF/RPMS 2024 Classroom Observation tool is your access to the new performa...MerlizValdezGeronimo
 
Choosing the Right CBSE School A Comprehensive Guide for Parents
Choosing the Right CBSE School A Comprehensive Guide for ParentsChoosing the Right CBSE School A Comprehensive Guide for Parents
Choosing the Right CBSE School A Comprehensive Guide for Parentsnavabharathschool99
 
Q-Factor HISPOL Quiz-6th April 2024, Quiz Club NITW
Q-Factor HISPOL Quiz-6th April 2024, Quiz Club NITWQ-Factor HISPOL Quiz-6th April 2024, Quiz Club NITW
Q-Factor HISPOL Quiz-6th April 2024, Quiz Club NITWQuiz Club NITW
 
Reading and Writing Skills 11 quarter 4 melc 1
Reading and Writing Skills 11 quarter 4 melc 1Reading and Writing Skills 11 quarter 4 melc 1
Reading and Writing Skills 11 quarter 4 melc 1GloryAnnCastre1
 
Grade 9 Quarter 4 Dll Grade 9 Quarter 4 DLL.pdf
Grade 9 Quarter 4 Dll Grade 9 Quarter 4 DLL.pdfGrade 9 Quarter 4 Dll Grade 9 Quarter 4 DLL.pdf
Grade 9 Quarter 4 Dll Grade 9 Quarter 4 DLL.pdfJemuel Francisco
 
Measures of Position DECILES for ungrouped data
Measures of Position DECILES for ungrouped dataMeasures of Position DECILES for ungrouped data
Measures of Position DECILES for ungrouped dataBabyAnnMotar
 
Daily Lesson Plan in Mathematics Quarter 4
Daily Lesson Plan in Mathematics Quarter 4Daily Lesson Plan in Mathematics Quarter 4
Daily Lesson Plan in Mathematics Quarter 4JOYLYNSAMANIEGO
 
Inclusivity Essentials_ Creating Accessible Websites for Nonprofits .pdf
Inclusivity Essentials_ Creating Accessible Websites for Nonprofits .pdfInclusivity Essentials_ Creating Accessible Websites for Nonprofits .pdf
Inclusivity Essentials_ Creating Accessible Websites for Nonprofits .pdfTechSoup
 
How to Make a Duplicate of Your Odoo 17 Database
How to Make a Duplicate of Your Odoo 17 DatabaseHow to Make a Duplicate of Your Odoo 17 Database
How to Make a Duplicate of Your Odoo 17 DatabaseCeline George
 
4.18.24 Movement Legacies, Reflection, and Review.pptx
4.18.24 Movement Legacies, Reflection, and Review.pptx4.18.24 Movement Legacies, Reflection, and Review.pptx
4.18.24 Movement Legacies, Reflection, and Review.pptxmary850239
 

Recently uploaded (20)

Paradigm shift in nursing research by RS MEHTA
Paradigm shift in nursing research by RS MEHTAParadigm shift in nursing research by RS MEHTA
Paradigm shift in nursing research by RS MEHTA
 
4.16.24 Poverty and Precarity--Desmond.pptx
4.16.24 Poverty and Precarity--Desmond.pptx4.16.24 Poverty and Precarity--Desmond.pptx
4.16.24 Poverty and Precarity--Desmond.pptx
 
DIFFERENT BASKETRY IN THE PHILIPPINES PPT.pptx
DIFFERENT BASKETRY IN THE PHILIPPINES PPT.pptxDIFFERENT BASKETRY IN THE PHILIPPINES PPT.pptx
DIFFERENT BASKETRY IN THE PHILIPPINES PPT.pptx
 
ICS2208 Lecture6 Notes for SL spaces.pdf
ICS2208 Lecture6 Notes for SL spaces.pdfICS2208 Lecture6 Notes for SL spaces.pdf
ICS2208 Lecture6 Notes for SL spaces.pdf
 
AUDIENCE THEORY -CULTIVATION THEORY - GERBNER.pptx
AUDIENCE THEORY -CULTIVATION THEORY -  GERBNER.pptxAUDIENCE THEORY -CULTIVATION THEORY -  GERBNER.pptx
AUDIENCE THEORY -CULTIVATION THEORY - GERBNER.pptx
 
week 1 cookery 8 fourth - quarter .pptx
week 1 cookery 8  fourth  -  quarter .pptxweek 1 cookery 8  fourth  -  quarter .pptx
week 1 cookery 8 fourth - quarter .pptx
 
ANG SEKTOR NG agrikultura.pptx QUARTER 4
ANG SEKTOR NG agrikultura.pptx QUARTER 4ANG SEKTOR NG agrikultura.pptx QUARTER 4
ANG SEKTOR NG agrikultura.pptx QUARTER 4
 
Team Lead Succeed – Helping you and your team achieve high-performance teamwo...
Team Lead Succeed – Helping you and your team achieve high-performance teamwo...Team Lead Succeed – Helping you and your team achieve high-performance teamwo...
Team Lead Succeed – Helping you and your team achieve high-performance teamwo...
 
Using Grammatical Signals Suitable to Patterns of Idea Development
Using Grammatical Signals Suitable to Patterns of Idea DevelopmentUsing Grammatical Signals Suitable to Patterns of Idea Development
Using Grammatical Signals Suitable to Patterns of Idea Development
 
THEORIES OF ORGANIZATION-PUBLIC ADMINISTRATION
THEORIES OF ORGANIZATION-PUBLIC ADMINISTRATIONTHEORIES OF ORGANIZATION-PUBLIC ADMINISTRATION
THEORIES OF ORGANIZATION-PUBLIC ADMINISTRATION
 
IPCRF/RPMS 2024 Classroom Observation tool is your access to the new performa...
IPCRF/RPMS 2024 Classroom Observation tool is your access to the new performa...IPCRF/RPMS 2024 Classroom Observation tool is your access to the new performa...
IPCRF/RPMS 2024 Classroom Observation tool is your access to the new performa...
 
Choosing the Right CBSE School A Comprehensive Guide for Parents
Choosing the Right CBSE School A Comprehensive Guide for ParentsChoosing the Right CBSE School A Comprehensive Guide for Parents
Choosing the Right CBSE School A Comprehensive Guide for Parents
 
Q-Factor HISPOL Quiz-6th April 2024, Quiz Club NITW
Q-Factor HISPOL Quiz-6th April 2024, Quiz Club NITWQ-Factor HISPOL Quiz-6th April 2024, Quiz Club NITW
Q-Factor HISPOL Quiz-6th April 2024, Quiz Club NITW
 
Reading and Writing Skills 11 quarter 4 melc 1
Reading and Writing Skills 11 quarter 4 melc 1Reading and Writing Skills 11 quarter 4 melc 1
Reading and Writing Skills 11 quarter 4 melc 1
 
Grade 9 Quarter 4 Dll Grade 9 Quarter 4 DLL.pdf
Grade 9 Quarter 4 Dll Grade 9 Quarter 4 DLL.pdfGrade 9 Quarter 4 Dll Grade 9 Quarter 4 DLL.pdf
Grade 9 Quarter 4 Dll Grade 9 Quarter 4 DLL.pdf
 
Measures of Position DECILES for ungrouped data
Measures of Position DECILES for ungrouped dataMeasures of Position DECILES for ungrouped data
Measures of Position DECILES for ungrouped data
 
Daily Lesson Plan in Mathematics Quarter 4
Daily Lesson Plan in Mathematics Quarter 4Daily Lesson Plan in Mathematics Quarter 4
Daily Lesson Plan in Mathematics Quarter 4
 
Inclusivity Essentials_ Creating Accessible Websites for Nonprofits .pdf
Inclusivity Essentials_ Creating Accessible Websites for Nonprofits .pdfInclusivity Essentials_ Creating Accessible Websites for Nonprofits .pdf
Inclusivity Essentials_ Creating Accessible Websites for Nonprofits .pdf
 
How to Make a Duplicate of Your Odoo 17 Database
How to Make a Duplicate of Your Odoo 17 DatabaseHow to Make a Duplicate of Your Odoo 17 Database
How to Make a Duplicate of Your Odoo 17 Database
 
4.18.24 Movement Legacies, Reflection, and Review.pptx
4.18.24 Movement Legacies, Reflection, and Review.pptx4.18.24 Movement Legacies, Reflection, and Review.pptx
4.18.24 Movement Legacies, Reflection, and Review.pptx
 

Ionic2 First Lesson of Four

  • 1. Ionic 2 The world's most popular cross-platform mobile development technology
  • 2. What is Ionic Framework? IonicFramework is an open source SDK that enables developersto build performant, high-qualitymobileapps using familiarweb technologies(HTML, CSS, and JavaScript). Ionicis focused mainlyon the lookand feel, or the UI interaction,of an app. Ioniccurrently requires Angular in order to work at its full potential
  • 3. Who is behind Ionic? Ionicwas originallybuilt by BenSperry , Adam Bradley and Max Lynch. After releasingan alphaversion of Ionicin November 2013, they released a 1.0 beta in March 2014 and a 1.0 finalin May2015. In 2015 Ionic developersreportedly created over 1.3M apps with Ionic, a number that continuesto grow each day.
  • 4. What is cross-platform mobile development ? Cross-platformmobiledevelopment refers to the development of mobile appsthat can be used on multiple mobile platforms. Multiple devices One Code HTML JS CSS Build Android IOS Windows Phone
  • 5. Mobile Apps Types Native Application - Android, IOS andWindows Phone Code for every platform, Three developers Hybrid Application - hybridmobile apps are built with a combinationofweb technologieslikeHTML, CSS, and JavaScript. The keydifferenceis that hybridapps are hosted insidea native applicationthat utilizes a mobile platform’sWebView One code , One developer
  • 6. Cross-platform Approaches Generate Native Application -Titanium & NativeScript Generate Hybrid Application - Cordova , PhoneGap , Meteor and Ionic. All ofThem were buildingonCordova
  • 8. Hybrid Application - Cordova WebView The Cordova-enabledWebView may provide the applicationwith its entire user interface. On some platforms, it can also be a component within a larger, hybrid applicationthat mixes the WebView with native applicationcomponents. Web App This is the part where your applicationcode resides.The applicationitself is implemented as a web page, by default a local file named index.html, that references CSS, JavaScript, images, media files, or other resources are necessary for it to run. The app executes in a WebView within the native applicationwrapper, which youdistribute to app stores
  • 9. Hybrid Application - Cordova Plugins Plugins are an integral part of theCordova ecosystem.They provide aninterface for Cordova and native components to communicate with each other and bindings to standard deviceAPIs. This enables you to invoke native code from JavaScript. ApacheCordova project maintains a set of plugins called theCore Plugins. These core plugins provide your applicationto access device capabilities such as battery, camera, contacts, etc.
  • 10. Hybrid Application - Cordova Plugins Plugins are an integral part of theCordova ecosystem.They provide aninterface for Cordova and native components to communicate with each other and bindings to standard deviceAPIs. This enables you to invoke native code from JavaScript. ApacheCordova project maintains a set of plugins called theCore Plugins. These core plugins provide your applicationto access device capabilities such as battery, camera, contacts, etc.
  • 11. Back To Ionic 2 Ionic 2 OpenSource Cross Platform Mobile Development framework . Built onCordova Generate Hybrid MobileApps Using Angular 2 forUI Components ThemingCLI navigation
  • 12. Back To Ionic 2 Ionic 2 OpenSource Cross Platform Mobile Development framework . Built onCordova Generate Hybrid MobileApps Using Angular 2 forUI Components ThemingCLI navigation
  • 13. Ionic 2 - Concepts CLI - TheCLI, or command line interface, is a tool that provides a number of helpful commands to Ionic developers. In additionto installing and updating Ionic, the CLI comes with a built-in development server, build and debugging tools, and much more. If you are using the Ionic Cloud, the CLI can be used to export code and even interact with your account programmatically. Components- Components in Ionic are reusable UI elements that serve as the building blocks for your mobile app.Components are made up of HTML, CSS, and sometimes JavaScript. Every Ionic component adapts to the platform onwhich your app is running. We call this Platform Continuity and go more in depth on how it works inTheming.
  • 14. Ionic 2 - Concepts Themes - Themes are sets of styles that get applied to an app. Ionic uses a light theme by default, but it also comes with a dark theme. In additionto theming, Ionic’s Platform Continuity enables components to have platform-specific styles.This means the app’s styles will change based on the platform (iOS, Android, etc.) on which it’s being run, offering your users an experience with which they’re familiar. Navigation - Navigationworks like a stack — push a page to the stack to navigate to it, and pop to go back.
  • 15. Installing Ionic Ionic CLI and Cordova To create Ionic projects, you’ll need to install the latest version of the CLI and Cordova. Before youdo that, you’ll need a recent version of Node.js. npm install-g ioniccordova PlatformGuides: to build Native Android Application, youneed JAVA & Android SDK to build Native IOS Application, youneed Objective C or Swift & XCode. To build HybridCross MobileApplicationUsing Cordova , youneed (HTML,CSS,JS) and Android SDK and XCode
  • 16. Android Platform Download Java Development Kit Install Java Development Kit (JDK) 8 or later. Download Android SDK from https://dl.google.com/android/repository/sdk-tools-linux-3859397.zip After installing the Android SDK, youmust also install the packages for whateverAPI level youwish to target. It is recommended that youinstall the highest SDK version Set Environment Variables Set theJAVA_HOME environment variable to thelocationof yourJDK installation Set theANDROID_HOME environment variable to thelocationof yourAndroid SDKinstallation It is also recommended that you add theAndroid SDK's tools,tools/bin, and platform- toolsdirectories to your PATH
  • 17. Android Platform Set Environment Variables Set theJAVA_HOME environment variable to thelocationof yourJDK installation Set theANDROID_HOME environment variable to thelocationof yourAndroid SDKinstallation It is also recommended that you add theAndroid SDK's tools,tools/bin, and platform- toolsdirectories to your PATH
  • 18. Create First Ionic 2 App Starting a new application, adding pages, navigating between those pages Ionic uses TypeScript for its code $ ionic start MyIonicProject tutorial From your terminal , run this command
  • 19. Ionic 2 App Templates $ ionic start MyIonicProject tutorial –v2
  • 20. Ionic 2 App Run $ ionic cd MyIonicProject $ ionic serve serve command run web view application To run your Ionic applicationon platform youmust add this platform before $ ionic platform add android $ ionic platform add ios Then $ ionic run android $ ionic run ios
  • 22. Project Structure – src folder ./src/index.html src/index.html is the main entry point for the app, though its purpose is to set up script and CSS includes and bootstrap, or start running, our app. <ion-app></ion-app> And the following scripts near the bottom: <script src="cordova.js"></script> <script src="build/ main.js"></script>
  • 23. Project Structure – src folder ./src/ Inside of the src directory we find our raw, uncompiled code.This is where most of the work for anIonic app will take place.Whenwe run ionic serve, our code inside of src/ is transpiled into the correct Javascript version that the browser understands (currently, ES5).That means we can work at a higher level using TypeScript, but compile downto the older form of Javascript the browser needs. src/app/app.module.ts is the entry point for our app.
  • 24. Project Structure – src/app/app.module.ts Every app has a root module that essentially controls the rest of the application
  • 25. Project Structure – src/app/app.module.ts Every app has a root module that essentially controls the rest of the application In thismodule, we’re setting theroot component to MyApp, in src/app/app.component.ts. This is thefirst component that gets loaded in our app, and typically it’s an empty shell for other componentsto beloaded into. In app.component.ts, we’re setting our template to src/app/app.html
  • 26. Project Structure – Bootstrap MyApp (root comp) app.component.ts app.html app.scss app.module.ts (root module) load other project’s pages (Components) load
  • 27. Project Structure – Root Component app.component.ts rootPage:any = HomePage; app.html <ion-nav [root]="rootPage"></ion-nav> app.scss For global style Angular 2 two way data binding
  • 28. Creating a Page this command will create folder under this path ./src/pages/ with page name each page will has three files • page_name.ts • page_name.html • page_name.scss $ ionic g page page_name Each page in Ionic 2 will be like Angular 2 Component To use this page in other page youshould import it first in app.module.ts declarations and entryComponents (Factory Design Pattern)
  • 29. Navigating to Pages Navigationin Ionic works like a simple stack, where we push new pages onto the top of the stack, which takes us forwards in the app and shows a back button.To go backwards, we pop the top page off. Since we set this.navCtrl in the constructor, we can call this.navCtrl.push(), and pass it the page we want to navigate to. We can also pass it an object containing data we would like to pass to the page being navigated to
  • 30. Ionic 2 – Road Map Ionic UI Components Ionic UI Components API’s Ionic Native Mobile Functions Do Behavior and customize each component.
  • 31. Ionic 2 – Ionic UI Components Ionic apps are made of high-level building blocks called components. Components allow you to quickly construct an interface for your app. Ionic comes with a number of components, including modals, popups, and cards • Grid • Inputs • List • Menus • Loading • Alert • Toast • Select • Card • Modals • Navigation • Icons • Fabs • Checkbox • DateTime • Buttons • Tabs • Radio • Slides • Segment • Rang • Toggle • Toolbar • Search Bar
  • 32. Ionic 2 – Demo Create MobileApp & using all Ionic 2 UIComponent http://ionicframework.com/docs/components