Courses

55267A: Mastering Angular

Length: 2 Days    Cost: $1,395 + GST    Version: Visual Studio

Centre	Oct	Nov	Dec	Jan
Auckland	--	--	18	--
Hamilton	--	--	--	--
Christchurch	--	--	--	--
Wellington	--	--	--	--

Can't find a class in your area? Contact our sales team and request a class date.

About this Course

So, you dipped your toes into the waters of Angular? Time to get your boots wet! This training will take you from being an average Angular developer to a great one. You'll gain more insight in the workings of Angular and you'll explore more advanced programming techniques like RxJS and working with Redux.

Advanced Forms will hold no secrets and you will acquire the assets to make your Angular application production ready. This course is constantly being updated to the latest version of Angular, currently Angular 6.

Audience

This course targets professional web developers that really want to master Angular. Participants of this course need to have a decent understanding of Angular and TypeScript.

Prerequisites

• Experience with TypeScript.
• Experience with Angular.
• An IDE for web development like Visual Studio Code or WebStorm.

At Course Completion

After attending this course students should be able to:

• Work effectively with Reactive Extensions.
• Improve performance of an Angular application.
• Use ngrx to apply the redux pattern to an Angular application.
• Simplify architecture with smart and dumb components.
• Creating an efficient structure for large applications.
• Work with more advanced forms.
• Add server-side rendering with Angular Universal.

Course Outline

Module 1: Reactive Extensions for JavaScript

Reactive programming is a world on its own and is not necessarily tied to Angular. However Angular uses RxJS in many of its APIs, so we must have a proper understanding of what it means to write reactive code. RxJS has a steep learning curve. But once you master it, there is no going back.

Lessons

• What are Reactive Extensions
• Observable and Observer
• Subjects
• Cold versus Hot Observables
• Making Async Calls
• Combining Observables
• Error Handling
• Dealing with Backpressure

Lab 1: Search Spotify

• Baby steps
• Debounce
• Calling an async method
• Cancellation
• Error handling
• Combining streams

After completing this module, students will be able to:

• Deal with asynchronous collections.
• Use various operators to transform and combine observables.
• Deal with exceptions and cancellation.

Module 2: Change Detection

This module will teach you about the internals of Angular. This knowledge is primarily useful for performance tuning and debugging strange behavior.

Lessons

• Zones
• How Change Detection Works
• Immutables and Observables

After completing this module, students will be able to:

• Debug strange behavior with change detection.
• Think about optimization strategies concerning change detection.

Module 3: State management with Redux

With the increasing complexity of client-side applications, a lot of state has to be kept. It's quite a challenge to keep all state consistent. Redux introduces a pattern to manage this state in a convenient way, while keeping your UI up to date as well.

Lessons

• Why Redux?
• Smart & dumb components
• Major Principles
• The Store, Actions and Reducers
• Tools

Lab 1: Redux Todo App

• The Store
• Actions and Action Creators
• Reducers
• Reading data and dispatching events
• Debuggin using the Redux DevTools

After completing this module, students will be able to:

• Have a decent understanding of the redux pattern. The actual/optimal implementation will be done with ngrx.

Module 4: Bringing Redux to Angular with ngrx

ngrx is an implementation of Redux for Angular. It puts the theory of the previous module to practice.

Lessons

• Using RxJS within Redux
• Efficient Slicing
• Using Async Pipes

After completing this module, students will be able to:

• Have an overview of ngrx

Module 5: The ngrx Store

This module explains the details of the store in ngrx.

Lessons

• Responsibilities
• Normalizing Data
• Initializing the Store

After completing this module, students will be able to:

• Create an ngrx store in an effective way.
• Avoid redundancy in the store.

Module 6: ngrx Reducers

This module explains how reducers work and how to make them more manageable. Also, you will lean how to deal with side-effects.

Lessons

• Useful Operators
• Splitting Up Reducers
• ngrx Effects

Lab 1: Spotify Reducers

• Playlist action and reducers
• The ‘recent’ list
• The search actions
• Displaying tracks
• Combining reducersAfter completing this module, students will be able to:

• Create a reducer for ngrx.
• Split up complex reducers into manageable children.
• Deal with side-effects like async calls.

Module 7: Smart and Dumb Components

Should everyone be able to talk everything? No! Here we learn how to avoid chaos by splitting up our component into smart and dumb ones.

Lessons

• Characteristics of Dumb Components
• Characteristics of Smart Components
• Performance Impact

Lab 1: Spotify Dispatch and Select

• Smart and dumb components
• Selecting in the Playlist component
• Selecting in the Recent component
• Dispatching from the App component
• Search
• View Tracks

After completing this module, students will be able to:

• Re-organize components into smart and dumb components.
• Hook up components to the ngrx store.

Module 8: Structuring an Application

Applications grow larger, code bases become unmanageable. Unless you structure them right. This module will show you how.

Lessons

• Domain, Routing, Core and Shared Modules
• Exporting and Providing
• Clean Imports
• Creating Libraries

Lab 1: Struturing the Weather App

• Creating modules
• Creating Feature Components
• Set up routing
• Services
• Clean imports
• Using shared module
• Using a library

After completing this module, students will be able to:

• Organize potentially large applications into the different types of modules.
• Split up large applications into libraries.
• Organize imports in a clean fashion.

Module 9: Forms Advanced

This module explains how to work with dynamic forms. These are forms that change as the user provides information. Using nested forms allows for more manageable chunks of code.

Lessons

• Dynamically Adding Elements
• FormArray
• Nested Forms

Lab 1: FormArray and Nesting

• Working with FormArray
• Nesting Forms

After completing this module, students will be able to:

• Build dynamic forms.
• Split up complex forms into smaller chunks.

Module 10: Angular Universal

Angular takes a lot of measures to make your app high-performant. But you can take it a bit further, especially when it comes to load times. In this Module you will learn about Ahead-Of-Time compilation and hot loading using Angular Universal. Here you'll learn the difference between a good and a great application and how to please the elders of the internet.

Lessons

• Server-side rendering with Angular Universal
• Hot-Loading with preboot

After completing this module, students will be able to:

• Add server-side rendering to their Angular application.

 Print this page