Introduction to Ionic

In this course, you will learn:

 Ionic Framework
 CSS Components
 JavaScript Elements
 Setting up Ionic CLI
 Ionic Ecosystem

The course is a mix of concepts, practice exercises and intermediate assessments. Hope you
enjoy the course!

What is Ionic?
Ionic is a AngularJS and Cordova based open-source frameworkthatallows developers to
build cross platform applications for allmobile platforms(Android/iOS/ Windows).

Ionic apps are built using web technologies like HTML, CSSandJavaScript,and can be
started using Node.js CLI.

Ionic Documentation
IonicFramework.com has excellent documentation that developers can put to use
immediately.

We will go through few most commonly used CSS, Javascript tags and features in this
course. And the rest, we are sure you will be able to explore, experiement and learn!

Ionic Utilities
Ionic comes with handful of utility classes to help you quickly style your design.

In this module we will learn about the Utilities:

 Color Classes
 Ionicons
 Padding Elements

Ionic Color Classes

Ionic comes with a set of colors to start with, but as a general rule colors are meant to be
overridden!

Ionic purposely does not use words like red or blue. Instead has colors which represent an
emotion or generic theme.

<p class = "Energized">Paragraph 1...</p>

Ionic Icons
Ionic comes with its own free and open-sourced icon font - Ionicons, with over 500 icons to
choose from.

Simply add icon and the Ionicon classname for the icon to show. Icon can be easily looked up
on the Ionicons.com.

<i class="icon ion-star"></i>

Padding
Many components in Ionic purposely have both padding and margin reset set to zero.
Developers can easily control padding and margins throughout the app.

The padding utility classes add a default 10px between the outer box of the element and its
inner content.

Other utility classes like padding-vertical, padding-top, padding-right, ... can be used as

needed.

CSS Components
Ionic comes with a robust set of components which give the app a native look and feel.

These components offer almost all elements that mobile application needs. Components
default styling can be easily overridden as required.

In this module,we will learn about few of the many CSS Components available by default with
Ionic.

More CSS Components

What we have learnt so far are few important CSS classes that can getyoustarted.

Do explore other components like

  Radio Buttons
 CheckBox
 Toggle
 Range
 Badges
 DateTime
 Dropdown Lists

Working with Header Bar

Ionic header bar is located on top of the screen. It can contain title, icons, buttons or any
other elements.

Adding a Header:

<div class="bar bar-header bar-positive">

<button class="button icon ion-navicon">
</button>
<h1 class="title">Awesome Music App
</h1>
</div>

Working with Footer Bar

Ionic footer bar is placed at the bottom of the app screen, and it is almost the same as
working with headers.

Adding a Footer:

<div class="bar bar-footer bar-calm">

<button class="button icon ion-share">
Share with Friends
</button>
<button class="button icon ion-gear-a">
Settings
</button>
</div>

Working with Tabs

Ionic tabs offer fine control over the horizontal positioning and isavery popular method for
enabling mobile navigation. It can contain any combination of text and icons.

Adding Tab Navigation:

<div class = "tabs tabs-icon-top tabs-assertive">

<a class = "tab-item">
<i class = "icon ion-home"></i>
Home
</a>
<a class = "tab-item">
<i class = "icon ion-star"></i>
Favorites
</a>
</div>

Working with Grid

Ionic grid system uses CSS Flexible Box Layout. Add any number of columns, and all of
them will adjust to available space.

*** Evenly Spaced*** and Explicit Column Size Grid:

<div class = "row">

<div class = "col">row1 col1</div>
</div>
<div class = "row">
<div class = "col col-75">row2 col1</div>
<div class = "col">row2 col 2</div>
</div>

Responsive Grid
Responsive classes can be used to turn each column in a row into its own row at certain
breakpoints. This is useful when columns do not fit well in the available area.

Classes for defining when the columns should break into stack of rows:

.responsive-sm - Smaller than landscape phone

.responsive-md - Smaller than portrait tablet

.responsive-lg - Smaller than landscape tablet

Example:

<div class="row responsive-sm">

<div class="col">.col</div>
<div class="col">.col</div>
<div class="col">.col</div>
</div>

Working with Form Inputs

The checkbox and radio button behave like AngularJS checkbox and radio directives.

Similarly, ion-toggle behaves like AngularJS checkbox, except it allows dragging of the

switch’s nub.

Usage:

