Welcome to this review of the Pluralsight course Angular 2: Getting Started 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.

If you don’t have a Pluralsight subscription, you’ll find that the official Angular 2 documentation is very good and as long as you don’t rush, you should be able to follow it okay.

I actually think one of the best things about Angular 2 is that it has very clear and up to date official documentation, because a lot of open source software is very lacking on quality documentation.

Related Courses and resources

You voted for me to review this course:

https://twitter.com/ZombieCodeKill/status/792769627554217984

Deborah has released an updated version of the course Angular 2 Getting Started with the same name and more than an hour of extra material.

The Navigation and Routing module is extended and split onto two separate course modules. There’s also a new course module on Angular modules.

The review below was for the original version of the course, and I am currently updating this review for the newer version of the course. This review already relates to about 75% material in the new course.

John Papa has released a shorter Pluralsight course called Angular 2: First Look and I have reviewed this for you as well.

There is also a more in depth Angular 2 Fundamentals Pluralsight course coming out soon.

An alternative guide to Angular 2 Core Concepts that I found useful is from Victor Savkin.

Angular 2 supports browsers as old as Internet Explorer 9, but is mostly aimed at developers interested in programming using the latest technology. This is why, like React JS, we tend to see new technologies (such as Babel for Transpiling from the latest ES 2015 code to ES5) used alongside it.

Wherever you see the word foo in the examples, substitute it with any word you want to use. Where you see … it means I have skipped some code for brevity so that I can highlight the concept without the code clutter.

Introduction

This aim of this course is to get you up to speed quickly with Angular 2 components, templates and services.

Deborah begins by introducing Angular as a Javascript framework for building client-side applications. She says it makes our HTML more expressive, has powerful data binding, is modular by design, and has built-in back-end integration.

Deborah also asks the question “with so many developers using Angular 1, why do we need an Angular 2?”

She answers this question saying Angular 2 is/has:

• Built for speed
• Modern
• Simplified API
• Enhances productivity

Anatomy of an Angular 2 application

Angular 2 applications are comprised of a set of components, and services that provide functionality across them.

Deborah explains what an Angular 2 component is made up of: templates, classes and metadata. She also covers the role of modules and their relationship with components.

Prerequisites

Deborah says you should know JavaScript, CSS and HTML.

No essential, but helpful, is a knowledge of object oriented programming concepts.

You don’t need any prior knowledge of Angular or TypeScript.

Blog

Deborah’s blog is at http://blogs.msmvps.com/deborahk/ and contains further information about this course. She recommends checking this out if you are having problems with the code for this course.

GitHub Repository

You can find the Angular 2 – Getting Started sample application on Github.

Sample Application

Deborah demonstrates the final sample application. It’s an “ACME product management” app for managing a list of products.

We see there is a “show image” button and clicking on it reveals thumbnail images of each product. The table shows Product, Code, Availability Date, Price and 5 Star Rating.

Above the table is a product filter textbox control.

We can also click on the product name link to go to the relevant product detail screen.

Deborah explains all of the components that will be involved in creating this app.

First Things First

This module covers things we need to decide before we start coding.

Selecting a Language

Deborah describes the following options that we have:

• ES 5
• ES 2015
• TypeScript
• Dart

The “language” used in this course is TypeScript. If you’ve not come across it before, Deborah explains what this is here.

She recommends trying out the TypeScript Playground

Selecting an Editor

The following editors (and others) can work with TypeScript:

• Visual Studio
• Visual Studio Code
• WebStorm
• Atom
• Eclipse

Deborah uses Visual Studio Code in this course.

Setting up our environment

We learn how to install npm, and set up the Angular 2 application.

Deborah introduces Angular CLI as command line tool for generating setup files and boilerplate code for an Angular 2 application.

However the easiest thing for beginners to do is to copy the files from Deborah’s starter project on Github. This includes a package.json file which contains all the dependencies we need.

We see that we can type “npm install” in the Node console to download all the node modules that we need.

Running an Angular 2 application

We see that we can run it from the Node console by typing “npm start”.

We see that the application is configured to watch for changes so whenever we save a change the build is automatically kicked off again. In fact, Deborah has Visual Studio Code configured to auto save, so we see automatically see the changes shortly after we make them.

About Modules

