Angular 6 Development

Angular 6 Development

Audience

This course is for anyone who wants to learn Angular 6 development.

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

Prerequisites

You should have familiarity with HTML and JavaScript programming.

Experience in AngularJS 1.x is beneficial but not required.

Duration

4 days.

Course Objectives

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
  • What’s new in Angular 6

Course Content

Angular 6 Essentials
Angular 6 vs Angular 2 vs AngularJS
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 6

Pipes
Using built-in pipes
New pipes in Angular 6
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

Configuration
A closer look at SystemJS
Loading multiple modules
Configuring SystemJS
Using a package manager

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

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
Calling Rest Web Services
Overview of Rest services
Calling Rest services from Angular
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
Angular Universal
The need for server-side rendering
Creating an Angular Universal application
Build configuration
Implementing a server-side host application

What’s New in Angular 6
Angular CLI changes
Packaging components as Angular Elements
Tree-shakeable providers
Using RxJs 6
Additional changes

Virtual Courses

ALL of our courses can be delivered virtually. And our Bath public schedule of courses are now available as live virtual sessions, using the popular Zoom Virtual Classroom and remote labs. Delegates can test their access at: www.zoom.us/test

On-Site Courses

Can't attend one of our public classes? Booking for multiple people?

All our courses are available on your site! Delivered for your staff, at your premises.

Contact us to find out more...