Book Image

Getting Started with Ionic

By : Rahat Khanna
Book Image

Getting Started with Ionic

By: Rahat Khanna

Overview of this book

Hybrid Apps are a promising choice in mobile app development to achieve cost effectiveness and rapid development. However, they were not preferred over native apps until few years back due to a poor performance and bad user experience, but everything has changed with the release of Ionic. It has evolved as the most popular choice for Hybrid Mobile App development as it tends to match the native experience and provides robust components/tools to build apps. Getting Started with Ionic equips any web developer with the basic knowledge needed to use modern web technologies to build amazing hybrid mobile apps using Ionic. This fast-paced, practical book explains all the important concepts of AngularJS and Cordova Framework required to develop apps, then gives you a brief introduction to hybrid mobile applications. It will guide you through setting up the environment to develop mobile apps, and through the multiple options and features available in Ionic so you can use them in your mobile apps. Features such as the Side Menu, Tabs, Touch Interactions, and native features such as Bar Code, Camera, and Geolocations are all covered.. Finally, we’ll show you how to use Cordova plugins and publish your apps.
Table of Contents (17 chapters)
Getting Started with Ionic
About the Author
About the Reviewer

What is AngularJS?

AngularJS is a JavaScript-based MV* framework that provides a strong backbone to scalable and complex web apps. It also enables developers to extend HTML and program their apps in a declarative paradigm in lieu of an imperative programming style. AngularJS provides us with a way of creating reusable components, setting standard templates in HTML, and reusable business logic with the ability to bind data dynamically to it.

AngularJS is a perfect fit for creating rich Mobile UI Apps as it provides a robust structure to the frontend, which is a reason why the Ionic team has chosen it as their core.

Important concepts in AngularJS

In order to build apps using AngularJS we need to understand the core concepts used in AngularJS and learn how to use them. The prerequisite for learning AngularJS is decent knowledge of HTML, CSS, and JavaScript. The core concepts that will be discussed include modules, directives, controllers, expressions, and filters.


In AngularJS, modules are at the core of everything because an AngularJS App is defined as a module itself. A module is a container for different sections of the app such as controllers, directives, services, and so on. A module can have other module dependencies injected at run time. This feature of AngularJS is called DI (Dependency Injection). It provides super flexibility for unit testing as dependencies can be mocked and injected.

Each module has two important lifecycle hooks implemented as methods registering callbacks. The methods are config and run. The config method is used to set up or provide important configuration settings such as routes, states, and so on, whereas the run function is used like the main method for initiating the module inside the callback registered:


Directives are the most important and yet the most complex part of AngularJS. They can be easily described as a set of markers on DOM elements such as element name, CSS class, an attribute, or a comment, which lets the AngularJS compiler know that specified behavior needs to be attached there. It is advised to encapsulate any DOM manipulation logic into a directive while developing an AngularJS App.

There are plenty of in-built core directives that are part of the ng-module and used in each angular app. We will discuss the essential ones in order to understand the functioning of a directive.

ng-app is the core directive that bootstraps our app. The root angular module name needs to be passed to this directive and is generally used as an attribute, for example:

<html ng-app="my-app">

ng-model is a directive used for binding models from controllers to the views. We will learn about the scope in the text ahead, which is used to hold the models as Plain Old JavaScript Objects. ng-model is used with input, select, and text area controls, for example:

<input type='text' name='textField' ng-model="my-var">

There are many other directives such as ng-class, ng-show, ng-hide, and so on, which you will use while developing your app. Ionic Framework has built most of its components as custom directives and will be used frequently to develop Hybrid Apps using the framework.


In AngularJS, a controller is a constructor function used to augment the view models. The controller can be initiated in two ways, either using the directive ng-controller or it can be associated with a route/state. According to Angular docs, controllers should be used for setting up the initial state of the $scope (view model) object and adding behavior to it.

We should refrain from using it for the following logic:

  • DOM manipulations

  • Formatting input

  • Input validations

  • Sharing of data should be done using services

The example code for a basic controller is:

var newApp = angular.module('NewApp',[]);
newApp.controller('FirstController',['$scope',function($scope) {
  $scope.modelObj = { name:'MyDummyObject' };
  $scope.updateName = function(newName) {
    $ = newName;


We define the dependency injection twice, first as a string and then as an argument to avoid problems during the minification of your JS files. Read more details at


In AngularJS, services are used to store business logic and organize your code into logical units or entities. Angular services are lazily loaded and are wired together using Dependency Injection, as discussed earlier. AngularJS services are singletons and thus instantiated only the first time they are encountered as a dependency to any controller or module.

AngularJS has multiple built-in services out of which $http is the most important one. The $http service provides a wrapper on the browser's XMLHTTPRequest object, or more popularly known as Ajax requests.

We can create AngularJS services using two module factory methods. The methods used are .service or .factory. The former is used when we create the service instance using a constructor function, and the latter is used when a factory function returns the instance of the service. Conceptually, we should use .service when we are integrating to any external API and use .factory if we are creating objects representing app models.

The code sample to create services using both methods is given as follows:

// Using Factory Method
var newApp = angular.module('NewApp',[]);
newApp.factory('MyService',[function() {
  var serviceInstance = {};
  var privateMethod = function() { return 'result'; };
  serviceInstance.exposedMethod = function() {
    return privateMethod();
  return serviceInstance;

In the given code, a factory function available on the angular.module object is used to return a service instance that contains public methods. The service can encapsulate private methods to include logic that should not be exposed:

// Using Service Method
var newApp = angular.module('NewApp',[]);
newApp.service('MyService',[function() {
  var privateMethod = function() { return 'result'; };
  this.exposedMethod = function() {
    return privateMethod();

Services in Angular can be used in the following ways:

  • Representing business entities/models

  • Sharing data across controllers

  • Interface to external web service calls or Ajax requests


In AngularJS, templates are associated with a route/state to display HTML elements and Angular-specific elements. Template code can be directly passed in JS or TemplateURL, for example, URL to the template file can be passed to any object. Angular combines the template to the controller and models to display dynamic content to the user on the browser. $scope is used to bind the controller to the template.

Templates can use Angular directives and expressions that are compiled by the $compile service. The following code shows a simple Angular template:

<html ng-app>
    <title>My First Angular Template</title>
    <h1>Main Section</h1>
    <div ng-controller='MyCtrl'>
      <p>{{ contentStr }}</p>
      <p>Date : {{ dateStr | dateFormat }}</p>
    Name: <input type='text' ng-model='name'>


Expressions are code snippets put in AngularJS templates to create bindings between controllers and templates. The expressions are, by default, represented by {{ }} in the templates. Angular expressions are different from JavaScript expressions as they have some restrictions. They can contain basic arithmetic or concatenation operations, but no control flow statement or function declarations. Angular expressions run against the context of the scope, for example, variables in the bindings are evaluated on the scope object for each respective controller.


Filters are used in expressions to format data before displaying it. Filters are applied using the | operator. There are in-built filters such as currency, number, date, lowercase, and so on.

Example of expressions with a filter in a template:

<p> Total : {{ amount * 32 | currency }} </p>

amount is a scope model, using the * arithmetic operator and the currency filter.