Building Web Applications with Angular 2 (ANG2) – Outline

Detailed Course Outline

Angular 2 Introduction

Architectural overview

  • Simplifying development of complex modern applications
  • The organisation of an Angular 2 app
  • Supporting multiple client devices
  • Configuring an Angular 2 development environment
  • Bootstrapping your first Angular 2 application

Getting started with TypeScript

  • Transpiling TypeScript to JavaScript
  • Building an app with TypeScript

Constructing User Interface (UI) Components

Defining components

  • Structure of a component
  • Introducing the component hierarchy and meta data
  • Controlling HTML5 generation with Templates
  • Displaying repeating data with *ngFor
  • Conditional generation of DOM content

Debugging techniques and strategies

  • Interpreting framework error messages
  • Exploring the component hierarchy with Augury

Reducing code complexity with Dependency Injection (DI)

  • Principles of DI
  • Creating loosely coupled applications
  • Configuring providers and declaring Injectables
  • Specifying dependencies with Provider metadata

Testing Angular 2 Components & Functionality

Structuring test strategies

  • Unit testing vs. integration testing
  • Working with mock Angular components
  • Asynchronous testing with ES6 arrow functions

Leveraging 3rd party tools

  • Defining tests with Jasmine and Jasmine Spy
  • Automating tests with Angular CLI and Karma
  • Building and running a Protractor test

Adding Interactivity to Your Applications

Coordinating Component interaction

  • Passing data from parent to child with Input bindings
  • Listening for property changes with ngOnChanges
  • Binding a model to display with interpolation

Managing events

  • Detecting and responding to user interaction
  • Capturing browser events
  • Emitting custom events to trigger behaviour

Navigation and Data Transformation

Creating modular applications

  • Controlling application flow with the Component Router
  • Dividing application functionality across multiple Component trees

Manipulating data with Pipes

  • Formatting dates for display
  • Internationalising yourapps
  • Filtering data with custom Pipes

Building Interactive Forms

Displaying and capturing data

  • Developing forms with ngFormModel and FormBuilder
  • Creating a form from a business object
  • Two-way binding between input controls and data model

Validating form input

  • Leveraging HTML5 and custom validation
  • Providing user feedback from validators

Managing Asynchronous Behaviour

Keeping the App responsive

  • Subscribing to Observables
  • Optimising ngZone change detection with immutability and onPush

Interacting with a REST Web service

  • Retrieving and sending data asynchronously
  • Invoking different HTTP methods
  • Working with the XHR object directly

Extending Angular 2 Capabilities

Migrating from AngularJS 1 to Angular 2

  • Bridging between AngularJS 1 and Angular 2
  • Transcluding Angular 2 components into an AngularJS 1 application

Augmenting Angular 2

  • Adding functionality to the DOM
  • Incorporating a file upload directive
  • Performing animation
  • Creating native mobile apps with NativeScript