The Angular and TypeScript workshop is a full day workshop written and presented by @JeremyLikness for DevNexus 2017. 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 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 angular-cli@1.0.0-beta.24
Note: after this course was created, the Angular CLI was moved from
angular-clito@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
npm installthenng 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 withlab\devnexus-ts-ng2andlab\dependency-injectionetc.)
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.
A quick background introduction to Angular, its history, and its use in modern web applications.
A quick and easy Angular project.
JavaScript
The project in JavaScript.
TypeScript
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.
Working with Observable and understanding asynchronous operations, including the Http Module.
How to use journaling, bookmarks, and query string data in Angular with the Routing Moudle.
State management in Angular applications using Redux.
Better understanding Angular Unit tests and workflow.
How to containerize Angular apps and dependencies.
Have questions? Reach out to Jeremy via the contact form on his blog.