Angular and TypeScript Workshop
The following cross-platform resources will be required to participate in this workshop:
Node.js environment (LTS 6.x): Install from this Link
Tested on Node version 6.9.4 and NPM version 3.10.5
After installing Node.js, install the Angular-CLI with this command (to keep versions in sync):
npm i -g email@example.com
Note: after this course was created, the Angular CLI was moved from
@angular/cli. The former version still works and should be used for this workshop, as the new CLI version has not been tested with this workshop as of Feb 20 2017. You can safely ignore the errors about it being deprecated for now.
Visual Studio Code Interactive Development Environment (IDE): 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.
Make a few starter projects like this:
ng new devnexus-ts-ng2
ng new dependency-injection
ng new data-binding
ng new reactive
ng new ng-routing
ng new ng-redux
ng new services
Note: This repository contains several projects in their finished state. If you wish to pull down an initial version that you can use as a starting point, use commit 56c194d. 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
Each step of each lab was committed as an atomic unit, so if you wish to see the app at any state of the workshop, browse the commits and pull the state you desire.
If you are having issues with your local environment, consider using the Angular-CLI Container and note the instructions on mounting the appropriate folder.
The following modules will be covered in the workshop.
01 Angular Intro (30 minutes)
A quick background introduction to Angular, its history, and its use in modern web applications.
05 Angular "Hello, World." (30 minutes)
A quick and easy Angular project.
The project in TypeScript.
10 Angular-CLI (20 minutes)
A command line tool to scaffold and rapidly develop Angular 2 apps.
15 TypeScript (1 hour)
A quick introduction to TypeScript and its various benefits.
20 Components, Directives, and Pipes (30 minutes)
Getting started with the basics.
25 Dependency Injection (30 minutes)
Understanding lifetime and providers.
30 Data-Binding (30 minutes)
How data flows from parents through to children.
35 Asynchronous Operations and RxJS (30 minutes)
Observable and understanding asynchronous operations, including the
40 Routing (30 minutes)
How to use journaling, bookmarks, and query string data in Angular with the
45 Angular with Redux (45 minutes)
State management in Angular applications using Redux.
50 Angular Testing (20 minutes)
Better understanding Angular Unit tests and workflow.
55 Angular and Docker (30 minutes)
How to containerize Angular apps and dependencies.
Have questions? Reach out to Jeremy via the contact form on his blog.