This course has been updated! We now recommend you take the Angular 9 Fundamentals course.
Table of Contents
Hello AngularLukas introduces the course by discussing an overview of the course content, how the Angular CLI has changed from previous versions, Nrwl, and Angular Material
SetupLukas gives a tour of the the course repository, which includes instructions on how to set up a work environment. The reference branch is also introduced, and students are encouraged to explore it after the workshop for additional material.
Angular CLILukas talks about the importance of the Angular CLI for developing projects that adhere to the style guide.
Creating the Nx WorkspaceLukas walking through the process of setting up a Nrwl Nx workspace.
Nx WorkspaceNow that students have a basic workspace up and running, Lukas gives a high-level explanation on why it's important to have thin modules, and does some housekeeping.
Angular MaterialLukas walks through the steps of importing the Material Module into the project.
Generate UI ComponentsLukas generates core data, ui-login, and ui-toolbar libraries in the application.
Generate a Page with RoutingLukas demonstrates how to generate the home module and insert the component.
Generate ModulesLukas generates the projects, and customers modules, then demonstrates how to incorporate the standalone modules into the application.
Application ReviewLukas gives an explanation of what was generated in the application thus far.
Narwal RationaleLukas explains what Narwal does for the project.
Adding the Application ShellLukas uses HTML snippets to build out more of the application.
Binding Component Data to TemplatesLukas explains how components bind to templates, and introduces structural directives.
Event HandlingLukas demonstrates how to capture an event on the template and respond to it in the component class.
Inspect Raw DOM EventLukas demonstrates how the safe navigation operator can help inspect raw DOM elements.
Unselecting an ElementLukas adds functionality into the application by allowing the user to unselect an element.
ng-if & elseLukas uses a ng-template tag to implement an else statement.
Sidebar ToggleLukas works with Angular Material to implement a sidebar toggle, and renames the application.
Review & Binding StylesLukas reviews the basic anatomy of the classes and associated component and properties. An overview of how to bind to a style, class, or child component is also discussed.
Q&AQuestions are asked about creating separate modules for each component, and the difference between an AngularJS and an Angular module.
Creating App Routing ModuleLukas creates a standalone routing file.
Login Component RoutingLukas generates the ui-login component.
Lazy Loading ModulesLukas demonstrates how to lazy load to other modules.
Adding NavigationLukas adds icons, and links the toggle bar to the modules.
Creating a ServiceLukas abstracts out the projects data structure, and moves it to a service.
HttpClientLukas introduces HttpClient, a simplified client HTTP API that rests on the XMLHttpRequest interface exposed by browsers. A JSON server is introduced as a fake REST API to hit.
Handling Observable with async FilterLukas introduces Observable, which provides in aynchronity to the app.
Create, Update & DeleteLukas adds additional functionality to the projects portion of the app that allows the user to create, update, and delete projects.
Wiring Up the FormLukas begins adding additional functionality to delete and edit existing projects.
Creating Form FieldsLukas codes in a few more fields for the projects.
Saving Form DataLukas makes it possible to save projects into the database.
Shared Mutable State ProblemLukas demonstrates what a visual example of shared mutable state looks like, then explains why it's an important concept to understand and prevent.
ngModel Name PropertyLukas explains what is going on under the hood with the njModel name property.
Refactor App Into ComponentsLukas discusses custom imports and exports, then starts to refactor the app into components.
List ComponentsLukas introduces list components and implements them into the app, along with a read-only input.
Sending Events to a Container ComponentNow with data coming into the app, Lukas covers how to create custom events using output. The concept of presentation component and container component are covered.
Details ComponentLukas implements the details component in the app.
Fix Shared Mutable StateLukas addresses the issue of shared mutable state in the app.
Component Architecture ReviewLukas reviews what code was written so far.
Final Q&AQuestions are asked about the equivalant if not utilizing Nx Workspaces, Nrwl interaction with Git, selecting libraries during deployment, typical locations of the lib folders, the log-in component's reuse across the app, reusing lists for other projects, and lazy loading.
Testing OverviewLukas introduces testing in Angular.
Creating a Component TestLukas live codes a basic unit test.
Unit Testing a Component MethodLukas live codes a test to see if a component method is operating correctly.
Debug Elementintroduces the debug module as a way to better test code in angular
ServicesLukas demonstrates how to use a mock in a component that uses a service.
Testing Wrap-UpLukas reviews key points of testing in Angular, and fields questions from the audience.