Welcome to this review of the Pluralsight course Angular 2: Getting Started (Updated) by Deborah Kurata.

Deborah is an independent software designer/developer specializing in Web and .NET development using AngularJS, C#, and VB.NET. She has won the Microsoft Most Valuable Professional Award 13 times.

The course uses Visual Studio Code as the editor, but if you like using Visual Studio 2015, check out Deborah’s post Angular 2 Getting Started With Visual Studio 2015.

Introduction to Components

This module builds our first component, the “App component”.

What is a component?

An Angular component is made up of a:

• Template (for view layout, created with HTML, with bindings)
• Class (with properties and methods)
• Metadata (defined with a decorator)

We see an example app.component.ts. It has the following elements:

• Import (of angular core’s components)
• Metadata and template
• Class (being exported)

Creating the Component Class

We define a class using the class keyword, followed by the class name.

It’s a convention in Angular to add the word Component as a suffix, e.g. AppComponent.

Deborah covers methods, property names, data types and default values.

Defining the Metadata with a Decorator

A decorator is a function that adds metadata to a class, its members, or its method arguments.

Decorators have been proposed by wycats as a JavaScript feature. It has been implemented in TypeScript.

A common use of the decorator in Angular 2 is in the component declaration:

@Component({ ... })

Deborah introduces the directive name, view layout and binding here.

Importing What We Need

The import statement is part of ES 2015 and implemented in TypeScript.

This page shows all of the Angular 2 modules that we can import:

https://www.npmjs.com/~angular

Demo: creating the App Component

We look again at app.component.ts

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

@Component({
    selector: 'pm-app',
    template: `My 1st Component`
})

A component is comprised of a template, a class, and metadata. Here the selector is metadata and the template is the value between the back ticks:

This is just beginner example. The back ticks are a new ES 2015 feature for multi-line strings. Instead of hard-coding all of your template html in a string, you can specify an html file to the templateUrl property.

This example contains the code for a component within the main app component:

app.component.ts

import { Component } from 'angular2/core';
import {FooComponent} from 'foo.component';
@Component({
selector: 'pm-app'
template: `

`
directives: [FooComponent]
})
export class AppComponent { }

Bootstrapping Our App Component

In this lesson, Deborah begins by explaining the index.html file contains the main page for our application.

We have defined our selector in the component definition. This corresponds to the html tag that we use: <pm-app>

 

We see the other elements that go into our Angular app:

• Systemjs.config.js
• main.ts
• app.module.ts
• app.component.ts

This is a fair amount of work but Deborah says we only need to setup this bootstrapping process once.

Demo: Bootstrapping Our App Component

We create our index.html, including script tags with polyfills for older browsers, and scripts for SystemJS configuration within the head tag.

We run our app by typing “npm start”

index.html

Loading App...

We initially see this message, and then this is replaced when our component is loaded.

Deborah gives an introduction to the browser developer tools here (which you see by pressing F12).

Component Checklist

This is what we need to build a component:

Class -> Code
Decorator -> Metadata
Import what we need from 3rd party libraries, modules or Angular

Deborah provides checklists for each of these stages. She also gives a “Something’s Wrong! Checklist”.

If you are still having problems, there may be a solution on Deborah’s blog. Or you can post on the course discussion page.