Table of Contents
Introduction
Introduction
Lukas 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 Angular
Lukas 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.
Framework Overview
Modules & Routes
Lukas 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 & Templates
Lukas 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 Binding
Lukas 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.
Services
Lukas 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.
Typescript
Lukas discusses TypeScript integration with Angular, demonstrates a basic component that utilizes TypeScript, and the benefit of using TypeScript types to broadcast intent.
Angular CLI
The Angular CLI
Lukas 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 CLI
Lukas 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&A
Lukas 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.
Components
Components
Lukas 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 Hooks
Lukas 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.
Templates
Lukas 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 Components
Lukas live codes building out a functional component that can select a course and display the chosen course.
Component Exercise
Students 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 Solution
Lukas walks through the solution to the solution to the component exercise.
Components Q&A
Lukas answers student questions regarding if you would subscribe to the response in the component or a service when a subscription gives a response that needs modification if CSS JavaScript is also popular in Angular, and how can the UX be handled in the component. Questions regarding recommended books to learn about component-driven architecture, if Emotion is used with Angular, and which of the RxJS operators are used often are also covered in this segment.
Template Driven Forms
Template Driven Forms Overview
Lukas 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 Handling
Lukas 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 Exercise
Students are instructed to update the form to show percentComplete and update the form to show favorite.
Form Solution
Lukas walks through the solution to the form exercise.
Form Solution Q&A
Lukas 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.
Services
Angular Services
Lukas 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 Communication
Lukas 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 API
Lukas 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 Angular
Lukas 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 Architecture
Lukas 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 Components
Lukas 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 Components
Lukas 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.
Techniques
Child Routes
Lukas 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 Params
Lukas 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 Routes
Lukas 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 Modules
Lukas 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 Components
Lukas 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 Accessor
Lukas 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 Testing
Lukas 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 & Spies
Lukas 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.