<ion-checkbox ng-model="isChecked">
Checkbox Label
</ion-checkbox>
<ion-radio ng-model="choice" ng-value="'A'">
Radio A Label
</ion-radio>
<ion-toggle ng-model="option1Mode" toggle-class="toggle-calm">
Option1 Mode
</ion-toggle>

Working with Action Sheet

The Action Sheet is a slide up that lets you choose from set of options.

Assertive options can be highlighted in red and made obvious. Here is a sample Action Sheet
which opens on click of a button.

HTML:

<body>
<div ng-app="ionicApp">
<div ng-controller="AppController">
 <ion-header-bar class="bar-positive">
<h1 class="title">Action Sheet</h1>
</ion-header-bar>
<ion-content class="padding">
<button class="button" ng-click="showAction()">
Show Actionsheet
</button>
</ion-content>
</div>
</div>
</body>

Javascript:

angular.module('ionicApp', ['ionic'])
.controller('AppController', function($scope, $ionicActionSheet){
$scope.showAction=function(){
$ionicActionSheet.show({
titleText: 'ActionSheet Example',
buttons: [
{text:'<i class="icon ion-share"></i>Share Contact'},
{text:'<i class="icon ion-arrow-move"></i>Move Contact to Cloud'},
],
destructiveText: 'Delete Contact',
cancelText:'Cancel',
cancel: function(){
console.log('CANCELLED');
},
buttonClicked: function(index){
console.log('BUTTON CLICKED', index);
return true;
},
destructiveButtonClicked: function(){
console.log('DESTRUCT');
return true;
}
 });
};
});

Working with Side Menus

A container element for side menu(s) and the main content, allows the left and / or right side
menu to be toggled by dragging the main content area side to side.

Usage:

<ion-side-menus>
<ion-side-menu side="left">
</ion-side-menu>

<ion-side-menu-content>
<!-- Main content, usually <ion-nav-view> -->
</ion-side-menu-content>

<ion-side-menu side="right">
</ion-side-menu>
</ion-side-menus>
function ContentController($scope, $ionicSideMenuDelegate) {
$scope.toggleLeft = function() {
$ionicSideMenuDelegate.toggleLeft();
}; }

Working with Slides

ion-slides component is a powerful multi-page container where each page can be swiped or

dragged between.

Usage - HTML:

<ion-content scroll="false">
<ion-slides options="options" slider="data.slider">
 <ion-slide-page>
<div class="box blue"><h1>BLUE</h1></div>
</ion-slide-page>
<ion-slide-page>
<div class="box yellow"><h1>YELLOW</h1></div>
</ion-slide-page>
<ion-slide-page>
<div class="box pink"><h1>PINK</h1></div>
</ion-slide-page>
</ion-slides>
</ion-content>

Usage- Javascript:

$scope.options = {
loop: false, effect: 'fade', speed: 500,
}

$scope.$on("$ionicSlides.sliderInitialized", function(event, data){

// data.slider is the instance of Swiper
$scope.slider = data.slider;
});

$scope.$on("$ionicSlides.slideChangeStart", function(event, data){

console.log('Slide change is beginning');
});

$scope.$on("$ionicSlides.slideChangeEnd", function(event, data){

$scope.activeIndex = data.slider.activeIndex;
$scope.previousIndex = data.slider.previousIndex;
});

Other Javascript Extensions

What we have covered so far are few of many Javascript Extensions available through Ionic.
Few others worth checking:

Loading - An overlay that can be used to indicate activity while blocking user interaction.
Spinner - Provides a variety of animated spinners to let users know the app is
processing/thinking/waiting/chillin’ out.

Navigation - Ionic’s navigation system to keep track of multiple navigation histories.

Testing an Ionic App in a Browser

Start the local development server by navigating to the project directory and running the
command below in the CLI.

> ionic serve

If connected to a network, you can choose to host the app

 In a port in your IP
 In your local host

Hosting the app in IP, allows users to test from other devices by invoking the server IP
address with the port.

Once the command is executed, it will automatically open the app in the browser.

Benefits of Ionic Serve:

 Useful for testing on desktop and device browsers

 Starts Live Reload of app for file changes, helping monitor changes in the file system.

Running App in Emulator

Open the terminal/windows explorer.

Go inside the TestApp directory and type the emulator command to launch the app.

Once the app is launched, click on different tabs to see if the app is working perfectly.

>ionic emulate ios

OR
>ionic emulate android

Note: Optionally, device name can be provided in this command. If not provided, it will
automatically open the app in the latest device iOS/Android Device.

