This course has been updated! We now recommend you take the Angular 9 Fundamentals course.
Table of Contents
Introduction
Hello Angular
Lukas introduces the course by discussing an overview of the course content, how the Angular CLI has changed from previous versions, Nrwl, and Angular Material
Setup
Lukas 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 CLI
Angular CLI
Lukas talks about the importance of the Angular CLI for developing projects that adhere to the style guide.
Creating the Nx Workspace
Lukas walking through the process of setting up a Nrwl Nx workspace.
Nx Workspace
Now 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 Material
Lukas walks through the steps of importing the Material Module into the project.
Generate UI Components
Lukas generates core data, ui-login, and ui-toolbar libraries in the application.
Generate a Page with Routing
Lukas demonstrates how to generate the home module and insert the component.
Generate Modules
Lukas generates the projects, and customers modules, then demonstrates how to incorporate the standalone modules into the application.
Application Review
Lukas gives an explanation of what was generated in the application thus far.
Narwal Rationale
Lukas explains what Narwal does for the project.
Adding the Application Shell
Lukas uses HTML snippets to build out more of the application.
Components
Binding Component Data to Templates
Lukas explains how components bind to templates, and introduces structural directives.
Event Handling
Lukas demonstrates how to capture an event on the template and respond to it in the component class.
Inspect Raw DOM Event
Lukas demonstrates how the safe navigation operator can help inspect raw DOM elements.
Unselecting an Element
Lukas adds functionality into the application by allowing the user to unselect an element.
ng-if & else
Lukas uses a ng-template tag to implement an else statement.
Sidebar Toggle
Lukas works with Angular Material to implement a sidebar toggle, and renames the application.
Review & Binding Styles
Lukas 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&A
Questions are asked about creating separate modules for each component, and the difference between an AngularJS and an Angular module.
Routing
Creating App Routing Module
Lukas creates a standalone routing file.
Login Component Routing
Lukas generates the ui-login component.
Lazy Loading Modules
Lukas demonstrates how to lazy load to other modules.
Adding Navigation
Lukas adds icons, and links the toggle bar to the modules.
Services
Creating a Service
Lukas abstracts out the projects data structure, and moves it to a service.
HttpClient
Lukas 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 Filter
Lukas introduces Observable, which provides in aynchronity to the app.
Create, Update & Delete
Lukas adds additional functionality to the projects portion of the app that allows the user to create, update, and delete projects.
Forms
Wiring Up the Form
Lukas begins adding additional functionality to delete and edit existing projects.
Creating Form Fields
Lukas codes in a few more fields for the projects.
Saving Form Data
Lukas makes it possible to save projects into the database.
Shared Mutable State Problem
Lukas 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 Property
Lukas explains what is going on under the hood with the njModel name property.
Component Architecture
Refactor App Into Components
Lukas discusses custom imports and exports, then starts to refactor the app into components.
List Components
Lukas introduces list components and implements them into the app, along with a read-only input.
Sending Events to a Container Component
Now 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 Component
Lukas implements the details component in the app.
Fix Shared Mutable State
Lukas addresses the issue of shared mutable state in the app.
Component Architecture Review
Lukas reviews what code was written so far.
Final Q&A
Questions 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
Testing Overview
Lukas introduces testing in Angular.
Creating a Component Test
Lukas live codes a basic unit test.
Unit Testing a Component Method
Lukas live codes a test to see if a component method is operating correctly.
Debug Element
introduces the debug module as a way to better test code in angular
Services
Lukas demonstrates how to use a mock in a component that uses a service.
Testing Wrap-Up
Lukas reviews key points of testing in Angular, and fields questions from the audience.