Course Objectives
- To quickly and efficiently start creating applications using modern Angular;
- Debug existing applications and improve them;
- Learn to use a number of auxiliary libraries that often complement Angular.
Program by lessons
Meeting
The first meeting is traditionally considered an introductory meeting. At it we get acquainted, check in, discuss organizational issues, ways to interact with the instructor and the learning process.
Environment and additional libraries
We familiarize ourselves with angular-cli and the Angular ecosystem. Create and customize a new Angular project from the empty repository stage. Learn how to set up the environment and compile an Angular application.
Install auxiliary libraries for high-quality and fast development (code formatters, linters, ui component library).
Components and working with templates
Let’s understand the basic configuration of a component: selector, tempalte/tempalteUrl, styles/styleUrls, encapsulation.
And also Angular template syntax (in the context of a component): how interpolation, binding and event listening works in a template.
Component Interaction
Let’s look at the mechanism of data exchange between parent and child components via Input and Output properties, and the mechanism of two way binding.
Let’s consider the ways of accessing the entities used in the template:
Template variables
ViewChild decorator with all the subtleties of working with it, as well as ViewChildren decorator
Component Content. Inserting a template
Let’s analyze the mechanisms of interaction with the content passed to the component:
Static projection of content – ng-content tag
ContentChild decorator for getting entities from content, as well as ContentChildren decorator
Let’s analyze such element as ng-template, interaction with it via TemplateRef entity, ViewContainerRef entity and how to create View from template using the latter.
Directives
Let’s analyze the work of attribute directives, study the decorators HostListener and HostBinding, write a directive for “infinite” scrolling.
Let’s analyze the work of structural directives, learn how to work with the template context, analyze the “sugar” syntax of structural directives. Let’s write our own structural directives for carousel and pagination.
We’ll also look at basic attributive (ngClass) and structural (ngIf and ngFor) directives, and best practices for working with them.
Change Detection. Pipe
Let’s understand the change detection mechanism in Angular, learn what role the Zone.js library plays in this mechanism. We will study the standard Change Detection strategies: Default and OnPush, and understand the mechanisms for writing a custom change detection strategy.
We will study pipes, their scope, differences between pure and impure pipes. We’ll analyze default pipelines in Angular: json, async, currency. We will also write our own pip for data filtering.
Dependency Injection. Service. Working with requests
We will analyze the DI mechanism in Angular, find out why it is needed and what problems it solves, get acquainted with the Injector entity, analyze ways to connect dependencies, the possibility of getting them through the DI mechanism, as well as the hierarchy of dependency search. We’ll learn why we need the Injectable decorator and what features it provides, we’ll look at best practices for creating custom tokens in an application.
Let’s analyze sending requests using Angular mechanisms, and what role Interceptor plays in requests
Implement services to store and retrieve data from the server, and pass this data to the component for display.
Navigation
Let’s understand what SPA is and how Angular works with url. Let’s look at and design the navigation configuration. Let’s explore lazy loading, how it can help in optimizing the application and what preloadingStrategy does. Let’s implement in-app navigation, let’s look at absolute and relative navigation in an app. Examine params in url as well as queryParams.
Let’s study navigation “guards” (Guards), their types, differences and subtleties.
Forms
Let’s study ControlValueAccessor and why we need it in Angular. Let’s write our own custom input.
Let’s understand the mechanisms of template-driven forms and reactive forms, how they are organized, the nuances of working with them and how they are related to ControlValueAccessor.
Let’s study synchronous and asynchronous validation of forms in the context of template-driven forms and reactive forms. Examine the possibilities for customizing the state of an input.
Realize a form consisting of several inputs and analyze the specifics of working with it when using template-driven forms and reactive forms.
Redux-architecture. NgRx
Let’s get acquainted with the Redux pattern and its reactive implementation – NgRx, study the basic concepts.
Testing
Let’s analyze the testing pyramid, consider TDD/BDD development. Let’s get acquainted with the testing framework and test-runner, which is plugged into Angular by default. Let’s study the utility for setting up a test environment for Angular – TestBed.