If you’re familiar with Angular 1.x, you’ve probably at least stumbled across Ionic at one point or another. It’s an amazing framework that creates hybrid cross-platform apps out of Angular 1.x projects, adding custom directives specifically built for touch-screen UI.

With Angular 2 in beta, it would only make sense that those of us who have become accustomed to tools like Ionic start to wonder when they’ll be ready for work with Angular 2. Fortunately, Ionic 2 is in active development as well, meaning we can start developing with it right now, and get an idea of what’s going to be available once it hits primetime.

Installing Ionic 2 Globally

You’ll overwrite your existing global installation of Ionic if you install v2; it shouldn’t be a problem, because as their docs point out, v2 is backwards compatible.

$ sudo npm install -g ionic@beta

Once it’s installed (about two or three minutes on a good connection), you can go ahead and start developing.

Ionic with Angular 2

Of course, why even bother if you’re not rocking out with the newest and latest sexy? So let’s take a walk through an app created specifically with Angular 2 in mind.

$ ionic start starterCake --ts --v2

The --ts flag will tell the Ionic installer that you want to build an app using TypeScript, while the --v2 flag specifies the Ionic 2 framework. As I said, it’s backwards compatible so you have to specify which version you’re setting up. Hopefully that becomes the default once v2 is released.

Taking a tour

Once the scaffolding of your project is complete, you’ll have a nice folder structure that looks very much like the Ionic v1 scaffold. We can get up and running quickly with the same basic command that we would have used previously:

$ ionic serve

That’ll push out a build, and run it in the default browser. Not a bad zero-to-browser clock time.

The base app

The meat of our project lives in the /app folder. That’s where all of our application logic will live: Angular modules, styles, etc. The starter template comes with a few modules built out for us, from which we can gleen some insight.

First and foremost, the base module lives in /app/app.ts, which should be expected. It pulls in the App and Platform modules from the Ionic framework, which bootstrap and expose data to the application, respectively. As a master module should do, it also pulls in the other three modules:

import {App, Platform} from 'ionic-framework/ionic';
import {Page1} from './pages/page1/page1';
import {Page2} from './pages/page2/page2';
import {Page3} from './pages/page3/page3';

Next is the App decorator that simply lists the template URL for the app, which will be injected into the /www/index.html file. Notice that it points to the compiled version.

    templateUrl: 'build/app.html'

If we open up the /app/app.html (or the compiled version, because they’re the same), you’ll see some of the properties declared in the class constructor being used in the navigation tab directives – specifically the tab root directive.

  <ion-tab [root]="tab1Root" tabTitle="Tab 1" tabIcon="pulse"></ion-tab>
  <ion-tab [root]="tab2Root" tabTitle="Tab 2" tabIcon="chatbubbles"></ion-tab>
  <ion-tab [root]="tab3Root" tabTitle="Tab 3" tabIcon="cog"></ion-tab>
  1. The constructor secifies internal properties that map to the imported Page modules.
  2. Those internal properties – e.g. tab1Root – are set as values to the template [root] directive on each ion-tab component.
  3. Clicking the tab activates the corresponding Page.

Last we have an event handler for running tasks once the platform is ready. Things I would think might go in there include:

  • online/offline handler or message service
  • server-side calls like user authentication
  • local DB sync

I’m sure we’ll all find more reasons to use that once we start building apps for the world to see.


The three pages scaffolded in the starter template all act as components unto themselves, meaning that we’d eventually add sub-components as sub-views to these pages. In their current state, they’re not very deep. But we can still gleen a bit of information from them.

First we’ll see that the base decorator isn’t the Component that we might be used to having traveled through the Angular docs. Instead it’s the Ionic Page decorator, which exposes not only the core Angular directives, but a slew of internal Ionic directives as well. This helps keep our decorator from having to explicitly add all of the Ionic directives individually. As the Ionic docs will tell us:

Pages have all IONIC_DIRECTIVES, which include all Ionic components and directives, as well as Angular’s CORE_DIRECTIVES and FORM_DIRECTIVES, already provided to them, so you only need to supply custom components and directives to your pages.

That’s good to know. It also means that our sub-modules living within these pages will also have access to them.

Additionally, we can start to see some of those directives in use if we open up the individual pages’ HTML files.

<ion-navbar *navbar>
  <ion-title>Tab 1</ion-title>

<ion-content padding class="page1">
  <h2>Welcome to Ionic!</h2>
    This starter project comes with simple tabs-based layout for apps
    that are going to primarily use a Tabbed UI.
    Take a look at the <code>www/app/</code> directory to add or change tabs,
    update any existing page or create new pages.

The last thing I’ll point out – with a bit of self-gratification – is that Inoic adds an .scss file with each page module, which are imported into the app.core.scss file. I went on a bit of a tirade about including styles in component definitions, and this is definitely the way I’d recommend including any structural styles that are necessary for the component to behave accordingly, such as layout transitions or box/flex properties that affect the behavior of the component. Theme-specific styles, such as colors and fonts, should still go into a core theme folder, which the Ionic scaffold does not include.

Initial Conclusions

This new version adds a lot of stuff that’ll have to be read through and used in practice before a general understanding can be had. It’ll be interesting to see how much the new Ionic classes extend the core Angular classes, and how they’ll interact. I’m happy to see that a lot of the old Ionic directives are left in tact, meaning that some of the base functionality doesn’t have to be re-learned. Once I’ve had some luck writing a simple app using Angular 2 and Ionic 2, I’ll come back and document my experience.

Leave a Reply