Mastering Angular (TT4168)

5 Days

30 CPD hours

In order to be successful in this class, incoming attendees are required to have current, hands-on experience in developing basic web applications, and be versed in HTML5, CSS3 and JavaScript. This is an intermediate level web development class, designed for experienced web developers, new to Angular, that need to further extend their skills in modern web development.

At the end of this five-day course, students will have an application up and running that incorporates components, directives, custom pipes, reactive forms, routes, services, unit testing, and the REST API. They will add authentication, implement the Material library, and learn how to maintain state with NgRX. They will then take a deeper dive including making their own custom directives, lazy loading modules, and E2E testing. They will learn how to enhance their application with animations and create their own Angular library.
Working within in an engaging, hands-on learning environment, guided by our expert team, attendees will learn explore:
What Angular is and why should you use it
How Angular reduces the amount of code that you must write to add rich functionality to both existing and new web pages
What TypeScript is, why it is useful, and how to use it with Angular
How to facilitate development and deployment using Angular CLI
How to work with the various aspects of the Angular architecture to implement clean, responsive web interfaces
How Routers can support navigation within a Single Page Application
What the best practices are for using Angular so that it works unobtrusively and performs well
How to use Angular with HTTP to support JSON, REST, and other services
Working with the Ahead of Time compiler including its impact of developers and the development process
How to defend against DOM-based XSS
How to manage routing decisions based on pre-defined criteria such as a successful authentication
How to meet huge data requirements by processing asynchronous data streams with RxJS
Simplify server-side rendering
How to facilitate unit testing
Enhance an Angular user interface with animations and other advanced features
Optimize Angular applications with various tools and techniques
Maintain state within an Angular application
What Angular 9 brings to the table and its relationship to Angular 8

Mastering Angular is a five-day, hands-on course that thoroughly explores the latest Angular features and advances, demonstrating how to solve the traditional challenges of JavaScript web application development. Throughout the course students will build custom components using application routes, form validation, and unit-testing. The course starts with an introduction of Angular CLI and TypeScript, and then delves into component-driven development with Angular components, covering data-binding, directives, services, routing, HTTP, the RxJS library, forms unit testing, and REST. Students will also learn how to add authentication, use the Material library, learn the NgRX design pattern to implement the NgRX store, make custom directives, enhance their application with animations, write an E2E test, and increase their application's efficiency by lazy loading modules and creating their own Angular library

Angular Overview

• Overview of Angular Architecture

Getting Started with Angular

• Getting Started with TypeScript
• Bootstrapping with Angular CLI
• Angular Project Structure

Working with Angular

• Components and Events
• Third Party Libraries
• Dynamic Views
• Pipes

Angular Forms

• Forms and the Forms API

Single Page Applications and Routes

• Single Page Applications
• Services and Dependency Injection
• Modules

Using RESTful Services

• Overview of REST
• Angular and REST

Angular Best Practices

• Angular Style Guide
• What is New in Angular 9

Reactive Programming in Angular

• Working with RxJS

Security and Authentication

• DomSanitizer
• JSON Web Tokens
• Route Guards

Enhancing the Angular App

• Angular Animations
• Angular Material
• Angular Elements

Deep Dive into Angular

• Testing and Angular
• Deep Dive into Components and Directives
• Deep Dive into Services and Dependency Injection

Optimizing for the Enterprise

• Lazy Loading
• Optimizing with Universal
• Creating Your Own Angular Library

Maintain State with NgRX

• NgRX Store
• Lesson: ES6+
• Sass and SCSS for Angular and Material