Angular2 Training Resources
04 August 2016 - Angular
Update 2016-10-12: Note that this content is outdated. This article contains the current content.
We regularly do Angular trainings. In this blog article I collect important links and demos we typically do during Angular2 trainings.
Getting an Angular2 app up and running from the ground up isn’t easy for beginners. The Angular2 team has a quickstart sample on GitHub which is documented in the Angular2 docs. However, in my opinion it is still challenging for people who are quite new to web development.
Therefore, I created a simplified version of Angular2’s quickstart that I use during trainings. Note that this project is just for learning purposes. It is not for production projects. If you are looking for a more complete seed project that has all you need for non-trivial, real-world projects, you should look at other seed projects like angular2-seed.
You can find my Angular2 sample app on GitHub. It is based on the simple seed project mentioned above.
The code contains lots of comments with links to further readings in the Angular2 docs.
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.).
The directive samples demonstrate the following aspects of Angular2:
- ngFor.component.ts shows how to use
*ngForin templates. It also contains simple demos for bindings (e.g. event bindings with
click, style bindings, etc.).
- ngIf.component.ts shows how to use
*ngIfin templates. It also shows how to bind inputs without having to write TypeScript code.
- view-encapsulation.component.ts shows how view encapsulation works.
- rsTooltip.directive.ts shows how to create a custom attribute directive.
- upper-lowercase.pipe.ts shows how to create a custom pipe.
The DI sample demonstrates various aspects of dependency injection in Angular2.
The forms sample demonstrates various aspects of defining forms in Angular2. It also contains a custom directive with a custom validator.
The master-detail sample demonstrate the following aspects of Angular2:
- Child routes
- Implementing data access service with Angular’s
- RxJS basics
- Various template features, in particular binding scenarios
Our sample application contains a sample for routing. We use the routes to navigate to the samples mentioned above.