SlideShare a Scribd company logo
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 Development
The Sapper UAE
 
Wearables + Azure development
Wearables + Azure developmentWearables + Azure development
Wearables + Azure development
Andri 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 streaming
Matteo Bonifazi
 
MOCA iBeacons SDK for iOS 7
MOCA iBeacons SDK for iOS 7MOCA iBeacons SDK for iOS 7
MOCA iBeacons SDK for iOS 7
MOCA 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 3
slsh123
 
Native Android Development with Spring
Native Android Development with SpringNative Android Development with Spring
Native Android Development with Spring
Roy 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

Ionic
IonicIonic
Ionic Framework
Ionic FrameworkIonic Framework
Ionic Framework
Nirav Patel
 
An overview of Ionic
An overview of IonicAn 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
Troy Miles
 
Real World ionic Development
Real World ionic DevelopmentReal World ionic Development
Real World ionic Development
Chris Griffith
 
Ionic framework
Ionic frameworkIonic framework
Ionic framework
Software Infrastructure
 
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
Swaminathan 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 Ionic3
Knoldus 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 Compromises
Jacob 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 - Meetup
Sanjay Patel
 
Building Mobile Apps With Ionic & Loopback
Building Mobile Apps With Ionic & LoopbackBuilding Mobile Apps With Ionic & Loopback
Building Mobile Apps With Ionic & Loopback
Chibuzor Obiora
 
iOS-iPhone documentation
iOS-iPhone documentationiOS-iPhone documentation
iOS-iPhone documentation
Raj 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 Studio
Mizanur Sarker
 
Ionic Framework
Ionic FrameworkIonic Framework
Ionic Framework
Cristián Cortéz
 
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
gautham_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 Framework
Aayush Shrestha
 
Codename one
Codename oneCodename one

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

matatag curriculum education for Kindergarten
matatag curriculum education for Kindergartenmatatag curriculum education for Kindergarten
matatag curriculum education for Kindergarten
SarahAlie1
 
How to Manage Access Rights & User Types in Odoo 17
How to Manage Access Rights & User Types in Odoo 17How to Manage Access Rights & User Types in Odoo 17
How to Manage Access Rights & User Types in Odoo 17
Celine George
 
Edukasyong Pantahanan at Pangkabuhayan 1: Personal Hygiene
Edukasyong Pantahanan at  Pangkabuhayan 1: Personal HygieneEdukasyong Pantahanan at  Pangkabuhayan 1: Personal Hygiene
Edukasyong Pantahanan at Pangkabuhayan 1: Personal Hygiene
MJDuyan
 
H. A. Roberts: VITAL FORCE - Dr. Niranjan Bapat
H. A. Roberts: VITAL FORCE - Dr. Niranjan BapatH. A. Roberts: VITAL FORCE - Dr. Niranjan Bapat
H. A. Roberts: VITAL FORCE - Dr. Niranjan Bapat
Niranjan Bapat
 
Cómo crear video-tutoriales con ScreenPal (2 de julio de 2024)
Cómo crear video-tutoriales con ScreenPal (2 de julio de 2024)Cómo crear video-tutoriales con ScreenPal (2 de julio de 2024)
Cómo crear video-tutoriales con ScreenPal (2 de julio de 2024)
Cátedra Banco Santander
 
Year-to-Date Filter in Odoo 17 Dashboard
Year-to-Date Filter in Odoo 17 DashboardYear-to-Date Filter in Odoo 17 Dashboard
Year-to-Date Filter in Odoo 17 Dashboard
Celine George
 
How to Manage Large Scrollbar in Odoo 17 POS
How to Manage Large Scrollbar in Odoo 17 POSHow to Manage Large Scrollbar in Odoo 17 POS
How to Manage Large Scrollbar in Odoo 17 POS
Celine George
 
How To Update One2many Field From OnChange of Field in Odoo 17
How To Update One2many Field From OnChange of Field in Odoo 17How To Update One2many Field From OnChange of Field in Odoo 17
How To Update One2many Field From OnChange of Field in Odoo 17
Celine George
 
How to Manage Shipping Connectors & Shipping Methods in Odoo 17
How to Manage Shipping Connectors & Shipping Methods in Odoo 17How to Manage Shipping Connectors & Shipping Methods in Odoo 17
How to Manage Shipping Connectors & Shipping Methods in Odoo 17
Celine George
 
Kesadaran_Berbangsa_dan_Bernegara_Nasion.pptx
Kesadaran_Berbangsa_dan_Bernegara_Nasion.pptxKesadaran_Berbangsa_dan_Bernegara_Nasion.pptx
Kesadaran_Berbangsa_dan_Bernegara_Nasion.pptx
artenzmartenkai
 
