Angular 2 workshop by Gerard Sans

07 Apr 2016
8:30 - 17:00

Angular 2 workshop by Gerard Sans

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

  • Up-to-date skills: HTML/5, DOM, CSS and JavaScript
  • Laptop
  • Being familiar with Angular will ease the learning curve

Schedule

08:30 Registration

09:00 – 17:00 Workshop

Topics

Topics may be subject to change.

  • Introduction to Angular 2
    • Motivations
    • Application life cycle
    • New Architecture
  • ES5, ES6 and TypeScript
    • 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