Angular 13 Fundamentals
Table of Contents
IntroductionLukas Ruebbelke introduces the course by discussing the agenda for the course material, course prerequisites, and providing resources. A brief overview of the application to be completed throughout this course is also covered in this segment.
Why AngularLukas discusses various reasons Angular is used in development including following familiar enterprise patterns, and integration with TypeScript. Angular ships with an included router, HTTP client, testing framework, and tooling.
Modules & RoutesLukas discusses the use of modules for the division or grouping of pieces of an application using ES6 modules at a language level and NgModules at a framework level. The use of routes allows for loading components and navigation between modules. Students' questions regarding why modules need to be imported twice and what type of route would be lazy-loaded are also covered in this segment.
Component Classes & TemplatesLukas discusses the functions of component classes and templates in Angular. Component classes are ES6 classes that allow properties and methods to be available to the template.
Metadata & Data BindingLukas discusses the function of metadata and data binding in Angular. Metadata allows Angular to process a class, while data binding will enable data to flow between the component and template. Student questions regarding if there is a concept of a virtual DOM in Angular, if component is extended from directive, and if it's good practice to programmatically render components in Angular are also covered in this segment.
ServicesLukas discusses how services are generally classes in Angular, best practices using @Injectable, and utilizing the provideIn: 'root' property to specify services to the root injector. A student question regarding if services are provided in root where else can services be provided is also covered in this segment.
TypescriptLukas discusses TypeScript integration with Angular, demonstrates a basic component that utilizes TypeScript, and the benefit of using TypeScript types to broadcast intent.
The Angular CLILukas discusses the improvements to Angular provided by the Angular CLI, including streamlining the project startup process. This segment also offers a walkthrough of installing the Angular CLI, starting a new project, and some other features when using the Angular CLI.
Create an App with the Angular CLILukas walks through using the Angular CLI to generate a new project, including adding routing and choosing a stylesheet format. A walkthrough of what is included in the generated application is also provided in this segment.
Angular CLI Structure and Q&ALukas discusses the structure of the Angular CLI file. Student questions regarding some of the best practices for file structure when using the Angular CLI and whether services should hold the majority of the application-level state are also covered in this segment.
ComponentsLukas discusses the fundamental structure of components in Angular, including between event binding, property binding, templates, and classes. Defining classes, importing dependencies, and decorating classes using Angular-specific metadata.
Lifecycle HooksLukas discusses utilizing lifecycle hooks to perform custom logic at various stages of a component's lifespan and the lifecycle hooks ngOnInit and ngOnDestroy. Student questions regarding if the async pipe is considered the best practice compared to subscribing in the component class and if the template is parsed after ngOnInit is run are also covered in this segment.
TemplatesLukas discusses the relationship between templates and data binding, including event, property, and two-way binding. A demonstration of each type of binding is provided in this segment.
Working with ComponentsLukas live codes building out a functional component that can select a course and display the chosen course.
Component ExerciseStudents are instructed to display courses using ngFor, add an event handler to select a course, and display the raw JSON of the chosen course for both the courses and home components.
Component SolutionLukas walks through the solution to the solution to the component exercise.
Template Driven Forms
Template Driven Forms OverviewLukas discusses reactive compared to template-driven forms, importing the FormsModule, and using a local variable to reference the ngModel. Form controls and validation styles are also briefly discussed in the segment.
Form HandlingLukas walks through building out the course form, generating and importing an interface using ng commands, and attaching ngModel to an input. The effects of input properties matInput, placeholder, ngModel, name, and type are also demonstrated in this segment
Form ExerciseStudents are instructed to update the form to show percentComplete and update the form to show favorite.
Form SolutionLukas walks through the solution to the form exercise.
Form Solution Q&ALukas answers student questions regarding if the exercise could be simpler using a reactive form, if custom validators work, and what happens with unused Angular Material components. Questions regarding how to handle injecting new instances of a model and a brief discussion on custom validators are also covered in this segment.
Angular ServicesLukas discusses using angular services to allow functionality and data sharing between components. Defining a service, exposing a service using NgModule, and consuming a service via dependency injection in the constructor are also covered in this segment.
Server CommunicationLukas discusses utilizing the HTTP module to simplify the XHR and JSONP APIs, including the methods request, get, post, put, delete, patch, and head. Modifying the headers of a request, options, and error handling are also covered in this segment.
CRUD on a REST APILukas walks through implementing the course project's save, create, update, and delete functions. Locating the services URL, subscribing to services, and updating the displayed data is demonstrated in this segment.
Component Driven Architecture
A Brief History of AngularLukas discusses component-driven architecture's ability to manage complexity between components using observable streams and NgRx. A brief history of Angular in regards to the progression from large codebases to a more manageable application size is also covered in this segment.
Component Driven ArchitectureLukas discusses the concept of component-driven architecture as the division of components into self encapsulated, easily transferable building blocks. The relationship between parent and child components regarding @Input, @Output, and component contracts is also demonstrated in this segment.
Presentational & Container ComponentsLukas discusses the differences between presentational and container components and walks through separating the courses list and course details into separate components. A presentational component contains mainly bindings, while a container component holds other components.
Breaking Shared Mutable ComponentsLukas demonstrates breaking the relationship between mutable components to allow objects to update correctly and how to define an observable stream to hold an array of course objects. A student's question regarding if it is recommended to change the detection behavior in the presentational component is also covered in this segment.
Child RoutesLukas walks through updating the routing table to include the child routes. The use of routerLink will concatenate a new URL from the provided value, allowing for dynamic navigation between child routes.
Route ParamsLukas demonstrates implementing a parameters route, injecting the ActivatedRoute and Router services, and . The order of routes matters as Angular reads routes from top to bottom and loads the first matching value.
Protected RoutesLukas live codes route guards containing the canActivate property with an attached AuthGuard class to verify that the required state is active before a user can access specific routes. The implementation of rerouting a user to the login page on denied route access is also covered in this segment.
Lazy ModulesLukas discusses strategies for optimizing an application, including breaking it into smaller modules to be lazy-loaded when a user requests the needed module. If a module has dependencies, they must also be included in the standalone module to ensure loading is not dependant on the parent module.
Dynamic ComponentsLukas demonstrates dynamically attaching multiple components to the DOM using OnInit, ViewContainerRef, and CreateComponent. This function will read through the given array of components and generate DOM components accordingly.
Custom Input - Control Value AccessorLukas walks through making a random key generator compliant with how a form control works, which would allow for the creation of two-factor authentication. Implementing the control value accessor and making it compliant can be accomplished with writeValue, registerOnChange, and registerOnTouch to keep the newly generated keys updated.
Component TestingLukas demonstrates how to run tests in Angular with Jasmine and Karma and configure a testing module with the TestBed API. Angular can manually detect or start the change detection cycle with the fixture.detectChanges function. An overview of the debug element and the By class is also provided in this segment.
Mocks & SpiesLukas discusses how to handle testing on components that have dependencies utilizing mock objects and spies. A mock is a simple object that mimics another object for testing purposes. Spies record information on how a function was called, including how many times it was called and if parameters were used.