Refresh of Angular 2 Samples

12 October 2016 - Angular, JavaScript, ECMAScript

Introduction

For a recent web development training I have refreshed a lot of my Angular 2 samples. They are now based on the Angular CLI and Lint warning free. Additionally, I restructured our JavaScript training slides and created new hands-on labs for JavaScript introduction. All the code samples and the slides are available on GitHub.

Angular 2

You can find my Angular2 sample app on GitHub. It has been created with the Angular CLI. Therefore, you can use all the ng tools like serve, lint, etc. with it.

The Basics

The basic samples demonstrate the following aspects of Angular2:

• home.component.ts shows how to use an external template file.
• hello-world.component.ts shows how to use an embedded template with interpolation.
• template.component.ts shows various aspects of templates and data binding (e.g. interpolation, two-way data binding, class and style bindings, etc.).
• input-output.component.ts shows how to use @Input and @Output to connect components.

Directives

The directive samples demonstrate the following aspects of Angular2:

• ngFor.component.ts shows how to use *ngFor in templates. It also contains simple demos for bindings (e.g. event bindings with keyup.enter and click, style bindings, etc.).
• ngIf.component.ts shows how to use *ngIf in templates. It also shows how to bind inputs without having to write TypeScript code.
• view-encapsulation.component.ts shows how view encapsulation works (emulated and native).
• rsTooltip.directive.ts shows how to create a custom attribute directive.
• upper-lowercase.pipe.ts shows how to create a custom pipe.

Dependency Injection

The DI sample demonstrates various aspects of dependency injection in Angular2.

Forms

The forms sample demonstrates various aspects of defining forms in Angular2. It also contains a custom directive with a custom validator.

Master Detail

The master-detail sample demonstrate the following aspects of Angular2:

• Child routes (app.routes.ts)
• Route parameters
• Implementing a data access service with Angular’s Http class
• RxJS basics
• Various template features, in particular binding scenarios

Routing

Our sample application contains a sample for routing. We use the routes to navigate to the samples mentioned above.

JavaScript

• Our GitHub repository contains a large number of small JavaScript samples that we use (slightly modified depending on the existing knowledge and special interests of attendees) during JavaScript trainings.

• The hands-on-labs are small samples that attendees can create during a training. Depending on the attendees, we often build ad hoc variants (e.g. Angular version, ECMAScript 2015 version, etc.) of these labs during trainings.

• The repository also contains some slides. However, I recommend sticking to the content mentioned above. The slides are just a summary of it.