Getting Started with Ionic

Each native mobile platform has a common control/component called a WebView, which is nothing but a Chromeless browser. This component is utilized to open locally hosted web content, for example, HTML pages, CSS files, and JavaScript code. HTML5 and CSS3 provide capabilities to develop responsive apps, which can render nicely on multiple screen sizes. The web technologies have evolved to handle the touch interactions that make them a perfect candidate for developing solutions for smartphones and tablets. The example of development platform and frameworks using this approach are Cordova, Ionic Framework, KendoUI Mobile, F7, Mobile Angular UI, Onsen UI, and many more.

Another category of hybrid app involves cross-compiling multiple native apps from a single programming language. For example, the developer will code using a single language, say, A, which can be converted at compile time or run time into native language components. Generally, these types of frameworks and platforms leverage creating a bridge or a mapping of native components to their custom constructs in the programming language intended for development. Examples for this category are Xamarin (C#), Kony (JS), Corona (C Lang.), Qt(C++), and many more.

We will be talking about WebView-based Hybrid Apps in this book as they are more suitable for large-scale and complex Mobile Apps. In this next section, we will learn more about the anatomy of Hybrid Apps and how they are capable of developing Native Apps for multiple platforms.

Each native platform development kit has a component called WebView, which is nothing but a Chromeless browser control. WebView has the capability to open local or remote web content, which is exploited by Hybrid App frameworks to display the UI of the app using web technologies. This is the most important component of a Hybrid App and has a significant role in deciding the performance of the app.

WebViews in popular platforms such as iOS and Android used to have a different rendering engine and JavaScript engine than the latest browser (Chrome or Safari). Last year, Apple released a new control in its SDK called WKWebView, which uses all the performance optimization such as the Nitro JavaScript engine used by the Safari browser on iOS. On similar lines, Google also released an updated WebView, which uses the rendering engine and JavaScript runtime of Chromium (Chrome browser). Google has also launched a new feature called Updatable WebView from Android (5.0) Lollipop, which enables you to upgrade only the WebView of your Hybrid App.

Crosswalk is an interesting open source project that enables app developers to embed custom WebView into your Hybrid App. With these advancements, Hybrid Apps have become capable of using the latest web features such as WebRTC for real-time multimedia communication, and WebGL for advanced graphics rendering.

All the Hybrid App development frameworks based on WebView have their own native library. It comprises some basic utility functions that support the Hybrid App such as creating app configs, bootstrap code for Native Apps, customization for the WebView, common error/exception handling logic, and so on. The native library is specific to the mobile platform as it involves interacting with the core OS APIs and components.

The most popular framework, for example, Apache Cordova/Phonegap has an architecture of dividing its native library into a core section and pluggable components called plugins. This helps in reducing the bare minimum size of a Hybrid App. Developers can use only the plugins they require for a specific app. A plugin will include native code for a particular feature and a JavaScript interface exposing the native functionality. For example, if you want to use the Fingerprint Authentication API for iOS, you can just include the plugin for iOS and use it apart from the core. It also enables communities to contribute by developing open source plugins.

In a WebView-based Hybrid App, the UI is always written using web technologies, and JavaScript is the language for writing logic and hence we need to call our native code from JS and get results to JS also. A bridge has two functions, one is to enable JS to call any native method and the other is to allow native methods to execute callbacks in JS. The bridge comprises different implementations in different platforms to call JS from native. For example, in Android, Java objects are marshalled into the WebView and can be called from the JS. In iOS, JS calls a specific URL scheme, which is interpreted by the native code. The reverse bridge is a simple global JS function that is called by the WebView passing special arguments such as callback results or specific commands.

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:

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) {
    $scope.modelObj.name = newName;
  }
});

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:

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

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.