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 withkeyup.enter
andclick
, 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.