Build Your First Mobile App With Ionic 2+ & Angular 2+ - Part 4

31 January 2016Ionic 2+, Angular 2+, TypeScript

In this post we'll have a first look at Angular 2 and get familiar with the TypeScript concepts of decorators and modules.

This tutorial is for Ionic 2, you can find the Ionic 1.x tutorial here.

This tutorial is part of a multi-part series:

Part 1 - Introduction to Hybrid Mobile Apps
Part 2 - Set Up your Development Environment
Part 3 - Introduction to TypeScript & ES6
Part 4 - Introduction to Angular 2 (this post)
Part 5 - Build an Ionic 2 App
Part 6 - Navigating between Pages
Part 7 - Test on Emulators and Mobile Devices

###What is Angular 2? Angular is an open-source framework for building (web) applications. The framework takes care of things like navigation, data binding, dependency injection and much more, so you don't have to implement them yourself.

The first version of Angular was created in 2009 and became very popular but in recent years newer frameworks popped up that offered better performance. In 2014 the Angular Team decided to completely rewrite the framework based on lessons learned and that became Angular 2. At the time of writing this post, Angular 2 is in beta, so hopefully we shouldn't be seeing breaking changes in further releases.

The documentation on the Angular 2 website is very good, so make sure you go to http://angular.io and do the 5 Minute QuickStart and Tutorial.

I won't be able to cover all the concepts in Angular 2 in this post, but the most important one to start with is the Angular 2 Component.

###Components A component in Angular implements a view or part of a view in the application. It contains all the code for displaying the view and managing it.

It's always easier to explain with an example, so let's have a look at a simple component that displays the current time.

import {Component} from 'angular2/core';

@Component({
    selector: 'current-time',
    template: '<h1>Time: {{time}}</h1>'
})
export class CurrentTime {
    time: Date;

    constructor() {
        this.time = new Date();
        setInterval(() => this.time = new Date(), 1000);
    }
}

The implementation of the class CurrentTime is very straightforward, it has a property time that is updated every second. As you can see this class doesn't have any specific Angular 2 code in it. The interesting part is the code right above the class that starts with the @Component decorator.

####Decorators Decorators are a new concept in TypeScript (and ES7/ES2016) that you can use to add functionality to a class. It's especially useful for developers of libraries and frameworks, like Angular 2, and you can implement your own decorators if you need to.

The @Component decorator is implemented within the Angular 2 framework. When you add the @Component decorator to your classes, it takes care of things like coupling the class to a view template, data binding, dependency injection, etc.

In our example, we see that the selector for this component is set to current-time, so within our Angular application we'll have an index.html page, that could contain the following HTML code:

<body>
    <current-time>Loading...</current-time>
</body>

When this page is loaded in the browser, Angular will know that when it encounters <current-time>, it needs to replace that with the HTML code in the component's template.

####Data binding The template for our component contains the following HTML code:

<h1>Time: {{time}}</h1>

The {{time}} part is a data binding notation in Angular, that means that instead of displaying {{time}} in the browser, it will display the value from the time property on the CurrentTime object. So every time the value of time is changed the <h1> tag will be automatically updated to display the new value.

In this example, I've only used data binding from a property to the view, but you can obviously use data binding the other way around as well, to get input from the user.

We'll be covering these bindings when we're building our Ionic 2 application in upcoming parts of this tutorial, but if you want a quick overview of all the possible bindings, have a look at the Angular 2 Cheatsheet.

####Modules Now, I'm sure you haven't missed the first line in the example:

import {Component} from 'angular2/core';

The statement above simply means that the TypeScript compiler should look for the angular2/core script in the project and import the Component module from it. This also means that you don't need to write <script> tags in the HTML anymore, because the scripts will be automatically loaded for you.

Angular 2 is split up in many modules so you can choose which functionality you want to include in your application.

Modules are supported by TypeScript and ES6 and you can use them with CommonJS, AMD and other existing module systems. Your Angular 2 project will have a tsconfig.json file where you can configure the module options for the TypeScript compiler.

Notice that our own CurrentTime class declaration is preceded by the export keyword, this means that it can be imported as a module in other script files.

###Final Words This was a very brief introduction to Angular 2, and as I mentioned before, make sure you do the 5 Minute QuickStart and Tutorial to help you understand Angular 2 better and see working examples of Angular 2 apps.

To make an Angular 2 app, you'll have to include a couple more files in the app and bootstrap it, but we won't do that now. We'll cover all these things when we start with Ionic 2 in Part 5 and build a working mobile app.

####Learn More about Angular 2 The Core Concepts of Angular 2
Exploring ES2016 Decorators
Angular 2 Documentation
Learn Angular 2