The Angular 2 and TypeScript workshop is a full day workshop written and presented by @JeremyLikness for Connect.Tech 2016. The workshop leverages cross-platform solutions so developers on any of the major (Windows, Linux, and OSX) platforms can take advantage of it. Prior knowledge and experience with web applications and JavaScript is highly recommended to get the most out of the workshop. It is designed to benefit users who have no Angular exposure as well as those familiar with Angular 1.x. Successful installation of the prerequisites is important to complete prior to the workshop to ensure the best possible experience (this will help minimize any potential issues with Wi-Fi availability and bandwidth).
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
npm
package 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 protected]
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
mkdir advanced
cd advanced
yo 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
npm install
thenng serve
to 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 withlab\connect-ts-ng2
andlab\dependency-injection
etc.)
The following modules will be covered in the workshop.
A quick background introduction to Angular, its history, and its use in modern web applications.
A quick and easy Angular project.
The project in JavaScript.
The project in TypeScript.
A command line tool to scaffold and rapidly develop Angular 2 apps.
A quick introduction to TypeScript and its various benefits.
Getting started with the basics.
Understanding lifetime and providers.
How data flows from parents through to children.
- Scaffold a full .NET Core SPA app with database
- Examine routing
- Containerize
(This is a discussion topic)