Angular 12 Development

This course takes a thorough look at Angular 12, the latest version of the Angular framework. We can also run courses on earlier versions of Angular, if this is what you're looking for - just contact us to discuss the details.

Duration

4 days

 

Prerequisites

  • Familiarity with HTML and JavaScript programming

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

Course details

Angular Essentials

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

TypeScript and Modern ECMAScript Essentials

  • Overview of TypeScript and modern ECMAScript
  • 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

  • Getting started with Angular CLI
  • Structure of an Angular application
  • Importing Angular libraries
  • Angular bundles
  • Angular components
  • Templates
  • Binding expressions
  • Bootstrapping Angular
  • Overview of routing

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 earlier versions of Angular

Pipes

  • Using built-in pipes
  • Internationalization
  • 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

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

Closer Look at Angular Routing

  • 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
  • Dealing with asynchronous results

Web Sockets

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

Implementing Custom Directives

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

A Closer Look at Angular CLI

  • AOT vs. JIT compilation
  • Bundling and tree-shaking
  • Additional techniques

Testing Angular Applications

  • Introduction to Jasmine and Karma
  • Running tests using Angular CLI
  • Testing components and services
  • Mocking techniques