Ionic Resources
Ionic Resources is a really cool tool for automatically generating all the splash screens and
icons for your apps.

Save icons, splashscreens to resources folder of Ionic Project, add platform and run the
resource tool using:

ionic resources

This single command, resizes and crops all images to accommodate different screen
sizes and saves them to resources/android or resources/ios folders.

Ionic View
Ionic View makes it easy to share your Ionic apps with other developers in the organization
and testers around the world, without complicated Beta provisioning.

Ionic Market
Ionic Framework is light and performant, with most essential components and mobile UI
paradigms. If you are looking for anything beyond this, Ionic Market is the place you need to
go.

Ionic Market facilitates an open exchange of Ionic starter apps, themes, and plugins to
jumpstart app development.

Ionic Creator
Ionic Creator is a Rapid Mobile App Builder with simple draganddrop components, that can
help any one to build an App at jet speed.

Going beyond prototying, you can add your own code, export clean, standards compliant
Ionic projects, and even iOS and Android builds ready to submit to the App Stores.

ngCordova
A collection of over 70 native AngularJS extensions on top of the Cordova API that
makesit easy to build, test, and deploy Cordova mobile apps with AngularJS.

ngCordova offers plugins for features like:

 Camera
 Touch ID
 Authorization
  Push Notification
 Geolocation
 Progress Indicator

IONIC Course Summary

In this course, you have learnt:

 Ionic Framework
 Using CSS Components
 Using JavaScript Elements
 Setting up Ionic CLI
 Ionic Ecosystem

This is just a beginning and we encourage you to experiment and explore further to discover a
lot of other cool features that come with IONIC!

QUIZ:

1. Which of the following files contains all required JS files for Ionic and Angular? IONIC.BUNDLE.MIN.JS
2. Which of the following files has the ionic styles? IONIC.CSS
3. Which of the following statement is not true about the IONIC framework? IT IS BUILD ON TOP......
4. Which of the following folders contains icons in Ionic? FONTS
5. Which of the following is not a in-built Ionic template? NAVIGATION
6. Which of the following includes device APIs that allow accessing native device features like camera or
maps? CORDOVA
7. Which of the following classes can be used to group a set of items in a List? ITEM DIVIDER
8. Which of the following classes can be used to create a button that occupies the entire width of the
screen? BUTTON BLOCK
9. Which of the following classes can be used to create margin of certain number pixels around the list
items? LIST-INSET
10. Which of the following tags display a button with rounded corners? BOTH
11. Adding which of the following classes to the content, makes space for the header. HAS HEADER
12. Which of the following classes defines the footer? BAR-FOOTER
13. Ionic Grid system is responsive by default. T
14. Which of the following components uses "CSS Flexible Box Layout"? GRIDS
15. Cards can contain ____. ALL
16. Which of the following CSS components are best to create a News App that displays a picture, caption
with short description? Cards
17. In a responsive Grid, which class, breaks the row of columns, when the window size is smaller than
portrait tablet? responsive-md
18. Which CSS component is ideal for creating top navigation for a mobile app? TABS
19. Which of the following directives can be used to enable the "pull to refresh" functionality? ION
REFRESHER
20. What is the ionic directive that can be used for creating a tab bar? ION TABS
21. Which of the following services can be used to trigger an Action Sheet? $ionicActionSheet
22. Which of the following directives can help in using Ionic custom Scroll View, or the built in overflow
scrolling of the browse? ION CONTENT
23. Which of the following is a content pane that can go over the user’s main view temporarily?
MODAL
24. Which of the following is a slide-up pane that lets the user choose from a set of options? action sheet
25. Which of the following interaction modes can be enabled by using ionList and ionItem directives?
ALL
26. Which of the following components is a multi-page container where each page can be swiped or
dragged between? ION SLIDES
27. Which of the following directives can help in using Ionic custom Scroll View, or the built in overflow
scrolling of the browse? ion content
28. CLI is based on _____. CORDOVA
29. In Ionic CLI, which of the follow commands can be used to automatically monitor changes in the file
system? IONIC SERVE
30. CLI is an extension of _________. NODE.JS
31. What is the command for running an app in IOS emulator? IONIC EMULATE IOS
32. Which of the following is the place to check for community contributed IONIC Components? Ionic
Market
33. Which tool can be used to create icons and splash screens for all supported devices Ionic
Resources
34. Components in Ionic by default have both padding of: 5PX