You will want to watch this as it can be confusing with all of the different types of modules in use in the world of JavaScript. Deborah explains that we have:

• Angular 1 modules
• TypeScript modules
• ES 2015 modules (a.k.a. ES6 modules)
• Angular 2 modules

Angular 2 makes use of ES 2015 modules. Deborah summarizes by saying ES modules are about code files, and Angular modules are about our application.

Loading ES modules and hosting our application

We look at our index.html and the script block within it. This covers System.js and what is does for us.

We also look at the systemjs.config.js file to see how it is configured.

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 and directives)
• 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: `

Angular2: Getting Started

` }) export class AppComponent { }

Other Web Components

If you are interested in using web components without using Angular 2, check out Polymer and X-Tag

Modules

Modules are imported using the following TypeScript:

import { Component } from ‘angular2/core’;

Some common angular2 modules:

angular2/core
angular2/animate
angular2/http
angular2/router

For full details on the module system see the architecture overview

The first step in creating an Angular 2 app is creating an index.html file and writing code to build a bare root app component.

Your first 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:

@Component({
selector: 'my-app'
template: `

`
})

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.

A real word app will also contain some directives. This example contains the code for a component within the main app component.

Deborah explains a bit about TypeScript as well as Angular as we create our first component:

app.component.ts

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

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

foo.component.ts

@Component({
selector: 'foo'
template: `foo.html`
})
export class FooComponent { }

index.html

Loading Foo App...

Templating
Angular uses the handlebars style double curly brackets for defining template expressions:

Template:
{{foo}}

Class:
export class FooComponent {
foo: string = 'Your value';
}

This is formally known as interpolation

Built-in Directives

There some built-in directives that allow you to add logic into your html. You can probably already guess what these structural directives do. If you have used ASP.NET MVC or Rails before, it should look familiar already:






 





{{foo.fooName}}

 

 

 

 

The # means foo is a local variable (only used in the template).

Property and Event Binding
As an alternative to template expressions (interpolation), you can do Property Binding like this:

There’s also Event Binding like this:

This calls the specified method in the component:

export class FooComponent {
toggleImage(): void {
this.showImage = !this.showImage;
}
}

Deborah’s sample application demonstrates the show/hide effect

Two-way Binding

This allows other elements on screen to immediately update as the user changes a value. For example as a user enters a value into a textbox, it displays the same value elsewhere on the screen. This can be achieved using the ngModel directive:

So that is 4 ways to achieve data binding: Interpolation, Property Binding, Event Binding and Two-way Binding

Pipes

Anyone who has done command line programming, such as Power Shell, will know that pipes are for transforming data. Some built-in ones are:

• date
• decimal
• lowercase
• number
• percent
• currency
• json
• slice
• uppercase

It also probably won’t surprise you that you implement this using the pipe character. This converts foo.Name to lower case:

{{ foo.Name | lowercase }}

If there isn’t a built in pipe available, you can create your own custom pipes. Here’s an example:

import { FooPipe } from './foo.pipe'

@Component({
...
pipes: [FooPipe]
})

foo.pipe.ts

import { PipeTransform, Pipe } from 'angular2/core';

@Pipe: ({
name: 'foo'
})

export class FooPipe implements PipeTransform {
transform(...) { ... }

}

foo.html

... | foo

Component Styles

Within the component definition you can define inline styles or styleUrls. Defining inline styles is a terrible idea. Here’s an example of setting a styleUrl:

@Component({
selector: 'foo',
templateUrl: 'foo.html',
styleUrls: ['foo.css']
})

Lifecycle Hooks

This is the first thing that I found to be a little less than intuitive. You just have to learn the syntax for this. These are some interfaces used for TypeScript that you won’t need if you are using plain JavaScript:

OnInit does the component initialization. It executes custom initialization logic after your directive’s data-bound properties have been initialized.

OnChanges performs an action after the change to the input properties

OnDestroy does the component cleanup

You need to remember to use ngOnInit and ngOnDestroy inside your class definition.

Here’s a live example on plunker, click on app.ts to see the use of OnInit and OnDestroy

Also see OnInit interface docs

Nested Components

In Deborah’s course, she shows how to code product rating glyphicon stars including parts of a star icon. I hadn’t seen this before, and found this useful.

star.component.html