New Features in Odoo 17 Sign - Odoo 17 Slides
New Features in Odoo 17 Sign - Odoo 17 SlidesNew Features in Odoo 17 Sign - Odoo 17 Slides
New Features in Odoo 17 Sign - Odoo 17 Slides
Celine George
 
How to Create a New Article in Knowledge App in Odoo 17
How to Create a New Article in Knowledge App in Odoo 17How to Create a New Article in Knowledge App in Odoo 17
How to Create a New Article in Knowledge App in Odoo 17
Celine George
 
Bài tập bộ trợ anh 7 I learn smart world kì 1 năm học 2022 2023 unit 1.doc
Bài tập bộ trợ anh 7 I learn smart world kì 1 năm học 2022 2023 unit 1.docBài tập bộ trợ anh 7 I learn smart world kì 1 năm học 2022 2023 unit 1.doc
Bài tập bộ trợ anh 7 I learn smart world kì 1 năm học 2022 2023 unit 1.doc
PhngThLmHnh
 
Bedok NEWater Photostory - COM322 Assessment (Story 2)
Bedok NEWater Photostory - COM322 Assessment (Story 2)Bedok NEWater Photostory - COM322 Assessment (Story 2)
Bedok NEWater Photostory - COM322 Assessment (Story 2)
Liyana Rozaini
 
DANH SÁCH THÍ SINH XÉT TUYỂN SỚM ĐỦ ĐIỀU KIỆN TRÚNG TUYỂN ĐẠI HỌC CHÍNH QUY N...
DANH SÁCH THÍ SINH XÉT TUYỂN SỚM ĐỦ ĐIỀU KIỆN TRÚNG TUYỂN ĐẠI HỌC CHÍNH QUY N...DANH SÁCH THÍ SINH XÉT TUYỂN SỚM ĐỦ ĐIỀU KIỆN TRÚNG TUYỂN ĐẠI HỌC CHÍNH QUY N...
DANH SÁCH THÍ SINH XÉT TUYỂN SỚM ĐỦ ĐIỀU KIỆN TRÚNG TUYỂN ĐẠI HỌC CHÍNH QUY N...
thanhluan21
 
How to Manage Line Discount in Odoo 17 POS
How to Manage Line Discount in Odoo 17 POSHow to Manage Line Discount in Odoo 17 POS
How to Manage Line Discount in Odoo 17 POS
Celine George
 
Genetics Teaching Plan: Dr.Kshirsagar R.V.
Genetics Teaching Plan: Dr.Kshirsagar R.V.Genetics Teaching Plan: Dr.Kshirsagar R.V.
Genetics Teaching Plan: Dr.Kshirsagar R.V.
DrRavindrakshirsagar1
 
C# Interview Questions PDF By ScholarHat.pdf
C# Interview Questions PDF By ScholarHat.pdfC# Interview Questions PDF By ScholarHat.pdf
C# Interview Questions PDF By ScholarHat.pdf
Scholarhat
 
SEQUNCES Lecture_Notes_Unit4_chapter11_sequence
SEQUNCES  Lecture_Notes_Unit4_chapter11_sequenceSEQUNCES  Lecture_Notes_Unit4_chapter11_sequence
SEQUNCES Lecture_Notes_Unit4_chapter11_sequence
Murugan Solaiyappan
 
C Interview Questions PDF By Scholarhat.pdf
C Interview Questions PDF By Scholarhat.pdfC Interview Questions PDF By Scholarhat.pdf
C Interview Questions PDF By Scholarhat.pdf
Scholarhat
 

Recently uploaded (20)

matatag curriculum education for Kindergarten
matatag curriculum education for Kindergartenmatatag curriculum education for Kindergarten
matatag curriculum education for Kindergarten
 
How to Manage Access Rights & User Types in Odoo 17
How to Manage Access Rights & User Types in Odoo 17How to Manage Access Rights & User Types in Odoo 17
How to Manage Access Rights & User Types in Odoo 17
 
Edukasyong Pantahanan at Pangkabuhayan 1: Personal Hygiene
Edukasyong Pantahanan at  Pangkabuhayan 1: Personal HygieneEdukasyong Pantahanan at  Pangkabuhayan 1: Personal Hygiene
Edukasyong Pantahanan at Pangkabuhayan 1: Personal Hygiene
 
H. A. Roberts: VITAL FORCE - Dr. Niranjan Bapat
H. A. Roberts: VITAL FORCE - Dr. Niranjan BapatH. A. Roberts: VITAL FORCE - Dr. Niranjan Bapat
H. A. Roberts: VITAL FORCE - Dr. Niranjan Bapat
 
Cómo crear video-tutoriales con ScreenPal (2 de julio de 2024)
Cómo crear video-tutoriales con ScreenPal (2 de julio de 2024)Cómo crear video-tutoriales con ScreenPal (2 de julio de 2024)
Cómo crear video-tutoriales con ScreenPal (2 de julio de 2024)
 
