Angular Course

I. The Development Environment

Introduction to the modern development environment and technologies for front­end development

• Overview of the stack - NPM / Webpack
• Working with the Angular CLI
• Understanding the project structure conventions and
• Setting the IDE for Angular development
• Best practices

II. Angular architecture and concepts

Understanding the core concepts and design behind Angular.

• The Renderer
• Change detection system
• Patterns in use
• The core entities of Angular
• The use of javascript decorators
• Best practices and relevant references.

III. TypeScript Primer

Getting familiar with TypeScript, the default language for Angular application development

• Module system
• Classes and Interfaces
• Arrow functions and Template strings
• Working with types

IV. Angular Module System

• The need for modules
• The bootstrapping process
• Modules API and usage
• Best practices

V. Components Deep Dive

The component is a core building block of an Angular application. In this module, we will deep dive into the component metadata API.

• Building a basic component
• Shadow DOM
• Templates and Styles
• The Component class
• Data bindings and Template syntax
• Angular core directives
• Components types review
• Data projection, building a Wrapper component
• Component inputs - Working with properties
• Component outputs - Creating custom events
• Components communication using local variables
• Best practices

VI. Dependency injection

Angular uses dependency injection for instantiating and wiring object together.

• Understanding the role of the Provider
• Creating and using a class provider
• Other types of providers
• Understanding the dependencies injectors hierarchy ­
• Common patterns and best practices
• Angular built-in providers

VII. Angular Modules

As a framework, Angular introduces several modules that are aimed for common development challenges.

• Angular HttpClient Module - communication with the server
• Angular Reactive Forms - managing complexed forms
• Angular Router - navigation system

State Management (4th day - optional)

To build a robust architecture for a large Angular app, we use a state management solution to orchestrate a unidirectional data flow and a single source of truth between components.

• Managing a Reactive State
• Single Source of Truth and unidirectional data flow
• Handling Immutability
• Difference between solutions - NgRx / Redux / MobX
• Deep-dive into the solution of choice