Start Date10th September 2018
Course CodeSS18-28
Full Fee
Duration4 days
Network Member Subsidised Fee€1,000.00

Programme Overview

A five-day introduction covering modern web development based on the latest version of Angular.

The course focuses on hands-on development with plenty of exercises and challenges. It also explores automated scaffolding, testing and deployment of Angular web applications. Portions of this course will adapt and change in response to the rapid evolution of the Angular codebase.

Course Objectives and Learning Outcomes

The aim is to explain single-page web app development best practices, especially when architecting large, scalable, modular projects.

Who should attend

Individuals who have a good understanding of the underlying technologies HTML, CSS and JavaScript. Some exposure to automation tools is also helpful.

Course Content

AngularJS 2x and the Modern Web Stack

• AngularJS: perfect for large data-driven web apps

• AngularJS 2 and ES6: the massive changes in store for web development

• Brief overview of underlying technologies: HTML5/CSS, ECMAScript 6, NodeJS

• The Document Object Model (DOM) and Shadow DOM

• Overview of coding alternatives: pure Angular, TypeScript or Dart


Getting Started with Angular 2

• Using the online documentation and resources

• Options and resource requirements when moving from Angular 1x

• Architectural approaches for decoupled modular script development

• Choosing development tools

• Dealing with backwards-incompatible, breaking changes to the Angular code base


Creating Angular Apps

• Bootstrapping an application

• Automation scripts

• Package.json

• Angular NPM packages

• Server-side pre-rendering

• Defining modules

• Two-way data binding


Template Syntax

• Iterating over collections

• Modular component styling

• Interpolation • Property binding

• Attribute, class, and style binding

• Event binding


Dependency Injection

• Defining and injecting services

• Providers

• Lazy injection

• Promise-based asynchronous injection


Pipes for Filtering and Rendering

• Built-in pipes

• Parameterizing a pipe

• Chaining pipes

• Stateful pipes



• Dynamic select fields

• Validating data entry

• Debounce



• Component directives

• Attribute directives

• Structural directives


Routing and Navigation

• Route patterns and default routes

• Query string support

• Route configuration

• Working with RESTful services

• History manipulation

• Error handling


Events and Event Handlers

• Binding to events

• Lifecycle Events


Interactions over HTTP

• Consuming JSON and other external data

• Passing parameters over http

• Promises


 ECMAScript 6 Essentials

• Classes and imports

• Immediately-invoked function expressions (IIFE)

• Code-blocks, arrow functions and other sugar-syntax

• Single-threaded execution • Debugging and error handling: strict-mode and try-catch blocks

• Transcoding ES6 for current devices and browsers with Traceur


Building and Testing

• Automated build tools

• Unit Testing: writing test specifications

• End-to-end testing: automated multi-platform and headless testing