Angular 2 and TypeScript Workshop
The following cross-platform resources will be required to participate in this workshop:
Node.js environment (LTS): Install from this Link
Note: Issues have been reported with the latest version of
npmpackage manager. Some report that rolling back to a previous version works. These labs were tested with version 3.10.5. On MacOS systems it has been verified that Node 6.x with npm 3.10.8 works.
Angular-CLI scaffold and rapid development tool:
npm i -g email@example.com
Visual Studio Code Interactive Development Environment (IDE): Install from this Link
.NET Core Backend Platform: Install from this Link
Optional Container Platform: Docker Install from this Link
You may want to look ahead and complete the initial set up and
npm install steps for various
modules to pre-load the dependent packages and save development time during the workshop. For the advanced lab that uses .NET Core, you will also need to run
dotnet restore in the project root.
Make a few starter projects like this:
ng new connect-ts-ng2
ng new dependency-injection
ng new data-binding
ng new reactive
For the Advanced:
npm i -g yo
npm i -g generator-aspnetcore-spa
(Chose Angular 2 and the default project name).
Note This repository contains several projects in their finished state. Many of the labs involve transitory states to teach functionality in an iterative fashion. Although you can run the existing labs, it is recommended you walk through the code tutorials to receive the full benefit. For the existing labs, change to the root directory of any given lab and run
ng serveto view the lab. For the labs you work on, it is suggested you create your own parent level folder, i.e.
lab, to run the labs from (so you will end up with
The following modules will be covered in the workshop.
1. Angular Intro (30 minutes)
A quick background introduction to Angular, its history, and its use in modern web applications.
2. Angular "Hello, World." (30 minutes)
A quick and easy Angular project.
The project in TypeScript.
3. Angular-CLI (20 minutes)
A command line tool to scaffold and rapidly develop Angular 2 apps.
4. TypeScript (1 hour)
A quick introduction to TypeScript and its various benefits.
5. Components, Directives, and Pipes (30 minutes)
Getting started with the basics.
6. Dependency Injection (30 minutes)
Understanding lifetime and providers.
7. Data-Binding (30 minutes)
How data flows from parents through to children.
8. Asynchronous Operations and RxJS (30 minutes)
9. Advanced Topics (30 minutes)
- Scaffold a full .NET Core SPA app with database
- Examine routing
10. Optional Topic: Migration
(This is a discussion topic)