Angular Advanced Course

Angular Advanced Course Overview

All lab exercises are designed to make attendees build an entire web application step by step so that they can practice and understand how these Angular concepts come into play in an actual real-life project.

 Prerequisite

• Full understanding and practical use of Angular.

Angular Advanced Agenda Topics

Angular Essentials

• Semantic versioning and release schedule
• Angular CLI
• Environments config
• CLI: ng update, ng add and schematics

LAB: Set-up

Modules and build process

• Modules and ngModule
• Module architecture: Feature modules
• Module architecture: Shared module
• Angular builds: AOT vs JIT – What to use for production
• Build modes and environments

LAB: Angular Builds

• Introduction to Webpack
• Should we use Webpack directly for custom builds?

Components

• Template and expressions
• Passing data to a component with @Input()
• Practicing with Angular CLI

LAB: Creating components

• Component architecture best practices
• Advanced component features

Directives

• Different kinds of directives
• How to create a custom directive?
• Data bindings in directives

LAB: Custom directive

Pipes

• Pure and Impure pipes
• How to create our own pipes?

LAB: Custom Pipe

Services and dependency injection

• Purpose of services
• Dependency injection in Angular
• Injector Tree
• Decorators for dependency injection: @Optional(), @Host(), @Self()
• How to create a service?

LAB: Service creation

HTTP client and asynchronous patterns with RxJs

• How to use the HTTP client?
• What is a promise?
• Introduction to RxJS
• What is an observable?

LAB: Observables and Promises

• Writing our own Observable or Promise
• RxJs operators
• Examples of RxJs operators: max, merge, filter

LAB: Using the HTTP client

• Async pipe

LAB: Using the async pipe

• Http Interceptor
• Websockets in Angular

Component communication and lifecycle

• How do components share data?
• Strategies for component communication
• @ViewChild() decorator

LAB: Component communication

LAB: Using @Output()

• Introduction to the component lifecycle
• Lifecycle hooks
• Change detection strategies for performance optimization

End-to-end Testing of Angular Applications

• How to test Angular applications?
• End to end tests with Protractor
• End to end tests with Cypress

LAB: Writing end-to-end tests

• Mocking and stubbing with Cypress and Data Mocks

Security in Angular

• How to prevent Cross-site Scripting attacks (XSS)
• Best practices and things to avoid
• Trusting values with the DOMSanitizer
• Prevent HTTP attacks
• Security audits of Angular applications

State management and Redux

• What is state management?
• Redux: Core concepts and principles
• Redux Store
• NgRx: Redux for Angular
• NgRx: Reducer, Store, Actions and Effects

LAB: Using NgRx store and actions

Advanced exercises on RxJs and component architecture

• How to think in terms of reactive programming
• Examples of several combinations of RxJs operators

Resources and best practices

• How to include external libraries
• How to use angular.io (cheatsheet, etc.)
• Style guide and best practices
• Official Angular blog