Angular2 Training Resources
04 August 2016 - Angular
Update 2016-10-12: Note that this content is outdated. This article contains the current content.
Introduction
We regularly do Angular trainings. In this blog article I collect important links and demos we typically do during Angular2 trainings.
Prerequisites
The prerequisites for Angular trainings are the same as for our JavaScript/TypeScript trainings.
Getting Started
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.
Sample App
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 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.).
Directives
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 withkeyup.enterandclick, 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.
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
- Implementing data access service with Angular’s
Httpclass - 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.
Content
Tags
.NET (40) ADC (1) Android (1) Angular (4) AngularJS (3) ASP.NET (7) ASPNET Core (1) ASPNET (1) Assembler (1) Azure (62) BASTA (2) Blazor (2) C# (35) C (1) CLI (2) Cloud (1) CoderDojo (1) Conferences and Workshops (2) Container (4) CPP (3) CSharp (5) DevOps (2) Docker (12) Documentation (1) DotNet (1) ECMAScript (1) GAB (1) HTML (2) HTML5 (2) Iron Python (1) JavaScript (3) JWT (1) Markdown (1) MEF (3) Microservices (3) Microsoft (2) Minecraft (2) Mobile (2) Node (1) Node.js (2) NPM (1) OData (5) Presentations (4) Project Management (2) Registry (1) Roslyn (2) Silverlight (3) Software Quality Days (1) SPA (1) SQL (3) SQLCE (1) SVG (1) TechDays (1) Techorama (1) Testing (1) TFS (9) time cockpit (4) TypeScript (18) Visual Studio (37) VSCode (1) VSTS (2) WebAssembly (2) Windows (1) WPF (9) Yarn (1)Authors
Related Posts
Techorama Belgium 2019 - Session Material
24 May 2019 - Docker, CSharp, Blazor, Angular, WebAssembly, Techorama
This year, I was again speaker at Techorama Belgium. I did a full-day workshop about Containers in Azure, one session about Angular, and one about Blazor. In this blog post I share the material and recordings of my talks.
Resources for Learning TypeScript and Angular
02 December 2016 - TypeScript, Angular
I regularly do trainings and workshops about web development with TypeScript and Angular. This week, I worked with a group of developers who have a non-web development background. They asked me to summarize the most important readings for learning about modern web development. Their problem isn't a lack of information. The amount of information on the internet is overwhelming and they asked for the really important resources. Here is my best-of-list.
Refresh of Angular 2 Samples
12 October 2016 - Angular, JavaScript, ECMAScript
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.
