Angular 2 as the basis of hybrid mobile apps

Angular 2 as the basis of hybrid mobile apps

angular2Angular 2 is steping hard and two major development platforms mobile applications are ready to use hybrid base (Nativescript) and to have it in the core of the framework (Ionic v2).

But this is not just an anecdote, but the characteristics of Angular 2, the same code base can be used to implement a Web application and a hybrid application without major complications.

Before you begin, keep in mind:

At the time of this writing, Angular 2 is in Beta; Ionic v2 is in Alpha. Some of these concepts may change…

There are big differences between version 1.x and the new framework in question. That Angular 2 does not require direct manipulation of the DOM of a web page is one of the main. It is this feature that keeps the same basis for various types of applications.


What is primarily needed is a modular base. Having all the code in our app.component will greatly challenge the purpose of this discussion (as well as any purist of good programming practices). The more the application is modulated, with corresponding components, services, and domain classes/surgically separate model, the easier it will then make appropriate changes to adapt to hybrid frameworks.

And so?

In a standard project we will have a structure similar to the following files:

| app/ 
  | comp1/
    | comp1.component.css
    | comp1.component.html
    | comp1.component.specs.ts
    | comp1.component.ts
  | comp2/
    | comp2.component.css
    | comp2.component.html
    | comp2.component.specs.ts
    | comp2.component.ts
  | comp3/
    | comp3.component.css
    | comp3.component.html
    | comp3.component.specs.ts
    | comp3.component.ts
  | shared/
    | service1.ts
    | service2.ts
    | model1.ts
    | model2.ts
  | app.component.css
  | app.component.html
  | app.component.specs.ts
  | app.component.ts
  | app.routes.ts
| main.ts

Where the definition of each component will be decorated by

  selector: 'comp-x',
  templateUrl: 'compx.component.html',
  styleUrls: ['compx.component.css']

And the statement of service providers included in the statement of the principal component. Being a modular implementation, we access the various components in several ways. For this, Angular 2 provides a routing plugin. To use it, import the necessary directives in the component that we desire is used basic routing; and add to the template the < router – outlet> < / router – outlet> Angular knows where to display pages with routed.

Angular knows where to display pages with routed. An example:

import { Component } from '@angular/core';
import { ROUTER_DIRECTIVES } from '@angular/router';

  selector: 'comp-x',
  directives: [ROUTER_DIRECTIVES],
  template: '<router-outlet></router-outlet>'

We must also define routes, properly speaking. Keeping modularity, we generate it in a separate file (app.routes)

import { RouterConfig } from '@angular/router';

import { Comp1 } from './comp1/comp1.component';
import { Comp2 } from './comp3/comp3.component';
import { Comp3 } from './comp3/comp3component';

export const AppRoutes: RouterConfig = [
    { path: "comp1", component: Comp1 },
    { path: "comp2", component: Comp2 },
    { path: "comp3", component: Comp3 }

And we import these routes to our main.ts, as they must be included in the initial application bootstrapping.

import { bootstrap } from '@angular/platform-browser-dynamic';
import { enableProdMode } from '@angular/core';
import { provideRouter } from '@angular/router';

import { AppComponent, environment, AppRoutes } from './app/';

if (environment.production) {

bootstrap(AppComponent, [provideRouter(AppRoutes)]);

To access these routes programmatically, we call on Router.navigate ( [ ‘ / path ‘]);

All cute, but what then?

Once we have the well Modular application and running, we can begin to adapt to the hybrid frameworks.

The difference between the web application and hybrid applications lies in:


Data storage

Access to routes

We will see these in detail.


Not everything is as simple as it seems. In order to view our application, we must make some changes to the visual components.

Ionic v2

In the case of Ionic, the passage is almost see-through. When running on the WebView component of the device operating system, it has the same options as a web browser. To the point that no modification is necessary. However, it is recommended to use the framework’s own directives. They seek to optimize resource utilization, an unknown but fundamental notion in web applications in mobile environments.

For more information, click here.


The framework can’t interpret and display HTML components. Instead, it provides a number of components and events that must be provided in XML format, similar to what must be done in native applications.

For more information, click here.

Data storage
Web applications have both a Local Storage for temporary data; as complex systems of non-relational data base (PouchDB, Loki.js, etc). Mobile devices handle SQLite relational database, so you have to make adjustments.

Ionic v2

As in the previous case, the passage of the web application framework Ionic v2 is almost see-through. You can make adjustments for the non-relational databases are supported by SQLite databases with plugins and adapters. It also has Local Storage (again, for temporary data).

For cases like this, it is that the modularization of the application is required. If we had all the functionality grouped into a single file, or disjointed and repeated throughout the entire application, the modifications necessary to run it in NativeScript would be cumbersome (to say the least) and our tests (the compx.component.specs files .ts ) would fail more than we would like.


Instead of using complicated techniques specific framework, NativeScript uses its own navigation guidelines, always within the environment of Angular 2.With two small changes to the component on which the routing is done, we will have everything ready to migrate our application to Nativescript.

import { Component } from '@angular/core';
import { NS_ROUTER_DIRECTIVES } from 'nativescript-angular/router';

  selector: 'comp-x',
  directives: [NS_ROUTER_DIRECTIVES],
  template: '<page-router-outlet></page-router-outlet>'

Finally, we perform the bootstrapping of the system

import { nativeScriptBootstrap } from "nativescript-angular/application";
import { nsProvideRouter } from "nativescript-angular/router";

import { AppComponent } from "./app.component";
import { AppRoutes } from "./app/app.routes";
nativeScriptBootstrap(AppComponent, [[nsProvideRouter(AppRoutes, {})]]);


All we did in this last step was to change the basis of the application to take NativeScript guidelines. The power of clean code. The power of abstraction of Angular 2 makes these reductions in the development time. Abilities like this remark it as the framework to be followed in the upcoming years.


Comments?  Contact us for more information. We’ll quickly get back to you with the information you need.