Angular 5 Development

This course takes a thorough look at Angular 5. The course covers the new features in Angular 5, as well as providing in-depth coverage of everything introduced in earlier versions. Where appropriate, we also highlight related concepts in AngularJS (version 1.x), to help AngularJS developers make the leap into the current Angular library.

Duration

4 days

 

Prerequisites

  • Familiarity with HTML and JavaScript programming
  • Experience in AngularJS 1.x is beneficial but not required

What you'll learn

  • Angular architectural concepts
  • Creating and testing Angular apps
  • Templates
  • Data binding and forms
  • Dependency injection
  • Pipes
  • Directives and transclusion
  • Routing and navigation
  • Calling REST services
  • Web sockets
  • Angular CLI
  • Angular Universal
  • Testing

Course details

Angular 5 Essentials

  • Features in Angular 5 and earlier versions
  • Angular architecture components
  • Development tools state-of-play

TypeScript and ECMAScript 6 Essentials

  • Overview of TypeScript and ECMAScript 6
  • Transpilation
  • Using the TypeScript Playground
  • Configuring and using the TypeScript transpiler

Understanding TypeScript Syntax

  • Variables and types
  • Functions
  • Classes
  • Generics
  • Inheritance
  • Interfaces

Creating a Simple Angular Application

  • Structure of an Angular application
  • Importing Angular libraries
  • Angular bundles
  • Angular components
  • Templates
  • Binding expressions
  • Bootstrapping Angular

Data Binding

  • A closer look at data binding
  • Two-way data binding
  • Delayed binding
  • Applying CSS styles and classes conditionally
  • Using structural directives
  • Differences in Angular 4 and 5

Pipes

  • Using built-in pipes
  • New pipes in Angular 4
  • Internationalization support in Angular 5
  • Using promises, observables, and the async pipe
  • Defining custom pipes
  • Applying pipes programmatically

Forms

  • Template-driven forms
  • Reactive forms
  • Dynamic (data-driven) forms
  • Validation techniques
  • New features in Angular 5

Configuration

  • A closer look at SystemJS
  • Loading multiple modules
  • Configuring SystemJS
  • Using a package manager
  • Configuring the TypeScript compiler

Component Hierarchies

  • Structuring applications
  • Defining component inputs
  • Defining component outputs
  • The mediator pattern

Dependency Injection

  • Overview of dependency injection in Angular
  • Simple dependency injection
  • Using the provide() function
  • A hierarchy of injectors
  • Global provision
  • Injection into services
  • Values and factories
  • Expression lowering in Angular 5

Angular Routing

  • Getting started with routing
  • The role of routing in Single Page Applications
  • Route parameters and route data
  • Defining multiple router outlets
  • Lazy loading
  • Router lifecycle events

Calling Rest Web Services

  • Overview of Rest services
  • Calling Rest services using HttpClient in Angular 5
  • Dealing with asynchronous results

Web Sockets

  • Web Sockets concepts
  • Calling Web Sockets from JavaScript
  • Using RxJs Observables with Web Sockets

Testing Angular Code

  • Setting the scene for unit testing
  • Getting started with Jasmine
  • Using Jasmine to test Angular code

Implementing Custom Directives

  • Attribute directives
  • Specifying parameters and events
  • Structural directives
  • Transclusion

Angular CLI

  • Overview of Angular CLI
  • Creating a template application
  • Generating components, services, and other artefacts
  • AOT vs. JIT compilation
  • Bundling and tree-shaking
  • TypeScript transforms in Angular 5

Angular Universal

  • The need for server-side rendering
  • Creating an Angular Universal application
  • Build configuration
  • Implementing a server-side host application
  • State Transfer API and DOM support in Angular 5