ionic tutorial
Ionic
i
About the Tutorial
Ionic is open source framework used for developing mobile applications. It provides tools
and services for building Mobile UI with native look and feel. Ionic framework needs native
wrapper to be able to run on mobile devices.
This is an introductory tutorial, which covers the basics of the Ionic Open Source
Framework and explains how to deal with its various components and sub-components.
Audience
This tutorial is created for JavaScript developers that are new to mobile development. It
provides simple, easy to understand explanations with useful working examples. We will
go through most of the Ionic Framework so you can also use this as a reference for your
projects.
This tutorial is intended to make you comfortable in getting started with the Ionic Open
Source Framework and its various functions.
Prerequisites
Since Ionic is built on top of AngularJS and Apache Cordova, you will need to have basic
knowledge about these technologies. You also need to be familiar with HTML, CSS and
JavaScript, if you want to understand all the information provided.
Copyright and Disclaimer
Copyright 2017 by Tutorials Point (I) Pvt. Ltd.
All the content and graphics published in this e-book are the property of Tutorials Point (I)
Pvt. Ltd. The user of this e-book is prohibited to reuse, retain, copy, distribute or republish
any contents or a part of contents of this e-book in any manner without written consent
of the publisher.
We strive to update the contents of our website and tutorials as timely and as precisely as
possible, however, the contents may contain inaccuracies or errors. Tutorials Point (I) Pvt.
Ltd. provides no guarantee regarding the accuracy, timeliness or completeness of our
website or its contents including this tutorial. If you discover any errors on our website or
in this tutorial, please notify us at contact@tutorialspoint.com
Ionic
ii
Table of Contents
About the Tutorial ............................................................................................................................................ i
Audience........................................................................................................................................................... i
Prerequisites..................................................................................................................................................... i
Copyright and Disclaimer ................................................................................................................................. i
Table of Contents ............................................................................................................................................ ii
IONIC − BASICS ............................................................................................................................ 1
1. Ionic – Overview .......................................................................................................................................2
Ionic Framework Features...............................................................................................................................2
Ionic Framework Advantages..........................................................................................................................2
Ionic Framework Limitations...........................................................................................................................3
2. Ionic – Environment Setup........................................................................................................................4
Installing Cordova and Ionic ............................................................................................................................4
Creating Apps ..................................................................................................................................................4
Tabs App..........................................................................................................................................................5
Blank App.........................................................................................................................................................7
Side Menu App ................................................................................................................................................9
Test App in Browser ......................................................................................................................................11
Project Folder Structure ................................................................................................................................12
IONIC – CSS COMPONENTS ....................................................................................................... 14
3. Ionic – Colors ..........................................................................................................................................15
Ionic Color Classes.........................................................................................................................................15
Ionic Color Usage...........................................................................................................................................15
Customizing Colors with CSS .........................................................................................................................16
Customizing Colors using SASS ......................................................................................................................17
4. Ionic – Content........................................................................................................................................19
5. Ionic – Header.........................................................................................................................................20
Adding Header...............................................................................................................................................20
Header Colors................................................................................................................................................21
Header Elements...........................................................................................................................................22
Sub Header....................................................................................................................................................23
6. Ionic – Footer..........................................................................................................................................26
Adding Footer................................................................................................................................................26
Footer Colors.................................................................................................................................................27
Footer Elements ............................................................................................................................................28
7. Ionic – Buttons........................................................................................................................................30
Block Buttons.................................................................................................................................................30
Button Size.....................................................................................................................................................31
Button Colors.................................................................................................................................................31
Button Outline...............................................................................................................................................33
Adding Icons..................................................................................................................................................34
Button Bar .....................................................................................................................................................35
Ionic
iii
8. Ionic – Lists .............................................................................................................................................36
Creating Ionic List ..........................................................................................................................................36
Inset List.........................................................................................................................................................37
Item Dividers .................................................................................................................................................37
Adding Icons..................................................................................................................................................39
Adding Avatars and Thumbnails....................................................................................................................40
9. Ionic – Cards ...........................................................................................................................................42
Adding Cards..................................................................................................................................................42
Card Header and Footer................................................................................................................................43
Complete Card...............................................................................................................................................44
10. Ionic – Forms...........................................................................................................................................46
Using Input Form...........................................................................................................................................46
Ionic Labels....................................................................................................................................................47
Stacked Label.................................................................................................................................................48
Floating Label ................................................................................................................................................49
Inset Inputs....................................................................................................................................................50
11. Ionic – Toggle..........................................................................................................................................52
Using Toggle ..................................................................................................................................................52
Multiple Toggles............................................................................................................................................53
Styling Toggle.................................................................................................................................................55
12. Ionic – Checkbox .....................................................................................................................................59
Adding Checkbox ...........................................................................................................................................59
Multiple Checkboxes.....................................................................................................................................60
Styling Checkbox............................................................................................................................................61
13. Ionic – Radio Button................................................................................................................................64
Adding Radio Buttons....................................................................................................................................64
Multiple Radio Button Groups.......................................................................................................................66
14. Ionic – Range ..........................................................................................................................................68
Using Range...................................................................................................................................................68
Adding Icons..................................................................................................................................................69
Styling Range .................................................................................................................................................70
15. Ionic – Select...........................................................................................................................................72
Using Select ...................................................................................................................................................72
Styling Select .................................................................................................................................................73
16. Ionic – Tabs.............................................................................................................................................78
Simple Tabs....................................................................................................................................................78
Adding Icons..................................................................................................................................................79
Striped Tabs...................................................................................................................................................82
17. Ionic – Grid..............................................................................................................................................83
Simple Grid ....................................................................................................................................................83
Column Sizes..................................................................................................................................................84
Horizontal and Vertical Positioning ...............................................................................................................86
Responsive Grid.............................................................................................................................................88
Ionic
iv
18. Ionic – Icons............................................................................................................................................91
How to use Icons? .........................................................................................................................................91
19. Ionic – Padding........................................................................................................................................93
IONIC − JAVASCRIPT COMPONENTS .......................................................................................... 95
20. Ionic – JavaScript Action Sheet................................................................................................................96
Using Action Sheet ........................................................................................................................................96
21. Ionic – JavaScript Backdrop...................................................................................................................100
Using Backdrop............................................................................................................................................100
22. Ionic – JavaScript Content.....................................................................................................................102
23. Ionic – JavaScript Forms........................................................................................................................103
Using ion-checkbox......................................................................................................................................103
Using ion-radio ............................................................................................................................................106
Using ion-toggle...........................................................................................................................................107
24. Ionic – JavaScript Events .......................................................................................................................110
Using Events ................................................................................................................................................111
25. Ionic – JavaScript Header ......................................................................................................................112
Using JavaScript Header ..............................................................................................................................112
Styling Header .............................................................................................................................................112
Adding Elements..........................................................................................................................................113
Adding Sub Header......................................................................................................................................114
26. Ionic – JavaScript Footer .......................................................................................................................116
Using Footer ................................................................................................................................................116
Adding Elements..........................................................................................................................................117
Adding Sub Footer.......................................................................................................................................117
27. Ionic – JavaScript Keyboard...................................................................................................................119
Using Keyboard............................................................................................................................................119
28. Ionic – JavaScript List ............................................................................................................................123
Using List .....................................................................................................................................................123
Delete Button ..............................................................................................................................................124
Reorder Button............................................................................................................................................125
Option Button..............................................................................................................................................127
Other Functions...........................................................................................................................................129
29. Ionic – JavaScript Loading .....................................................................................................................130
Using Loading ..............................................................................................................................................130
Loading Config .............................................................................................................................................132
30. Ionic – JavaScript Modal .......................................................................................................................134
Using Modal.................................................................................................................................................134
31. Ionic – JavaScript Navigation.................................................................................................................140
Using Navigation..........................................................................................................................................140
Ionic
v
Creating Navigation Menu...........................................................................................................................141
Adding Navigation Elements .......................................................................................................................143
Other Navigation Attributes........................................................................................................................144
Caching ........................................................................................................................................................144
Controlling the Navigation Bar ....................................................................................................................145
Tracking History...........................................................................................................................................145
32. Ionic – JavaScript Popover ....................................................................................................................148
Using Popover .............................................................................................................................................148
33. Ionic – JavaScript Popup .......................................................................................................................153
Using Show Popup.......................................................................................................................................153
Using Confirm Popup...................................................................................................................................155
Using Alert Popup........................................................................................................................................157
Using Prompt Popup....................................................................................................................................159
34. Ionic – JavaScript Scroll .........................................................................................................................162
Using Scroll ..................................................................................................................................................162
Infinite Scroll................................................................................................................................................166
Scroll Delegate.............................................................................................................................................167
35. Ionic – JavaScript Side Menu.................................................................................................................172
Using Side Menu..........................................................................................................................................172
Side Menu Delegate ....................................................................................................................................174
36. Ionic – JavaScript Slide Box ...................................................................................................................176
Using Slide Box ............................................................................................................................................176
Slide Box Delegate.......................................................................................................................................179
37. Ionic – JavaScript Tabs ..........................................................................................................................181
Using Tabs ...................................................................................................................................................181
IONIC − ADVANCED CONCEPTS ............................................................................................... 184
38. Ionic – Cordova Integration...................................................................................................................185
Installing ngCordova ....................................................................................................................................185
39. Ionic – Cordova AdMob.........................................................................................................................186
Using AdMob ...............................................................................................................................................186
40. Ionic – Cordova Camera ........................................................................................................................190
Using Camera...............................................................................................................................................190
41. Ionic ─ Cordova Facebook .....................................................................................................................197
Installing Facebook Plugin ...........................................................................................................................197
Angular Service............................................................................................................................................198
42. Ionic − Cordova InAppBrowser..............................................................................................................202
Using Browser..............................................................................................................................................202
43. Ionic – Cordova Native Audio................................................................................................................205
Using Native Audio ......................................................................................................................................205
Ionic
vi
44. Ionic – Cordova Geolocation .................................................................................................................207
Using Geolocation .......................................................................................................................................207
45. Ionic – Cordova Media ..........................................................................................................................209
Using Media.................................................................................................................................................209
46. Ionic − Cordova Icon & Splash Screen....................................................................................................212
Adding Splash Screen and Icon....................................................................................................................212
Ionic
1
Ionic − Basics
Ionic
2
Ionic is a front-end HTML framework built on top of AngularJS and Cordova. As per
their official document, the definition of this Ionic Open Source Framework is as follows:
Ionic is an HTML5 Mobile App Development Framework targeted at building hybrid
mobile apps. Think of Ionic as the front-end UI framework that handles all the look and
feel and UI interactions your app needs to be compelling. Kind of like "Bootstrap for
Native", but with the support for a broad range of common native mobile components,
slick animations and a beautiful design.
Ionic Framework Features
Following are the most important features of Ionic:
AngularJS: Ionic is using AngularJS MVC architecture for building rich single page
applications optimized for mobile devices.
CSS Components: With the native look and feel, these components offer almost
all elements that a mobile application needs. The components’ default styling can
be easily overridden to accommodate your own designs.
JavaScript Components: These components are extending CSS components with
JavaScript functionalities to cover all mobile elements that cannot be done only
with HTML and CSS.
Cordova Plugins: Apache Cordova plugins offer API needed for using native device
functions with JavaScript code.
Ionic CLI: This is NodeJS utility powered with commands for starting, building,
running and emulating Ionic applications.
Ionic View: Very useful platform for uploading, sharing and testing your
application on native devices.
Licence: Ionic is released under MIT license.
Ionic Framework Advantages
Following are some of the most commonly known Ionic Framework Advantages:
Ionic is used for Hybrid App Development. This means that you can package your
applications for IOS, Android, Windows Phone and Firefox OS, which can save you
a lot of working time.
Starting your app is very easy since Ionic provides useful pre-generated app setup
with simple layouts.
The apps are built in a very clean and modular way, so it is very maintainable and
easy to update.
Ionic Developers Team have a very good relationship with the Google Developers
Team and they are working together to improve the framework. The updates are
coming out regularly and Ionic support group is always willing to help when needed.
1. Ionic –Overview
Ionic
3
Ionic Framework Limitations
Following are some of the most important Ionic Framework Limitations:
Testing can be tricky since the browser does not always give you the right
information about the phone environment. There are so many different devices as
well as platforms and you usually need to cover most of them.
It can be hard to combine different native functionalities. There will be many
instances where you would run into plugin compatibility issues, which leads to build
errors that are hard to debug.
Hybrid apps tend to be slower than the native ones. However, since the mobile
technologies are improving fast this will not be an issue in the future.
In the next chapter, we will understand the environment setup of the Ionic Open Source
Framework.
Ionic
4
This chapter will show you how to start with Ionic Framework. The following table contains
the list of components needed to start with Ionic.
S No. Software Description
1 NodeJS
This is the base platform needed to create Mobile Apps using
Ionic. You can find detail on the NodeJS installation in
our NodeJS Environment Setup. Make sure you also install
npm while installing NodeJS.
2 Android SDK
If you are going to work on a Windows platform and are
developing your apps for the Android platform, then you
should have Android SDK setup on your machine. The
following link has detailed information on the Android
Environment Setup.
3 XCode
If you are going to work on the Mac platform and are
developing your apps for the iOS platform, then you should
have XCode setup on your machine. The following link has
detailed information on the iOS Environment Setup.
4
Cordova and
Ionic
These are the main SDKs which is needed to start working
with Ionic. This chapter explains how to setup Ionic in simple
step assuming you already have the required setup as
explained in the table above.
Installing Cordova and Ionic
We will use the Windows command prompt for this tutorial. The same steps can be applied
to the OSX terminal. Open your command window to install Cordova and Ionic:
C:\Users\Username> npm install -g cordova ionic
Creating Apps
While creating apps in Ionic, you can choose from the following three options to start with:
Tabs App
Blank App
Side menu app
In your command window, open the folder where you want to create the app and try one
of the options mentioned below.
2. Ionic – Environment Setup
Ionic
5
Tabs App
If you want to use the Ionic tabs template, the app will be built with the tab menu, header
and a couple of useful screens and functionalities. This is the default Ionic template. Open
your command window and choose where you want to create your app.
C:\Users\Username> cd Desktop
This command will change the working directory. The app will be created on the Desktop.
C:\Users\Username\Desktop> ionic start myApp tabs
Ionic Start command will create a folder named myApp and setup Ionic files and folders.
C:\Users\Username\Desktop> cd myApp
Now, we want to access the myApp folder that we just created. This is our root folder.
Let us now add the Cordova project for the Android Platform and install the basic Cordova
plugins as well. The following code allows us to run the app on the Android emulator or a
device.
C:\Users\Username\Desktop\myApp> ionic platform add android
The next step is to build the app. If you have building errors after running the following
command, you probably did not install the Android SDK and its dependencies.
C:\Users\Username\Desktop\myApp> ionic build android
The last step of the installation process is to run your app, which will start the mobile
device, if connected, or the default emulator, if there is no device connected. Android
Default Emulator is slow, so I suggest you to install Genymotion or some other popular
Android Emulator.
C:\Users\Username\Desktop\myApp> ionic run android
This will produce below result, which is an Ionic Tabs App.
Ionic
6
Ionic
7
Blank App
If you want to start from the scratch, you can install the Ionic blank template. We will use
the same steps that have been explained above with the addition of ionic start myApp
blank instead of ionic start myApp tabs as follows.
C:\Users\Username\Desktop> ionic start myApp blank
The Ionic Start command will create a folder named myApp and setup the Ionic files and
folders.
C:\Users\Username\Desktop> cd myApp
Let us add the Cordova project for the Android Platform and install the basic Cordova
plugins as explained above.
C:\Users\Username\Desktop\myApp>ionic platform add android
The next step is to build our app:
C:\Users\Username\Desktop\myApp> ionic build android
Finally, we will start the App as with the following code:
C:\Users\Username\Desktop\myApp> ionic run android
Ionic
8
This will produce the following result, which is a Ionic Blank App.
Ionic
9
Side Menu App
The third template that you can use is the Side Menu Template. The steps are the same
as the previous two templates; we will just add sidemenu when starting our app as shown
in the code below.
C:\Users\Username\Desktop> ionic start myApp sidemenu
The Ionic Start command will create a folder named myApp and setup the Ionic files and
folders.
C:\Users\Username\Desktop> cd myApp
Let us add the Cordova project for the Android Platform and install the basic Cordova
plugins with the code given below.
C:\Users\Username\Desktop\myApp> ionic platform add android
The next step is to build our app with the following code.
C:\Users\Username\Desktop\myApp> ionic build android
Finally, we will start the App with the code given below.
C:\Users\Username\Desktop\myApp> ionic run android
Ionic
10
This will produce the following result, which is an Ionic Side Menu App.
Ionic
11
Test App in Browser
Since we are working with the JavaScript, you can serve your app on any web browser.
This will speed up your building process, but you should always test your app on native
emulators and devices. Type the following code to serve your app on the web browser.
C:\Users\Username\Desktop\myApp> ionic serve
The above command will open your app in the web browser. Google Chrome provides the
device mode functionality for mobile development testing. Press F12 to access the
developer console.
The top left corner of the console window click has the "Toggle Device Mode" icon. The
next step will be to click "Dock to Right" icon in the top right corner. Once the page is
refreshed, you should be ready for testing on the web browser.
Ionic
12
Project Folder Structure
Ionic creates the following directory structure for all type of apps. This is important for any
Ionic developer to understand the purpose of every directory and the files mentioned
below:
Let us have a quick understanding of all the folders and files available in the project folder
structure shown in the image above.
Hooks: Hooks are scripts that can be triggered during the build process. They are
usually used for the Cordova commands customization and for building automated
processes. We will not use this folder during this tutorial.
Platforms: This is the folder where Android and IOS projects are created. You
might encounter some platform specific problems during development that will
require these files, but you should leave them intact most of the time.
Plugins: This folder contains Cordova plugins. When you initially create an Ionic
app, some of the plugins will be installed. We will show you how to install Cordova
plugins in our subsequent chapters.
Ionic
13
Resources: This folder is used for adding resources like icon and splash screen to
your project.
Scss: Since Ionic core is built with Sass, this is the folder where your Sass file is
located. For simplifying the process, we will not use Sass for this tutorial. Our
styling will be done using CSS.
www: www is the main working folder for Ionic developers. They spend most of
their time here. Ionic gives us their default folder structure inside 'www', but the
developers can always change it to accommodate their own needs. When this folder
is opened, you will find the following sub-folders:
o The css folder, where you will write your CSS styling.
o The img folder for storing images.
o The js folder that contains the apps main configuration file (app.js) and
AngularJS components (controllers, services, directives). All your JavaScript
code will be inside these folders.
o The libs folder, where your libraries will be placed.
o The templates folder for your HTML files.
o Index.html as a starting point to your app.
Other Files: Since this is a beginner’s tutorial, we will just mention some of the
other important files and their purposes as well.
o .bowerrc is the bower configuration file.
o .editorconfig is the editor configuration file.
o .gitignore is used to instruct which part of the app should be ignored when
you want to push your app to the Git repository.
o bower.json will contain the bower components and dependencies, if you
choose to use the bower package manager.
o gulpfile.js is used for creating automated tasks using the gulp task
manager.
o config.xml is the Cordova configuration file.
o package.json contains the information about the apps, their dependencies
and plugins that are installed using the NPM package manager.
In the next chapter, we will discuss the different colors available in Ionic open source
framework.
Ionic
14
Ionic – CSS Components
Ionic
15
Before we start with actual elements available in the Ionic framework, let us have a little
understanding on how Ionic makes use of colors for different elements.
Ionic Color Classes
Ionic framework gives us a set of nine predefined color classes. You can use these
colors or you can override it with your own styling.
The following table shows the default set of nine colors provided by Ionic. We will use
these colors for styling different Ionic elements in this tutorial. For now, you can check all
the colors as shown below:
Class Description Result
light To be used for white color
stable To be used for light grey color
positive To be used for blue color
calm To be used for light blue color
balanced To be used for green color
energized To be used for yellow color
assertive To be used for red color
royal To be used for violet color
dark To be used for black color
Ionic Color Usage
Ionic makes use of different classes for each element. For example, a header element will
have bar class and a button will have a button class. To simplify the usage, we use
different colors by prefixing element class in a color name.
3. Ionic – Colors
Ionic
16
For example, to create a blue color header, we will use a bar-calm as follows:
Similarly, to create a grey color button, we will use button-stable class as follows.
You can also use Ionic color class like any other CSS class. We will now style two paragraphs with a balanced (green) and an energized (yellow) color.
4. Ionic – Content
Ionic
20
The Ionic header bar is located on top of the screen. It can contain title, icons, buttons
or some other elements on top of it. There are predefined classes of headers that you can
use. You can check all of it in this tutorial.
Adding Header
The main class for all the bars you might use in your app is bar. This class will always be
applied to all the bars in your app. All bar subclasses will use the prefix – bar.
If you want to create a header, you need to add bar-header after your main bar class.
Open your www/index.html file and add the header class inside your body tag. We are
adding a header to the index.html body because we want it to be available on every
screen in the app.
Since bar-header class has default (white) styling applied, we will add the title on top of
it, so you can differentiate it from the rest of your screen.
The above code will produce the following screen: 5. Ionic – Header Ionic 21 Header Colors If you want to style your header, you just need to add the appropriate color class to it. When you style your elements, you need to add your main element class as prefix to your color class. Since we are styling the header bar, the prefix class will be bar and the color class that we want to use in this example is positive (blue).
The above code will produce the following screen: You can use any of the following nine classes to give a color of your choice to your app header: Color Class Description Result bar-light To be used for white color bar-stable To be used for light grey color bar-positive To be used for blue color bar-calm To be used for light blue color Ionic 22 bar-balanced To be used for green color bar-energized To be used for yellow color bar-assertive To be used for red color bar-royal To be used for violet color bar-dark To be used for black color Header Elements We can add other elements inside the header. The following code is an example to add a menu button and a home button inside a header. We will also add icons on top of our header buttons.
The above code will produce the following screen: Ionic 23 Sub Header You can create a sub header that will be located just below the header bar. The following example will show how to add a header and a sub header to your app. Here, we have styled the sub header with an "assertive" (red) color class.
The above code will produce the following screen: Ionic 24 When your route is changed to any of the app screens, you will notice that the header and the sub header are covering some content as shown in the screenshot below. To fix this you need to add a ‘has-header’ or a ‘has-subheader’ class to the ioncontent tags of your screens. Open one of your HTML files from www/templates and add the has-subheader class to the ion-content. If you only use header in your app, you will need to add the has-header class instead.
Ionic
25
The above code will produce the following screen:
Ionic
26
Ionic footer is placed at the bottom of the app screen. Working with footers is almost the
same as working with headers.
Adding Footer
The main class for Ionic footers is bar (the same as header). When you want to add footer
to your screens, you need to add bar-footer class to your element after the
main bar class. Since we want to use our footer on every screen in the app, we will add it
to the body of the index.html file. We will also add title for our footer.
The above code will produce the following screen:
6. Ionic – Footer
Ionic
27
Footer Colors
If you want to style your footer, you just need to add the appropriate color class to it.
When you style your elements, you need to add your main element class as a prefix to
your color class. Since we are styling a footer bar, the prefix class will be a bar and the
color class that we want to use in this example is assertive (red).
The above code will produce the following screen:
You can use any of the following nine classes to give a color of your choice to your app
footer:
Color Class Description Result
bar-light To be used for white color
bar-stable To be used for light grey color
Ionic
28
bar-positive To be used for blue color
bar-calm To be used for light blue color
bar-balanced To be used for green color
bar-energized To be used for yellow color
bar-assertive To be used for red color
bar-royal To be used for violet color
bar-dark To be used for black color
Footer Elements
Footers can contain elements inside it. Most of the time you will need to add buttons with
icons inside a footer.
The first button added will always be in the left corner. The last one will be placed on the
right. The buttons in between will be grouped next to the first one on the left side of your
footer. In following example, you can also notice that we use the icon class to add icons
on top of the buttons.
Ionic
29
The above code will produce the following screen:
If you want to move your button to the right, you can add pull-right class.
The above code will produce the following screen:
Ionic
30
There are several types of buttons in the Ionic Framework and these buttons are subtly
animated, which further enhances the user experience when using the app. The main class
for all the button types is button. This class will always be applied to our buttons, and we
will use it as a prefix when working with sub classes.
Block Buttons
Block buttons will always have 100% width of their parent container. They will also have
a small padding applied. You will use button-block class for adding block buttons. If you
want to remove padding but keep the full width, you can use the button-full class.
Following is an example to show the usage of both classes:
The above code will produce the following screen:
7. Ionic – Buttons
Ionic
31
Button Size
There are two Ionic classes for changing the button size:
button-small and
button-large.
Following is an example to show their usage:
The above code will produce the following screen:
Button Colors
If you want to style your button, you just need to add appropriate color class to it. When
you style your elements, you need to add your main element class as a prefix to your color
class. Since we are styling the footer bar, the prefix class will be a bar and the color class
that we want to use in this example is assertive (red).
Ionic
32
The above code will produce the following screen:
You can use any of the following nine classes to give a color of your choice to your app
buttons:
Color Class Description Result
button-light To be used for white color
button-stable To be used for light grey color
button-positive To be used for blue color
button-calm To be used for light blue color
button-balanced To be used for green color
button-energized To be used for yellow color
Ionic
33
button-assertive To be used for red color
button-royal To be used for violet color
button-dark To be used for black color
Button Outline
If you want your buttons transparent, you can apply button-outline class. Buttons with
this class will have an outline border and a transparent background.
To remove the border from the button, you can use the button-clear class. The following
example shows how to use these two classes.
The above code will produce the following screen:
Ionic
34
Adding Icons
When you want to add Icons to your buttons, the best way is to use the icon class. You
can place the icon on one side of the button by using the icon-left or the icon-right. You
will usually want to move your icon to one side when you have some text on top of your
button as explained below.
The above code will produce the following screen:
Ionic
35
Button Bar
If you want to group a couple of buttons together, you can use the button-bar class. The
buttons will have equal size by default.
The above code will produce the following screen:
Ionic
36
Lists are one of the most popular elements of any web or mobile application. They are
usually used for displaying various information. They can be combined with other HTML
elements to create different menus, tabs or to break the monotony of pure text files. Ionic
framework offers different list types to make their usage easy.
Creating Ionic List
Every list is created with two elements. When you want to create a basic list your
Similarly, to create a grey color button, we will use button-stable class as follows.
You can also use Ionic color class like any other CSS class. We will now style two paragraphs with a balanced (green) and an energized (yellow) color.
Paragraph 1...
Paragraph 2...
The above code will produce the following screen:
We will discuss in detail in the subsequent chapters, when we create different elements
using different classes.
Customizing Colors with CSS
When you want to change some of the Ionic default colors using CSS, you can do it by
editing the lib/css/ionic.css file. In some cases, this approach is not very productive
because every element (header, button, footer...) uses its own classes for styling.
Therefore, if you want to change the color of the "light" class to orange, you would need
to search through all the elements that use this class and change it. This is useful when
Ionic
17
you want to change the color of a single element, but not very practical for changing color
of all elements because it would use too much time.
Customizing Colors using SASS
SASS (which is the short form of – Software as a Service) provides an easier way to
change the color for all the elements at once. If you want to use SASS, open your project
in the command window and type:
C:\Users\Username\Desktop\tutorialApp> ionic setup sass
This will set up SASS for your project. Now you can the change default colors by opening
the scss/ionic.app.scss file and then typing in the following code before this line –
@import "www/lib/ionic/scss/ionic";
We will change the balanced color to dark blue and the energized color to orange. The two
paragraphs that we used above are now dark blue and orange.
$balanced: #000066 !default;
$energized: #FFA500 !default;
Now, if you use the following example:
Paragraph 1...
Paragraph 2...
The above code will produce the following screen:
All the Ionic elements that are using these classes will change to dark blue and orange.
Take into consideration that you do not need to use Ionic default color classes. You can
always style elements the way you want.
Ionic
18
Important Note
The www/css/style.css file will be removed from the header of the index.html after you
install SASS. You will need to link it manually if you still want to use it. Open
index.html and then add the following code inside the header.
Ionic
19
Almost every mobile app contains some fundamental elements. Usually those elements
include a header and a footer that will cover the top and the bottom part of the screen. All
the other elements will be placed between these two. Ionic provides ion-content element
that serves as a container that will wrap all the other elements that we want to create.
This container has some unique characteristics, but since this is a JavaScript based
component which we will cover in the later part of this tutorial.
The above code will produce the following screen: 5. Ionic – Header Ionic 21 Header Colors If you want to style your header, you just need to add the appropriate color class to it. When you style your elements, you need to add your main element class as prefix to your color class. Since we are styling the header bar, the prefix class will be bar and the color class that we want to use in this example is positive (blue).
The above code will produce the following screen: You can use any of the following nine classes to give a color of your choice to your app header: Color Class Description Result bar-light To be used for white color bar-stable To be used for light grey color bar-positive To be used for blue color bar-calm To be used for light blue color Ionic 22 bar-balanced To be used for green color bar-energized To be used for yellow color bar-assertive To be used for red color bar-royal To be used for violet color bar-dark To be used for black color Header Elements We can add other elements inside the header. The following code is an example to add a menu button and a home button inside a header. We will also add icons on top of our header buttons.
The above code will produce the following screen: Ionic 23 Sub Header You can create a sub header that will be located just below the header bar. The following example will show how to add a header and a sub header to your app. Here, we have styled the sub header with an "assertive" (red) color class.
The above code will produce the following screen: Ionic 24 When your route is changed to any of the app screens, you will notice that the header and the sub header are covering some content as shown in the screenshot below. To fix this you need to add a ‘has-header’ or a ‘has-subheader’ class to the ioncontent tags of your screens. Open one of your HTML files from www/templates and add the has-subheader class to the ion-content. If you only use header in your app, you will need to add the has-header class instead.
- tag
needs to have the list class assigned, and your
- tag will use the item class. Another
interesting thing is that you do not even need to use
- ,
- tags for your
lists. You can use any other elements, but the important thing is to
add list and item classes appropriately.
The above code will produce the following screen: 8. Ionic – Lists Ionic 37 Inset List When you need a list to fill your own container, you can add the list-inset after your list class. This will add some margin to it and it will adjust the list size to your container.Item 1Item 2Item 3The above code will produce the following screen: Item Dividers Dividers are used for organizing some elements into logical groups. Ionic gives us item-divider class for this. Again, like with all the other Ionic elements, we just need to add the item-divider class after the item class. Item dividers are useful as a list header, since they have stronger styling than the other list items by default.Item 1Item 2Item 3The above code will produce the following screen: Ionic 39 Adding Icons We already showed you how to add icons to your buttons. When adding icons to the list items, you need to choose what side you want to place them. There are item-icon-left and item-icon-right classes for this. You can also combine those two classes, if you want to have your Icons on both the sides. Finally, there is the item-note class to add a text note to your item.Item Divider 1Ionic 38Item 1Item 2Item 3Item Divider 2Item 4Item 5Item 6Ionic 40 The above code will produce the following screen: Adding Avatars and Thumbnails Avatars and thumbnails are similar. The main difference is that avatars are smaller than thumbnails. These thumbnails are covering most of the full height of the list item, while avatars are medium sized circle images. The classes that are used are item-avatar and item-thumbnail. You can also choose which side you want to place your avatars and thumbnails as shown in the thumbnail code example below. Ionic 41The above code will produce the following screen: Ionic 42 Since mobile devices have smaller screen size, cards are one of the best elements for displaying information that will feel user friendly. In the previous chapter, we have discussed how to inset lists. Cards are very similar to inset lists, but they offer some additional shadowing that can influence the performance for larger lists. Adding Cards A default card can be created by adding a card class to your element. Cards are usually formed as lists with the item class. One of the most useful class is the item-text-wrap. This will help when you have too much text, so you want to wrap it inside your card. The first card in the following example does not have the item-text-wrap class assigned, but the second one is using it.
Avatar
Thumbnail
9. Ionic – Cards Ionic 43 The above code will produce the following screen: Card Header and Footer In the previous chapter, we have already discussed how to use the item-divider class for grouping lists. This class can be very useful when working with cards to create card headers. The same class can be used for footers as shown in the following code:This is a Ionic card without item-text-wrap class.This is a Ionic card with item-text-wrap class.The above code will produce the following screen: Complete Card You can add any element on top of your card. In following example, we will show you how to use the full-image class together with the item-body to get a good-looking windowed image inside your card.Card headerIonic 44Card text...Card Footer
Ionic
45
Card Name
The above code will produce the following screen: Ionic 46 Ionic forms are mostly used for interaction with users and collecting needed info. This chapter will cover various text input forms and in our subsequent chapters, we will explain how to use other form elements using the Ionic framework. Using Input Form The best way to use forms is to use list and item as your main classes. Your app will usually consist more than one-form element, so it makes sense to organize it as a list. In the following example, you can notice that the item element is a label tag. You can use any other element, but a label will provide the ability to tap on any part of the element to focus your text input. You can set a placeholder that will look different from the input text and it will be hidden as soon as you start typing. You can see this in the example below.
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Pellentesque
eget pharetra tortor. Proin quis eros imperdiet, facilisis nisi in, tincidunt
orci. Nam tristique elit massa, quis faucibus augue finibus ac.
10. Ionic – Forms Ionic 47 The above code will produce the following screen: Ionic Labels Ionic offers some other options for your label. You can use the input-label class, if you want your placeholder to be on the left side when you type the text.Ionic 48 The above code will produce the following screen: Stacked Label Stacked label is the other option that allows moving your label on top or the bottom of the input. To achieve this, we will add the item-stacked-label class to our label element and we need to create a new element and assign the input-label class to it. If we want it to be on top, we just need to add this element before the input tag. This is shown in the following example. Notice that the span tag is before the input tag. If we changed their places, it would appear below it on the screen.Ionic 49 The above code will produce the following screen: Floating Label Floating labels are the third option we can use. These labels will be hidden before we start typing. As soon the typing starts, they will appear on top of the element with nice floating animation. We can use floating labels the same way as we used stacked labels. The only difference is that this time we will use item-floating-label class.Ionic 50 The above code will produce the following screen: Inset Inputs In our last chapter, we discussed how to inset Ionic elements. You can also inset an input by adding the item-input-inset class to your item and the item-input-wrapper to your label. A Wrapper will add additional styling to your label. If you add some other elements next to your label, the label size will adjust to accommodate the new element. You can also add elements inside your label (usually icons). The following example shows two inset inputs. The first one has a button next to the label, and the second one has an icon inside it. We used the placeholder-icon class to make the icon with the same color as the placeholder text. Without it, the icon would use the color of the label.The above code will produce the following screen: Ionic 52 Sometimes there are two options available for the users. The most efficient way to handle this situation is through toggle forms. Ionic gives us classes for toggle elements that are animated and easy to implement. Using Toggle Toggle can be implemented using two Ionic classes. First, we need to create a label for the same reason we explained in the previous chapter and assign a toggle class to it. Inside this, our label will be created . You will notice two more ionic classes used in the following example. The track class will add background styling to our checkbox and color animation when the toggle is tapped. The handle class is used to add a circle button to it. The following example shows two toggle forms. The first one is checked, the second one is not.Ionic 51
11. Ionic – Toggle Ionic 53 The above code will produce the following screen: Multiple Toggles Most of the time when you want to add more than one element of the same kind in Ionic, the best way is to use list items. The class that is used for multiple toggles is the item-toggle. The next example shows how to create a list for toggles. The first one and the second one are checked.- Toggle 1
- Toggle 2
- Toggle 3
- Toggle 4
- Toggle Light
- Toggle Stable
- Toggle Positiv>
- Toggle Calm
- Toggle Balanced Ionic 57
- Toggle Energized
- Toggle Assertive
- Toggle Royal
- Toggle Dark
- Checbox 1
- Checkbox 2
- Checkbox e
- Checkbox 4
- Checbox 1
- Checkbox 2
- Checkbox 3 Ionic 62
- Checkbox 4
- Checkbox 5
- Checkbox 6
- Checkbox 7
- Checkbox 8 Ionic 63
- Checkbox 9
The above code will produce the following screen: Ionic 66 Multiple Radio Button Groups Sometimes you want to create more than one group. This is what the name attribute is made for; the following example will group the first two and the last two buttons as two option groups. We will use the item-divider class to separate two groups. Notice that the first group has the name attribute equal to group1 and the second one uses group2.The above code will produce the following screen: Ionic 68 Ionic range is used to choose and display the level of something. It will represent the actual value in co-relation to maximal and minimal value. Ionic offers a simple way of working with Range. Using Range Range is used as an inside item element. The class that is used is range. We will place this class after the item class. This will prepare a container where the range will be placed. After creating a container, we need to add input and assign the range type to it and the name attribute as well.Group1Group2The above code will produce the following screen: 14. Ionic – Range Ionic 69 Adding Icons Range will usually require icons to display the data clearly. We just need to add icons before and after the range input to place them on both sides of the range element.The above code will produce the following screen: Ionic 70 Styling Range Our next example will show you how to style Range with Ionic colors. The color classes will use a range prefix. We will create a list with nine ranges and style it differently.The above code will produce the following screen: Ionic 72 Ionic Select will create a simple menu with select options for the user to choose. This Select Menu will look differently on different platforms, since its styling is handled by the browser. Using Select First, we will create a label and add the item-input and the item-select classes. The second class will add additional styling to the select form and then we will add the input-label class inside that will be used to add a name to our select element. We will also add select with option inside. This is regular HTML5 select element. The following example is showing Ionic Select with three options. 15. Ionic – Select Ionic 73 The above code will produce the following screen: Styling Select The following example will show you how to apply styling to select. We are creating a list with nine differently styled select elements using Ionic colors. Since we are using list with items, item will be the prefix to the color classes.Ionic 71Ionic 77 The above code will produce the following screen: Ionic 78 Ionic tabs are most of the time used for mobile navigation. Styling is optimized for different platforms. This means that on android devices, tabs will be placed at the top of the screen, while on IOS it will be at the bottom. There are different ways of creating tabs. We will understand in detail, how to create tabs in this chapter. Simple Tabs Simple Tabs menu can be created with a tabs class. For the inside element that is using this class, we need to add tab-item elements. Since tabs are usually used for navigation, we will use tags for tab items. The following example is showing a menu with four tabs. 16. Ionic – Tabs Ionic 79 The above code will produce the following screen: Adding Icons Ionic provides classes for adding icons to tabs. If you want your tabs to have icons without any text, a tabs-icon-only class should be added after the tabs class. Of course, you need to add icons you want to display. The above code will produce the following screen: You can also add icons and text together. The tabs-icon-top and tabs-icon-left are classes that will place the icon above or on the left side respectively. Implementation is the same as the example given above, we will just add a new class and text that we want to use. The following example shows icons placed above the text. Ionic 81 The above code will produce the following screen: Ionic 82 Striped Tabs Striped Tabs can be created by adding a container around our tabs with the tabs-striped class. This class allows the usage of the tabs-background and the tabs-color prefixes for adding some of the Ionic colors to the tabs menu. In the following example, we will use the tabs-background-positive (blue) class to style the background of our menu, and the tabs-color-light (white) class to style the tab icons. Notice the difference between the second tab that is active and the other two that are not. The above code will produce the following screen: Ionic 83 Working with the Ionic Grid System is straightforward. There are two main classes – row for working with rows and col for columns. You can choose as many columns or rows you want. All of them will adjust its size to accommodate the available space, although you can change this behavior to suit your needs. NOTE – All examples in this tutorial will have borders applied to our grid to be able to display it in a way that is easy to understand. Simple Grid The following example shows how to use the col and the row classes. We will create two rows. The first row will have five columns and the second one will have only three. Notice how the width of the columns is different in the first and second row.col 1col 2col 3col 4col 517. Ionic – Grid Ionic 84 The above code will produce the following screen: Column Sizes Sometimes you do not want to leave the column sizes automatically assigned. If this is the case, you can choose the col prefix followed by a number that will represent a percentage of the row width. This will apply only to the column with a specific size applied. The other columns will adjust to the available space that is left. In the following example, the first column will use 50 percent of the full width and the others will adjust accordingly.col 1col 2col 3col 1col 2col 3col 4col 5Ionic 85 The above code will produce the following screen: The following table shows the available percentage options that Ionic grid system provides: Column Percentage Classnames Class Name Percentage Used col-10 10% col-20 20% col-25 25% col-33 33.3333% col-50 50% col-67 66.6666% col-75 75% col-80 80% col-90 90% Ionic 86 Horizontal and Vertical Positioning The columns can be offset from the left. It works the same for the specific size of the columns. This time the prefix will be col-offset and then we will use the same percentage numbers showed in the table above. The following example shows how can we offset the second column of both the rows by 25 percent.col 1col 2col 3col 1col 2col 3col 4col 5The above code will produce the following screen: Ionic 87 You can also vertically align the columns inside a row. There are three classes, which can be used, namely – top, center and the bottom class with the col prefix. The following code shows how to place vertically the first three columns of both rows. NOTE – In the example that follows we added “.col {height: 120px}” to our CSS to show you the vertical placing of the columns.col 1col 2col 3col 1col 2col 3col 4col 5The above code will produce the following screen: Ionic 88 Responsive Grid The Ionic Grid can also be used for a responsive layout. There are three classes available. The responsive-sm class will collapse columns into a single row when the viewport is smaller than a landscape phone. The responsive-md class will be applied when viewport is smaller than a portrait tablet. The responsive-lg class will be applied when viewport is smaller than a landscape tablet. The first image after the following example shows how the responsive-sm class looks on a Mobile device and the second one shows how the same responsive grid looks differently on a Tablet device.col 1col 2col 3col 1col 2col 3col 4col 5Ionic 89 Mobile Grid View Ionic 90 Tablet Grid View Ionic 91 There are more than 700 premium icons provided by Ionic. There are also different sets of icons provided for Android and IOS. You can find almost anything you need but you are not bound to use them, if you do not want to. You can use your own custom icons or any other icon set instead. You can check all the Ionic icons here. How to use Icons? If you want to use Ionic icons find the icon you need on the page (http://ionicons.com/). When you are adding Ionic elements, you always add the main class first and then you add the subclass you want. The main class for all icons is icon. The Subclass is the name of the icon you want. We will add six icons in our example that is given below: The above code will produce the following screen: 18. Ionic – Icons Ionic 92 The size of these icons can be changed with the font-size property in your Ionic CSS file. .icon { font-size: 50px; } Once the icon size is setup, the same code will produce the following screenshot as the output: Ionic 93 Ionic offers an easy way to add padding to elements. There are couple of classes that can be used and all of them will add 10px between border of element and its content. The following table displays all the available padding classes. Padding Classes Class Name Class Info padding Adds padding around every side. padding-vertical Adds padding to the top and bottom. padding-horizontal Adds padding to the left and right. padding-top Adds padding to the top. padding-right Adds padding to the right. padding-bottom Adds padding to the bottom. padding-left Adds padding to the left. Using Padding When you want to apply some padding to your element, you just need to assign one of the classes from the table above. The following example shows two block buttons. The first one is using the padding class and the second one does not. You will notice that the first button is larger, since it has 10px padding applied. 19. Ionic – Padding Ionic 94 The above code will produce the following screen: Ionic 95 Ionic − JavaScript Components Ionic 96 The Action Sheet is an Ionic service that will trigger a slide up pane on the bottom of the screen, which you can use for various purposes. Using Action Sheet In the following example, we will show you how to use the Ionic action sheet. First we will inject $ionicActionSheet service as a dependency to our controller, then we will create $scope.showActionSheet() function, and lastly we will create a button in our HTML template to call the function we created. Controller Code .controller('myCtrl', function($scope, $ionicActionSheet) { $scope.triggerActionSheet = function() { // Show the action sheet var showActionSheet = $ionicActionSheet.show({ buttons: [ { text: 'Edit 1' }, { text: 'Edit 2' } ], destructiveText: 'Delete', titleText: 'Action Sheet', cancelText: 'Cancel', cancel: function() { // add cancel code... }, buttonClicked: function(index) { if(index === 0) { // add edit 1 code } if(index === 1) { 20. Ionic – JavaScript Action Sheet Ionic 97 // add edit 2 code } }, destructiveButtonClicked: function() { // add delete code.. } }); }; }) HTML Code Code Explained When we tap the button, it will trigger the $ionicActionSheet.show function and the Action Sheet will appear. You can create your own functions that will be called when one of the options is taped. The cancel function will close the pane, but you can add some other behavior, which will be called when the cancel option is tapped before the pane is closed. The buttonClicked function is the place where you can write the code that will be called when one of the edit options is tapped. We can keep track of multiple buttons by using the index parameter. The destructiveButtonCLicked is a function that will be triggered when the delete option is tapped. This option is red by default. Ionic 98 The $ionicActionSheet.show() method has some other useful parameters. You can check all of them in the following table. Ionic 99 Show Method Options Properties Type Details buttons object Creates button object with a text field. titleText string The title of the action sheet. cancelText string The text for cancel button. destructiveText string The text for a destructive button. cancel function Called when cancel button, backdrop or hardware back button is pressed. buttonClicked function Called when one of the buttons is tapped. Index is used for keeping track of which button is tapped. Return true will close the action sheet. destructiveButtonClicked function Called when destructive button is clicked. Return true will close the action sheet. cancelOnStateChange boolean If true (default) it will cancel the action sheet when navigation state is changed. Ionic 100 The Ionic Backdrop will overlay the content of the screen when applied. It will appear below other overlays (popup, loading, etc...). There are two methods that can be used for managing backdrop service. The $ionicBackdrop.retain() will apply backdrop over the components, and $ionicBackdrop.release() will remove it. Using Backdrop The following example shows how to use backdrop. We are adding $ionicBackdrop as a dependency to the controller, then creating the $scope.showBackdrop() function that will call the retain method immediately. Then, after three seconds, it will call the release method. We are using $timeout for the release method, so we need to add it as a controller dependency too. .controller('myCtrl', function($scope, $ionicBackdrop, $timeout) { $scope.showBackdrop = function() { $ionicBackdrop.retain(); $timeout(function() { $ionicBackdrop.release(); }, 3000); }; }) 21. Ionic – JavaScript Backdrop Ionic 101 You will notice how the screen is darker in the following image, since the backdrop is applied. Ionic 102 Almost every mobile app contains some fundamental elements. Usually these elements include a header and a footer, which will cover the top and the bottom part of the screen. All the other elements will be placed between these two. Ionic provide ion-content element that serves as a container, which will wrap all the other elements that we want to create. Let us consider the following example:col 1col 2col 322. Ionic – JavaScript Content Ionic 103 In this chapter, we will understand what JavaScript forms are and will learn what a JavaScript checkbox, radio buttons and toggle are. Using ion-checkbox Let us see how to use the Ionic JavaScript checkbox. Firstly, we need to create an ion-checkbox element in the HTML file. Inside this, we will assign an ng-model attribute that will be connected to the angular $scope. You will notice that we are using a dot when defining the value of a model even though it would work without it. This will allow us to keep the link between the child and the parent scopes at all times. This is very important as it helps to avoid some issues that could happen in the future. After we create the element, we will bind its value using angular expressions.Checkbox 1 Checkbox 2 Checkbox 1 value is: {{checkboxModel.value1}}
Checkbox 2 value is: {{checkboxModel.value2}}
Next, we need to assign values to our model inside the controller. The values we will use are false, since we want to start with unchecked checkboxes. $scope.checkboxModel = { value1 : false, value2 : false }; 23. Ionic – JavaScript Forms Ionic 104 The above code will produce the following screen: Ionic 105 Now, when we tap the checkbox elements, it will automatically change their model value to “true” as shown in the following screenshot. Ionic 106 Using ion-radio To start with, we should create three ion-radio elements in our HTML and assign the ng-model and the ng-value to it. After that, we will display the chosen value with angular expression. We will start by unchecking all the three radioelements, so the value will not be assigned to our screen.Radio 1 Radio 2 Radio 3 Radio value is: {{radioModel.value}}
The above code will produce the following screen: Ionic 107 When we tap on the second checkbox element, the value will change accordingly. Using ion-toggle You will notice that toggle is similar to checkbox. We will follow the same steps as we did with our checkbox. In the HTML file, first we will create ion-toggle elements, then assign the ng-model value and then bind expression values of to our view.Toggle 1 Toggle 2 Toggle 3 Toggle value 1 is: {{toggleModel.value1}}
Toggle value 2 is: {{toggleModel.value2}}
Toggle value 3 is: {{toggleModel.value3}}
Next, we will assign values to $scope.toggleModel in our controller. Since, toggle uses Boolean values, we will assign true to the first element and false to the other two. Ionic 108 $scope.toggleModel = { value1 : true, value2 : false, value3 : false }; The above code will produce the following screen: Ionic 109 Now we will tap on second and third toggle to show you how the values change from false to true. Ionic 110 Various Ionic events can be used to add interactivity with users. The following table explains all the Ionic events. Event Name Event Detail on-hold Called when duration of the touch is more than 500ms. on-tap Called when duration of the touch is less than 250ms. on-double-tap Called when there is double tap touch. on-touch Called immediately when touch begins. on-release Called when touch ends. on-drag Called when touch is moved without releasing around the page in any direction. on-drag-up Called when element is dragged up. on-drag-right Called when the element is dragged to the right. on-drag-left Called when the element is dragged to the left. on-drag-down Called when the element is dragged down. on-swipe Called when any dragging has high velocity moving in any direction. on-swipe-up Called when any dragging has high velocity moving up. on-swipe-right Called when any dragging has high velocity moving to the right. on-swipe-left Called when any dragging has high velocity moving to the left. on-swipe-down Called when any dragging has high velocity moving down. 24. Ionic – JavaScript Events Ionic 111 Using Events Since all the Ionic events can be used the same way, we will show you how to use the on-touch event and you can just apply the same principles to the other events. To start with, we will create a button and assign an on-touch event, which will call the onTouchFunction(). Then we will create that function in our controller scope. $scope.onTouchFunction = function() { // Do something... } Now, when touch event occurs the onTouchFunction() will be called. Ionic 112 This is the Ionic directive, which will add the header bar. Using JavaScript Header To create a JavaScript header bar, we need to apply the ion-header-bar directive in the HTML file. Since the default header is white, we will add title, so it will be showed on white background. We will add it to our index.html file.Title!
Title!
Title!
Title!
Subheader
Title!
Footer
Sub Footer
Footer
Item 1 Item 2 Item 3 Item 1 Item 2 Show Delete 2 Ionic 125 The above code will produce the following screen: Reorder Button The Ionic directive for the reorder button is ion-reorder-button. The element we created has an on-reorder attribute that will trigger the function from our controller whenever the user is dragging this element.Item {{item.id}} Item with two buttons... Button 1 Button 2 Modal Title
' + ' ', { scope: $scope, animation: 'slide-in-up' }) $scope.openModal = function() { $scope.modal.show(); }; $scope.closeModal = function() { Ionic 138 $scope.modal.hide(); }; //Cleanup the modal when we're done with it! $scope.$on('$destroy', function() { $scope.modal.remove(); }); // Execute action on hide modal $scope.$on('modal.hidden', function() { // Execute action }); // Execute action on remove modal $scope.$on('modal.removed', function() { // Execute action }); }); All three examples will have the same effect. We will create a button to trigger the $ionicModal.show() to open modal. HTML Code When we open modal, it will contain a button that will be used for closing it. We created this button in a HTML template. Ionic 139 There are also other options for modal optimization. We already showed how to use scope and animation. The following table shows other options. Option Type Detail focusFirstInput boolean It will auto focus first input of the modal. backdropClickToClose boolean It will enable closing the modal when backdrop is tapped. Default value is true. hardwareBackButtonClose boolean It will enable closing the modal when hardware back button is clicked. Default value is true. Ionic 140 Navigation is one of the core components of every app. Ionic is using the AngularJS UI Router for handling the navigation. Using Navigation Navigation can be configured in the app.js file. If you are using one of the Ionic templates, you will notice the $stateProvider service injected into the app config. The simplest way of creating states for the app is showed in the following example. The $stateProvider service will scan the URL, find the corresponding state and load the file, which we defined in app.config. app.js Code .config(function($stateProvider) { $stateProvider .state('index', { url: '/', templateUrl: 'templates/home.html'}) .state('state1', {url: '/state1', templateUrl: 'templates/state1.html'}) .state('state2', {url: '/state2', templateUrl: 'templates/state2.html',}); }); The state will be loaded into the ion-nav-view element, which can be placed in the index.html body. index.html Code' + ' ' + 'Modal Title
' + ''+ '' + ' ' + 'When we created states in the above-mentioned example, we were using the templateUrl, so when the state is loaded, it will search for matching the template file. Now, we will open the templates folder and create a new file state1.html, which will be loaded when the app URL is changed to /state1. state1.html Code This is State 1 !!! Back Title Ionic 145 Controlling the Navigation Bar We can control the behavior of the navigation bar by using the $ionicNavBarDelegate service. This service needs to be injected to our controller. HTML Code ' + ' '; $scope.popover = $ionicPopover.fromTemplate(template, { scope: $scope }); $scope.openPopover = function($event) { $scope.popover.show($event); }; $scope.closePopover = function() { $scope.popover.hide(); }; //Cleanup the popover when we're done with it! $scope.$on('$destroy', function() { $scope.popover.remove(); }); 32. Ionic – JavaScript Popover Ionic 149 // Execute action on hide popover $scope.$on('popover.hidden', function() { // Execute action }); // Execute action on remove popover $scope.$on('popover.removed', function() { // Execute action }); }) As discussed above, the second and the third way of adding popover is to use fromTemplateUrl method. The controller code will be the same for both ways except the fromTemplateUrl value. If the HTML is added to an existing template, the URL will be the popover.html. If we want to place the HTML into the templates folder, then the URL will change to templates/popover.html. Both examples have been explained below. Controller Code for the fromTemplateUrl .controller('MyCtrl', function($scope, $ionicPopover) { $ionicPopover.fromTemplateUrl('popover.html', { scope: $scope }).then(function(popover) { $scope.popover = popover; }); $scope.openPopover = function($event) { $scope.popover.show($event); }; $scope.closePopover = function() { $scope.popover.hide(); }; Ionic 150 //Cleanup the popover when we're done with it! $scope.$on('$destroy', function() { $scope.popover.remove(); }); // Execute action on hide popover $scope.$on('popover.hidden', function() { // Execute action }); // Execute action on remove popover $scope.$on('popover.removed', function() { // Execute action }); }) Now, we will add the script with template to the HTML file, which we are using for calling the popover function. HTML code from the Existing HTML file If we want to create an HTML as a separate file, we can create a new HTML file in the templates folder and use the same code as we used in the above-mentioned example without the script tags. Ionic 151 The newly created HTML file is as follows.' + ' '+ 'Popover Title
' + '' + 'Popover Content!' + ' ' + 'Popover Title
Popover Content! Item {{ item.id }} Controller Code .controller('MyCtrl', function($scope) { $scope.items = []; $scope.noMoreItemsAvailable = false; $scope.loadMore = function() { $scope.items.push({ id: $scope.items.length}); if ($scope.items.length == 30) { $scope.noMoreItemsAvailable = true; } $scope.$broadcast('scroll.infiniteScrollComplete'); }; }) Other attributes can also be used with ion-infinite-scroll. Some of them are listed in the table below. Ionic 167 Scroll Attributes Attribute Type Details on-infinite expression What should be called when scrolled to the bottom. distance string The distance from the bottom needed to trigger oninfinite expression. spinner string What spinner should be shown while loading immediatecheck Boolean Should ‘on-infinite’ be called when screen is loaded Scroll Delegate Ionic offers delegate for full control of the scroll elements. It can be used by injecting a $ionicScrollDelegate service to the controller, and then use the methods it provides. The following example shows a scrollable list of 20 objects. HTML Code Controller Code .controller('DashCtrl', function($scope, $ionicScrollDelegate) { $scope.scrollTop = function() { $ionicScrollDelegate.scrollTop(); }; }) The above code will produce the following screen: Ionic 169 When we tap the button, the scroll will be moved to the top. Now, we will go through all of the $ionicScrollDelegate methods. Delegate Methods Method Parameters Type Details scrollTop(parameter) shouldAnimat e boolean Should scroll be animated scrollBottom(parameter) shouldAnimat e boolean Should scroll be animated Ionic 170 scrollTo(parameter1, parameter2, parameter3) left, top, shouldAnimat e number, number, integer First two parameters determine value of the x, and y-axis offset. scrollBy(parameter1, parameter2, parameter3) left, top, shouldAnimat e number, number, integer First two parameters determine value of the x, and y-axis offset. zoomTo(parameter1, parameter2, parameter3, parameter4) level, animate, originLeft, originTop number, boolean, number, number level is used to determine level to zoom to. originLeft and origin Right coordinates where the zooming should happen. zoomBy(parameter1, parameter2, parameter3, parameter4) factor, animate, originLeft, originTop number, boolean, number, number factor is used to determine factor to zoom by. originLeft and origi nRight coordinates where the zooming should happen. getScrollPosition() / / Returns object with two number as properties: left and right . These numbers represent the distance the user has scrolled from the left and from the top respectively. anchorScroll(parameter1) shouldAnimat e boolean It will scroll to the element with the same id as the window.loaction.ha sh. If this element does not exist, it will scroll to the top. Ionic 171 freezeScroll(parameter1) shouldFreeze boolean Used to disable scrolling for particular scroll. freezeAllScrolls(parameter1) shouldFreeze boolean Used to disable scrolling for all the scrolls in the app. getScrollViews() / object Returns the scrollView object. $getByHandle(parameter1) handle string Used to connect methods to the particular scroll view with the same handle. $ionicScrollDelegate. $getByHandle('myhandle').scrollTop(); Ionic 172 Side menu is one of the most used Ionic components. The Side menu can be opened by swiping to the left or right or by triggering the button created for that purpose. Using Side Menu The first element that we need is ion-side-menus. This element is used for connecting the side menu with all the screens that will use it. The ion-side-menu-content element is where the content will be placed and the ion-side-menu element is the place where we can put a side directive. We will add the side menu to the index.html and place the ion-nav-view inside the side menu content. This way the side menu can be used throughout entire app. index.htmlItem 1Item 2Item 3Item 4Item 5Item 6Item 7Item 8Item 9Item 10Item 11Item 12Item 13Item 14Ionic 168Item 15Item 16Item 17Item 18Item 19Item 20side = "left"> SIde Menu
Box 1
Box 2
Box 3
Controller Code .controller('MyCtrl', function($scope, Camera) { $scope.takePicture = function (options) { var options = { quality : 75, targetWidth: 200, targetHeight: 200, sourceType: 1 }; Camera.getPicture(options).then(function(imageData) { $scope.picture = imageData;; }, function(err) { console.log(err); }); }; }) Ionic 192 The output will look as shown in the following screenshot. If you want to use images from your gallery, the only thing you need to change is the sourceType method from your options parameter. This change will open a dialog popup instead of camera and allow you to choose the image you want from the device. You can see the following code, where the sourceType option is changed to 0. Now, when you tap the second button, it will open the file menu from the device. Ionic 193 Controller Code .controller('MyCtrl', function($scope, Camera) { $scope.getPicture = function (options) { var options = { quality : 75, targetWidth: 200, targetHeight: 200, sourceType: 0 }; Camera.getPicture(options).then(function(imageData) { $scope.picture = imageData;; }, function(err) { console.log(err); }); }; }) Ionic 194 The output will look as shown in the following screenshot. Ionic 195 When you save the image you took, it will appear on the screen. You can style it the way you want. Several other options can be used as well, some of which are given in the following table. Parameter Type Details quality Number The quality of the image, range 0-100 destinationType Number Format of the image. sourceType Number Used for setting the source of the picture. allowEdit boolean Used for allowing editing of the image. encodingType Number Value 0 will set JPEG, and value 1 will set PNG. Ionic 196 targetWidth Number Used for scaling image width. targetHeight Number Used for scaling image height. mediaType string Used for setting the media type. cameraDirection Number Value 0 will set the back camera, and value 1 will set the front camera. popoverOptions string IOS-only options that specify popover location in iPad. saveToPhotoAlbum boolean Used for saving image to photo album. correctOrientation boolean Used for correcting orientation of the captured images. Ionic 197 This plugin is used for connecting to Facebook API. Before you start integrating Facebook, you need to create a Facebook app here. You will create a web app and then skip the quick start screen. Then, you need to add the website platform on the settings page. You can use the following code snippet for the site URL while in development. http://localhost:8100/ After that, you need to add Valid OAuth redirect URIs on the settings/advanced page. Just copy the following two URLs. https://www.facebook.com/connect/login_success.html http://localhost:8100/oauthcallback.html Installing Facebook Plugin We did all the steps above to tackle some issues that often appear when using this plugin. This plugin is hard to set up because there are a lot of steps involved and documentation doesn't cover all of them. There are also some known compatibility issues with other Cordova plugins, so we will use Teleric verified plugin version in our app. We will start by installing browser platform to our app from the command prompt. C:\Users\Username\Desktop\MyApp>ionic platform add browser Next, what we need to do is to add the root element on top of the body tag in index.html. index.html
Now we will add Cordova Facebook plugin to our app. You need to change APP_ID and APP_NAME to match the Facebook app you created before. C:\Users\Username\Desktop\MyApp>cordova -d plugin add https://github.com/Telerik-Verified-Plugins/Facebook/ --variable APP_ID = "123456789" --variable APP_NAME = "FbAppName" Now open index.html and add the following code after your body tag. Again you need to make sure that the appId and version are matching the Facebook app you created. This will ensure that Facebook SDK is loaded asynchronously without blocking the rest of the app. 41. Ionic ─ Cordova Facebook Ionic 198 index.html Angular Service Since we installed everything, we need to create service that will be our connection to the Facebook. These things can be done with less code inside the controller, but we try to follow the best practices, so we will use Angular service. The following code shows the entire service. We will explain it later. services.js .service('Auth', function($q, $ionicLoading) { this.getLoginStatus = function() { var defer = $q.defer(); FB.getLoginStatus(function(response) { if (response.status === "connected") { console.log(JSON.stringify(response)); } else { console.log("Not logged in"); } }); Ionic 199 return defer.promise; } this.loginFacebook = function() { var defer = $q.defer(); FB.login(function(response) { if (response.status === "connected") { console.log(JSON.stringify(response)); } else { console.log("Not logged in!"); } }); return defer.promise; } this.logoutFacebook = function() { var defer = $q.defer(); FB.logout(function(response) { console.log('You are logged out!'); }); return defer.promise; } this.getFacebookApi = function() { var defer = $q.defer(); FB.api("me/?fields = id,email", [], function(response) { if (response.error) { console.log(JSON.stringify(response.error)); } else { console.log(JSON.stringify(response)); } }); return defer.promise; } }); Ionic 200 In the above service, we are creating four functions. First three are self-explanatory. The fourth function is used for connecting to Facebook graph API. It will return the id and email from the Facebook user. We are creating promise objects to handle asynchronic JavaScript functions. Now we need to write our controller that will call those functions. We will call each function separately for better understanding, but you will probably need to mix some of them together to get the desired effect. Controller Code .controller('MyCtrl', function($scope, Auth, $ionicLoading) { $scope.checkLoginStatus = function() { getLoginUserStatus(); } $scope.loginFacebook = function(userData) { loginFacebookUser(); }; $scope.facebookAPI = function() { getFacebookUserApi(); } $scope.logoutFacebook = function() { logoutFacebookUser(); }; function loginFacebookUser() { return Auth.loginFacebook(); } function logoutFacebookUser() { return Auth.logoutFacebook(); } function getFacebookUserApi() { return Auth.getFacebookApi(); } function getLoginUserStatus() { return Auth.getLoginStatus(); } }) You are probably wondering why didn't we returned Auth service directly from the function expressions (first four functions). The reason for this is that you will probably want to add some more behavior after the Auth function is returned. You might send some data to Ionic 201 your database, change the route after login, etc. This can be easily done by using JavaScript then() method to handle all the asynchronous operations instead of callbacks. Now we need to allow users to interact with the app. Our HTML will contain four buttons for calling the four functions we created. HTML Code When the user taps the LOG IN button, the Facebook screen will appear. The user will be redirected to the app after the login is successful. Ionic 202 The Cordova InAppBrowser plugin is used to open external links from your app inside a web browser view. Using Browser It is very easy to start working with this plugin. All you need to do is to open the command prompt window and install the Cordova plugin. C:\Users\Username\Desktop\MyApp>cordova plugin add org.apache.cordova.inappbrowser This step allows us to start using the inAppBrowser. We can now create a button that will lead us to some external link, and add a simple function for triggering the plugin. HTML Code Controller Code .controller('MyCtrl', function($scope, $cordovaInAppBrowser) { var options = { location: 'yes', clearcache: 'yes', toolbar: 'no' }; $scope.openBrowser = function() { $cordovaInAppBrowser.open('http://ngcordova.com', '_blank', options) .then(function(event) { // success }) .catch(function(event) { // error }); } }) 42. Ionic − Cordova InAppBrowser Ionic 203 When the user taps the button, the InAppBrowser will open the URL we provided. Several other methods can be used with this plugin, some of which are in the following table. Ionic 204 Cordova $inAppBrowser Methods Method Parameters Type Details setDefaultOptions (parameter1) options object Used to set global options for all InAppBrowsers. open(parameter1, parameter2, parameter3) URL, target, options string, string, object There are three targets available. _blank will open new inAppBrowser instance. _system will open system browser and _self will use current browser instance. close / / Used to close InAppBrowser. Cordova InAppBrowser Events This plugin also offers events that can be combined with $rootScope. Example Details $rootScope.$on('$cordovaInAppBrowser:loadstart', function(e, event)); Called when inAppBrowser start loading the page. $rootScope.$on('$cordovaInAppBrowser:loadstop', function(e, event)); Called when inAppBrowser has finished loading the page. $rootScope.$on('$cordovaInAppBrowser:loaderror', function(e, event)); Called when inAppBrowser has encountered error. $rootScope.$on('$cordovaInAppBrowser:exit', function(e, event)); Called when inAppBrowser window is closed. Ionic 205 This plugin is used for adding native audio sounds to the Ionic app. Using Native Audio To be able to use this plugin, we first need to install it. Open the command prompt window and add the Cordova plugin. C:\Users\Username\Desktop\MyApp>cordova plugin add cordova-plugin-nativeaudio Before we start using this plugin, we will need audio file. For simplicity, we will save our click.mp3 file inside the js folder, but you can place it wherever you want. The next step is to preload the audio file. There are two options available, which are – preloadSimple – It is used for simple sounds that will be played once. preloadComplex – It is for sounds that will be played as looping sounds or background audio. Add the following code to your controller to preload an audio file. We need to be sure that the Ionic platform is loaded before we can preload the audio file. Controller Code $ionicPlatform.ready(function() { $cordovaNativeAudio .preloadSimple('click', 'js/click.mp3') .then(function (msg) { console.log(msg); }, function (error) { console.log(error); }); $cordovaNativeAudio.preloadComplex('click', 'js/click.mp3', 1, 1) .then(function (msg) { console.log(msg); }, function (error) { console.error(error); }); }); 43. Ionic – Cordova Native Audio Ionic 206 In the same controller, we will add code for playing audio. Our $timeout function will stop and unload looping audio after five seconds. $scope.playAudio = function () { $cordovaNativeAudio.play('click'); }; $scope.loopAudio = function () { $cordovaNativeAudio.loop('click'); $timeout(function () { $cordovaNativeAudio.stop('click'); $cordovaNativeAudio.unload('click'); }, 5000); } The last thing we need is to create buttons for playing and looping audio. HTML Code When we tap on play button, we will hear the sound once and when we tap on the loop button, the sound will loop for five seconds and then stop. This plugin works only on an emulator or a mobile device. Ionic 207 This plugin is used for adding a geolocation plugin to the Ionic app. Using Geolocation There is a simple way to use the geolocation plugin. We need to install this plugin from the command prompt window. C:\Users\Username\Desktop\MyApp>cordova plugin add cordova-plugin-geolocation The following controller code is using two methods. The first one is the getCurrentPosition method and it will show us the current latitude and longitude of the user’s device. The second one is the watchCurrentPosition method that will return the current position of the device when the position is changed. Controller Code .controller('MyCtrl', function($scope, $cordovaGeolocation) { var posOptions = {timeout: 10000, enableHighAccuracy: false}; $cordovaGeolocation .getCurrentPosition(posOptions) .then(function (position) { var lat = position.coords.latitude var long = position.coords.longitude console.log(lat + ' ' + long) }, function(err) { console.log(err) }); var watchOptions = {timeout : 3000, enableHighAccuracy: false}; var watch = $cordovaGeolocation.watchPosition(watchOptions); watch.then( null, function(err) { console.log(err) }, 44. Ionic – Cordova Geolocation Ionic 208 function(position) { var lat = position.coords.latitude var long = position.coords.longitude console.log(lat + '' + long) } ); watch.clearWatch(); }) You might have also noticed the posOptions and watchOptions objects. We are using timeout to adjust maximum length of time that is allowed to pass in milliseconds and enableHighAccuracy is set to false. It can be set to true to get the best possible results, but sometimes it can lead to some errors. There is also a maximumAge option that can be used to show how an old position is accepted. It is using milliseconds, the same as timeout option. When we start our app and open the console, it will log the latitude and longitude of the device. When our position is changed, the lat and long values will change. Ionic 209 This plugin allows us to record and playback audio files on a device. Using Media As with all the other Cordova plugins, the first thing we need to do is to install it from the command prompt window. C:\Users\Username\Desktop\MyApp>cordova plugin add cordova-plugin-media Now, we are ready to use the plugin. In the following code sample, src is the source mp3 file that we will use for this tutorial. It is placed in js folder, but we need to add /android_asset/www/ before it, so it can be used on android devices. The complete functionality is wrapped inside the $ionicPlatform.ready() function to assure that everything is loaded before the plugin is used. After that, we are creating the media object by using the newMedia(src) method. The media object is used for adding play, pause, stop and release functionalities. Controller Code .controller('MyCtrl', function($scope, $ionicPlatform, $cordovaMedia) { $ionicPlatform.ready(function() { var src = "/android_asset/www/js/song.mp3"; var media = $cordovaMedia.newMedia(src); $scope.playMedia = function() { media.play(); }; $scope.pauseMedia = function() { media.pause(); }; $scope.stopMedia = function() { media.stop(); }; $scope.$on('destroy', function() { 45. Ionic – Cordova Media Ionic 210 media.release(); }); }); } We will also create three buttons for calling play, pause and stop functions. We need to run it on an emulator or a mobile device for this plugin to work. When the user’s tap on the play button, the song.mp3 will start playing. You can see in the above example that we use src as an option parameter. There are other optional parameters that can be used for the newMedia method. Optional Parameters The following table will show all the optional parameters available. Parameter Type Details mediaSuccess function Called after current play/record or stop action has completed. mediaError function Invoked when there is an error. mediaStatus function Invoked to show status changes. Ionic 211 Available Methods The following table will show all the methods available. Method Parameters Details newMedia(parameter1) src Returns media object that will be used for future methods. src is an URI of the audio content. getCurrentPosition / Returns the current position within an audio file. getDuration / Returns the duration of an audio file. play / Used to start or resume playing. pause / Used to pause playback. stop / Used to stop playing. release / Used to release audio resources. seekTo(parameter1) milliseconds Used to set the playback position in milliseconds. setVolume(parameter1) volume Used to change volume. Range is from 0 to 1 startRecord() / Used to start recording. stopRecord / Used to stop recording. Ionic 212 Every mobile app needs an icon and splash screen. Ionic provides excellent solution for adding it and requires minimum work for the developers. Cropping and resizing is automated on the Ionic server. Adding Splash Screen and Icon In the earlier chapters, we have discussed how to add different platforms for the Ionic app. By adding a platform, Ionic will install Cordova splash screen plugin for that platform so we do not need to install anything afterwards. All we need to do is to find two images. The images should be png, psd or ai files. The minimum dimension should be 192x192 for icon image and 2208x2208 for the splash screen image. This dimensions will cover all the devices. In our example, we will use the same image for both. The images need to be saved to resources folder instead of the default ones. After we are done with it, all we need is to run the following in the command prompt window. C:\Users\Username\Desktop\MyApp>ionic resources Now, if you check resources/android or resources/ios folders, you will see that the images we added before are resized and cropped to accommodate different screen sizes. When we run our app on the device, we will see a splash screen before the app is started and we will see that a default Ionic icon is changed. 46. Ionic − Cordova Icon & Splash Screen Ionic 213 NOTE: If you want to use different images for Android and iOS, you can add it to resources/android and resources/ios instead of the resources folder.
- and
- tags for your
lists. You can use any other elements, but the important thing is to
add list and item classes appropriately.
Komentar
Posting Komentar