Year-to-Date Filter in Odoo 17 Dashboard
Year-to-Date Filter in Odoo 17 DashboardYear-to-Date Filter in Odoo 17 Dashboard
Year-to-Date Filter in Odoo 17 Dashboard
 
How to Manage Large Scrollbar in Odoo 17 POS
How to Manage Large Scrollbar in Odoo 17 POSHow to Manage Large Scrollbar in Odoo 17 POS
How to Manage Large Scrollbar in Odoo 17 POS
 
How To Update One2many Field From OnChange of Field in Odoo 17
How To Update One2many Field From OnChange of Field in Odoo 17How To Update One2many Field From OnChange of Field in Odoo 17
How To Update One2many Field From OnChange of Field in Odoo 17
 
How to Manage Shipping Connectors & Shipping Methods in Odoo 17
How to Manage Shipping Connectors & Shipping Methods in Odoo 17How to Manage Shipping Connectors & Shipping Methods in Odoo 17
How to Manage Shipping Connectors & Shipping Methods in Odoo 17
 
Kesadaran_Berbangsa_dan_Bernegara_Nasion.pptx
Kesadaran_Berbangsa_dan_Bernegara_Nasion.pptxKesadaran_Berbangsa_dan_Bernegara_Nasion.pptx
Kesadaran_Berbangsa_dan_Bernegara_Nasion.pptx
 
New Features in Odoo 17 Sign - Odoo 17 Slides
New Features in Odoo 17 Sign - Odoo 17 SlidesNew Features in Odoo 17 Sign - Odoo 17 Slides
New Features in Odoo 17 Sign - Odoo 17 Slides
 
How to Create a New Article in Knowledge App in Odoo 17
How to Create a New Article in Knowledge App in Odoo 17How to Create a New Article in Knowledge App in Odoo 17
How to Create a New Article in Knowledge App in Odoo 17
 
Bài tập bộ trợ anh 7 I learn smart world kì 1 năm học 2022 2023 unit 1.doc
Bài tập bộ trợ anh 7 I learn smart world kì 1 năm học 2022 2023 unit 1.docBài tập bộ trợ anh 7 I learn smart world kì 1 năm học 2022 2023 unit 1.doc
Bài tập bộ trợ anh 7 I learn smart world kì 1 năm học 2022 2023 unit 1.doc
 
Bedok NEWater Photostory - COM322 Assessment (Story 2)
Bedok NEWater Photostory - COM322 Assessment (Story 2)Bedok NEWater Photostory - COM322 Assessment (Story 2)
Bedok NEWater Photostory - COM322 Assessment (Story 2)
 
DANH SÁCH THÍ SINH XÉT TUYỂN SỚM ĐỦ ĐIỀU KIỆN TRÚNG TUYỂN ĐẠI HỌC CHÍNH QUY N...
DANH SÁCH THÍ SINH XÉT TUYỂN SỚM ĐỦ ĐIỀU KIỆN TRÚNG TUYỂN ĐẠI HỌC CHÍNH QUY N...DANH SÁCH THÍ SINH XÉT TUYỂN SỚM ĐỦ ĐIỀU KIỆN TRÚNG TUYỂN ĐẠI HỌC CHÍNH QUY N...
DANH SÁCH THÍ SINH XÉT TUYỂN SỚM ĐỦ ĐIỀU KIỆN TRÚNG TUYỂN ĐẠI HỌC CHÍNH QUY N...
 
How to Manage Line Discount in Odoo 17 POS
How to Manage Line Discount in Odoo 17 POSHow to Manage Line Discount in Odoo 17 POS
How to Manage Line Discount in Odoo 17 POS
 
Genetics Teaching Plan: Dr.Kshirsagar R.V.
Genetics Teaching Plan: Dr.Kshirsagar R.V.Genetics Teaching Plan: Dr.Kshirsagar R.V.
Genetics Teaching Plan: Dr.Kshirsagar R.V.
 
C# Interview Questions PDF By ScholarHat.pdf
C# Interview Questions PDF By ScholarHat.pdfC# Interview Questions PDF By ScholarHat.pdf
C# Interview Questions PDF By ScholarHat.pdf
 
SEQUNCES Lecture_Notes_Unit4_chapter11_sequence
SEQUNCES  Lecture_Notes_Unit4_chapter11_sequenceSEQUNCES  Lecture_Notes_Unit4_chapter11_sequence
SEQUNCES Lecture_Notes_Unit4_chapter11_sequence
 
C Interview Questions PDF By Scholarhat.pdf
C Interview Questions PDF By Scholarhat.pdfC Interview Questions PDF By Scholarhat.pdf
C Interview Questions PDF By Scholarhat.pdf
 

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