Angular 5 Quickstart. Part 1: Components and Modules

The aim of this tutorial is to serve as a walkthrough of the most important Angular features, by building a small web application from scratch. I’ll be using Plunker so as to not have to worry too much about setting things up (we’ll maybe leave that for a future post, who knows?), and so that we can start coding straight away.

Plunker setup

If you haven’t used Plunker before, there’s no better way to approach it than to jump right in and have a play with it. It’s a web-based editor and development environment which I’m sure you’ll find very friendly and straightforward to use.

For the purpose of this tutorial we will create a new plunk app from Plunker’s Angular template. We do this by choosing New > Create a new Plunk from a template, and then selecting Angular in the opening menu.

plunkr

Once you’ve done this, you’ll notice that Plunker updated your file structure, with what is now a small Angular 5 app. You can now Run it and see it at work in the preview panel on the right. Mine looks like this:

plunkr1

Our Angular 5 app structure

As we saw earlier, Plunkr has created a few files for us. Let’s now have a quick look at them and see what their uses are.

  • config.js: Configuration for SystemJS. It takes care of module loading and the transpiling of TypeScript into JavaScript.
  • index.html: The main HTML file for our Angular application.
  • src/app.ts: The root component for our application.
  • src/main.ts: The entry point for our application, where the root component is bootstrapped.
  • style.css: CSS styles.

Our Trivia app

We’ll be building a little JavaScript trivia application. It will display a list of trivia questions and answers, as well as provide functionality for the user to add new trivia.

Angular components

For those of you coming from an Angular 1.5+ background, an Angular 5 component is the same as a component in Angular 1.5 and upwards. If you’re from an <1.5 background, a component is the same as an element directive.

Components are the building blocks of Angular applications. They provide the ability to create new HTML entities which form the Angular application. On top of HTML’s pre-built tags like and and their default appearance and behaviour, in Angular we create new custom tags, and these tags are called components.

Now let’s create the first component for our trivia app. Open src/app.ts and let’s get going.

Plunker has already created our main app component, but let’s delete it and start from scratch. We’ll instead create our own component, a class called TriviaComponent.

Your src/app.ts should now look like below:

class TriviaComponent {
}

We’re creating an ES6 class here, which will hold the properties and behaviours for our component. On saving the file you’ll notice that our app no longer seems to work as it did. That’s expected, since our brand new component doesn’t do anything yet.

Selector

Now, remember how we said that components create new HTML custom tags? That’s what we expect from our TriviaComponent as well. We want a <trivia> custom tag to add to our html and hook to the behaviour we’ll be defining for TriviaComponent. For that we’ll take advantage of TypeScript annotations, and specifically the @Component annotation. Let’s ammend our code as ber below:

@Component({
  selector: 'trivia'
})

class TriviaComponent {
}

The @Component annotation adds some extra functionality to the class it’s attached to, in our case TriviaComponent. The selector property tells Angular what custom tag to link our component to. So now we need to add <trivia> to our HTML. We’ll do that in index.html. At the moment we’ve got some leftover html from the component which Plunker generated for us.

Let’s ammend that so that our HTML body looks as follows:

<body>
  <trivia>
    loading...
  </trivia>
</body>

Template

Our component doesn’t do much yet, or anything for that matter. We want it to display a piece of JavaScript trivia. We’ll take advantage of the template attribute of the @Component decorator:

@Component({
  selector: 'trivia',
  template: '<h1>How many JavaScript scopes?</h1><p>Two. Global and local.</p>' })
class TriviaComponent { }

If that looks like HTML, that’s because it is. It’s a little ugly and hard to read in one line like that though, so we’ll use an ES6 template string instead.

@Component({
  selector: 'trivia',
  template: `
    <h1>How many JavaScript scopes?</h1>
    <p>Two. Global and local.</p>
` })
class TriviaComponent { }

Now, everything seems set but we still don’t see our trivia in Plunker’s live preview. It’s because we’ve not finished setting up our component just yet.

Imports

The @Component annotation doesn’t work unless we import it. Add the import to src/app.ts:

@Component({
  selector: 'trivia',
  template: `
    <h1>How many JavaScript scopes?</h1>
    <p>Two. Global and local.</p>
` })
class TriviaComponent { }

This tells Angular that we want to use components.

Now, we’re definitely getting closer, but our app still needs just a little bit more work.

Modules

Angular code is structured into Angular Modules called NgModules. At least one module, the root module, is required by every app. So let’s create our root module:

@NgModule({
  imports: [BrowserModule],
  declarations: [TriviaComponent],
  bootstrap: [TriviaComponent]
})
export class AppModule {
}

All we did here was create a class for our root module AppModule, and decorate it with the @NgModule annotation, with some params. imports specifies other Angular modules needed by our module. BrowserModule is the ng module for the browser, used by almost every Angular application’s root module. declarations lists the components or directives belonging to our module, and bootstrap specifies the root component whcih Angular will bootstrap when it starts the application.

Now the only thing left is to import the last missing pieces, NgModule and BrowserModule. Our code should now look as follows:

import { Component } from '@angular/core';
import { NgModule }      from '@angular/core';
import { BrowserModule } from '@angular/platform-browser';

@Component({
  selector: 'trivia',
  template: `
    <h1>How many JavaScript scopes?</h1>
    <p>Two. Global and local.</p>
  `
})

class TriviaComponent {
}

@NgModule({
  imports: [BrowserModule],
  declarations: [TriviaComponent],
  bootstrap: [TriviaComponent]
})
export class AppModule {
}

It may seem like we’ve been waiting for this for a while, but WOOHOO!, our app is working now. It should look like this:

plunkr2

Now, that all looks great, but there’s one more thing we should quickly look at before we move forward with this.

Bootstrapping

Have a look at src/main.ts. We haven’t really touched this file so far, and it’s all fun and games that we didn’t need to and the app still works, but that’s only a happy coincidence. Because there is some leftover code in src/main.ts that Plunker generated for us, which happens to be correct, but which we should have a quick look at nonetheless. And I mean the following lines:

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

platformBrowserDynamic().bootstrapModule(AppModule)

Let’s go through the above. All we’re doing here is at first importing our AppModule, as well as the less familiar looking platformBrowserDynamic. platformBrowserDynamic tells Angular that we want to run this app in a browser. In Angular 1 that was simply assumed, but newer versions take in account the possibility of other platforms, such as writing an Angular app for mobile via Ionic. Without the browser-only limitation, we need to tell Angular how to bootstrap, and this is where platformBrowserDynamic comes in.

After the import, all we do is tell Angular which module to bootstrap, in our case AppModule.

Et voila!

That’s it. Our app works now. It’s not very complex, but it’s served us pretty well in terms of navigating through Angular’s main concepts. We’ll continue building on top of this in future posts. Until then, happy coding!