Getting Started with Angular 2

On September 14th of this year, the Angular team announced that Angular 2 was finally production-ready. Now in version 2.1, Angular 2 continues to gain popularity, and for good reason! For those unfamiliar with the framework, it is the new and improved version of Google’s AngularJS framework.

Unlike version 1.x, Angular 2 has been built to be completely decoupled from the DOM, meaning that developers can use the framework to build more than just web applications! For example, web developers using Angular 2 can use the native script-angular library to build fully native applications that run on iOS and Android!

In this tutorial, we will be running our app in the browser, and place most of our focus on different key parts of the framework, specifically components, and modules. By the end of the tutorial, we’ll have created a boilerplate Angular 2 application which you can check out below!

The final code for this tutorial can be found in this GitHub Repository.

Angular 2 Components

Angular 2 applications are made up of components.

Before the NgModule decorator was introduced in August, components reigned supreme as the most important part of the framework. Although we will not be discussing routing in this tutorial, the framework makes it extremely easy to tie specific components to specific routes.

In our example, we’re going to take a look at the top-level component of an application. This component will live inside of our index.html file. Specifically, it will live inside of the <my-app> selector inside of our app’s index.html filter. To understand why, let’s take a look at the code for our component.

// app.component.ts
import {
    Component
}
from '@angular/core';

Component({
    selector: 'my-app',
    template: `
	<h2>Hello !!!</h2>
	<p> {{ title }} </p>
`,
    styles: `
	 p {
		color: blue;
	}
  `
})

export class AppComponent {
    title = 'app works!';
}

Import the Component decorator

The first thing we need to do is import the Component from the @angular/core library. This will give us access to the @Component decorator. Next, let’s learn how this decorator allows us to easily configure components.

Configure The Component

Angular 2 uses decorators to add metadata to our application. In our component, we see the following properties being defined:

• selector: This is the HTML tag that is going to hold the code for our component. Because we are dealing with the main AppComponent, this selector will be placed within our index.html file, which is our main HTML file.
  
  

• template: This is the template that our component is tied to. When working with Angular 2, we can use input and output bindings to call code from our component directly into our template. Additionally, users who do not want to use inline templates can opt to use templateUrl to link components with HTML files.
  
  

• styles: The styles property ties a set of styles to a component in the same way that templates work. When defining styles, we can pass in external stylesheets to the styleUrls property just like templateUrl.

Export AppComponent

The last piece of code we see is the export statement. This allows us to import the AppComponent into different files. When creating our main component, it’s important to follow Angular 2′s best-practices and supply it with the name AppComponent.

Angular Modules

Angular Modules allow us to group together bits of our applications, making it easier to re-use and maintain code. As I said before, the @NgModule decorator is fairly new to Angular 2, but it is an integral part of the framework nonetheless.

When working with Angular 2, applications should be split into two types of modules:

• root module

• feature module.

Because we are only building a boilerplate app, we will only have a single, root module.

As applications begin to grow, however, it is encouraged that developers break down applications into sets of feature modules.

We need to ensure our main AppComponent is declared within our main AppModule to ensure our component loads. Luckily for us, the process of doing this is extremely simple and very similar to the process of configuring components. That said, let’s take a look at the code for our AppModule and get an understanding of how it fits in with the framework.

// app.component.ts
import {
    BrowserModule
}
from "@angular/platform-browser";
import {
    AppComponent
}
from "./app.component";
import {
    NgModule
}
from "@angular/core";

@
NgModule({
    imports: [BrowserModule],
    declarations: [AppComponent],
    bootstrap: [AppComponent]
})

export class AppModule {}

Import necessary code

In order for our application to load, we are going to need access to the @NgModule decorator, our main AppComponent, and we need to import the BrowserModule because we are running this as a web application. In addition to BrowserModule, there is a handful of Angular 2-specific modules (such as RouterModule, and FormsModule), that give users access to different features of the framework.

Add metadata to @NgModule

In our example, our top-level NgModule will include the following properties:

• imports: This is where we import any child (or feature) modules that our application may have. In addition to feature modules, we also want to import Angular-specific libraries, such as the RouterModule, into this array, for instances in which we wish to configure routes within our module. In our example, we see that this application utilizes the BrowserModule, which is necessary for web applications to run. Additionally, this module provides developers with built-in Angular 2 functionality like ngIf, ngFor, etc.
  
  

• declarations: To use components within a module, we first need to declare them inside of that module. This makes our application aware of the components we wish to load. In our example, Angular 2 will be able to recognize the HTML selector specified in our main AppComponent and load our application within the <my-app> div tag in our index.html
  
  

• bootstrap: Lastly, we need to specify the entry point of our module. This is the main, root component for a module, which as of now is AppComponent.

Export AppModule

Before we can run this application, we need to export it as a class so we can import it into our main.ts file, and eventually use it to start our app.

Bootstrap our app within the main.ts file

The last thing we need to do is bootstrap our main AppModule. Whereas we bootstrapped our main AppComponent inside of our AppModule, we also need to bootstrap our module for everything to work.

This is often done in a file separate from the main app module to ensure no unnecessary errors come about. In our example, we are using SystemJS to load Angular 2.

To successfully work, our configuration informs SystemJS that our main bundle file is main.ts. To learn more about module loaders and the role tools like SystemJS play in Angular 2, check out this deep dive provided by the Angular team. Moving forward, let’s examine the code needed to load our main AppModule.

// main.ts
import {
    platformBrowserDynamic
}
from '@angular/platform-browser-dynamic';
import {
    AppModule
}
from './app.module';

platformBrowserDynamic().bootstrapModule(AppModule)

First, we see the platformBrowserDynamic method being imported from the platform-tools library

In addition to platformBrowserDynamic Angular 2 provides a number of of methods for compiling an application. This method uses the JIT compiler (Just-in-time) to compile our application at runtime. That said, all we need to do is pass our main AppModule (which we just saw was exported) into the .bootstrapModule() method.

Once that’s done, our application will be working correctly!

Conclusion

And this concludes our tutorial on getting started with Angular 2! Hopefully, by now, you have gained a bit of knowledge about the framework and all of its inner workings! I encourage you to play around with our plnkr, in addition to the GitHub repo for this example app!

Don't forget to pay special attention if you're developing commercial Angular apps that contain sensitive logic. You can protect them against code theft, tampering, and reverse engineering.