55267AC (Class Pack)
Course Duration: 2 Days
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.
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.
At Course Completion
- 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.
- Experience with TypeScript.
- Experience with Angular.
- An IDE for web development like Visual Studio Code or WebStorm.
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.
- What are Reactive Extensions
- Observable and Observer
- Cold versus Hot Observables
- Making Async Calls
- Combining Observables
- Error Handling
- Dealing with Backpressure
Lab 1: Search Spotify
- Baby steps
- Calling an async method
- Error handling
- Combining streams
- 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.
- How Change Detection Works
- Immutables and Observables
Lab 1: N/A
- 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.
- Why Redux?
- Smart & dumb components
- Major Principles
- The Store, Actions and Reducers
Lab 1: Redux Todo App
- The Store
- Actions and Action Creators
- Reading data and dispatching events
- Debuggin using the Redux DevTools
- 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.
- Using RxJS within Redux
- Efficient Slicing
- Using Async Pipes
Lab 1: N/A
- Have an overview of ngrx.
Module 5: The ngrx Store
This module explains the details of the store in ngrx.
- Normalizing Data
- Initializing the Store
Lab 1: N/A
- 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.
- Useful Operators
- Splitting Up Reducers
- ngrx Effects
Lab 1: Spotify Reducers
- Playlist action and reducers
- The ‘recent’ list
- The search actions
- Displaying tracks
- Combining reducers
- 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.
- 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
- View Tracks
- 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.
- 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
- Clean imports
- Using shared module
- Using a library
- 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.
- Dynamically Adding Elements
- Nested Forms
Lab 1: FormArray and Nesting
- Working with FormArray
- Nesting Forms
- 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.
- Server-side rendering with Angular Universal
- Hot-Loading with preboot
Lab 1: N/A
- Add server-side rendering to their Angular application.