2 Days: Angular 2 Workshop
Gerard Sans,
Overview
Angular 2 is a revolutionary development platform for creating applications using modern web standards and powered by the Open Source Community following the success of AngularJS.
Angular 2 introduces some major improvements over its predecessor. We are going to cover the main areas so you can start creating your own projects and enjoy its benefits Today.
At Angular Labs we have been following Angular 2 since the initial pre-release versions and sharing our learnings with the community. You can access our lab sessions online and follow the latest topics around Angular.
Prerequisites:
- Being familiar with Angular will ease the learning curve
- Up-to-date skills: HTML/5, DOM, CSS and JavaScript
Introduction to Angular 2
- Motivations
- Application life cycle
- New Architecture
ES5, ES6
- Arrow functions and let keyword; Block scope
- Classes and inheritance; Default parameters
- Destructured assignment
- Generators; Iterators; Maps
- Promises; Rest parameters; Sets
- Spread operator; Template Literals
TypeScript
- Why Angular 2 Team uses TypeScript
- Type annotations and compile-time type checking
- Type inference, Built-in types, Interfaces, Classes, Enumerated type, Mixins, Generics, Tuples
- IDE support
- TSC/TSD tools
Dependency Injection
- Annotations and Metadata
- Configuration
- Asyncronous / Lazy injection
Templating
- New Template Syntax
- Data binding: DOM events/properties, CSS/styles, local variables, embedded templates, Elvis operator
- Introduction to Pipes
- Built-in Directives: NgIf, NgSwitch, NgStyle, NgClass and NgFor
Components
- Basic Component
- Building applications using components
- Input / Output and Events
- Creating a basic Service
Reactive Extensions
- Introduction to RxJS 5
- Observables
- Operators
- Observer
- Subscribe/unsubscribe
HTTP module
- New Data Architecture
- Setting up angular2/http
- Creating a basic HTTP Service (GET)
- Basic Authentication (POST)
- JSONP example. Searching Wikipedia articles
Component Router
- Configuration
- Outlets, links
- Nested routes
Forms
- Template-driven forms
- Model-driven forms
- Validations
- ng-model
Unit Testing
- Tools and Setup
- Testing a Service
- Testing a Component
- Dealing with Asynchronous Tests
Migration to Angular 2
- Phases: Preparation and Upgrade
- Upgrade Strategies
- Introduction to ngUpgrade