Angular 9 Fundamentals
This course has been updated! We now recommend you take the Angular 13 Fundamentals course.
Table of Contents
IntroductionLukas Ruebbelke gives an overview of the course curriculum, demonstrates how to set up Angular with the CLI, and introduces the main APIs that will be used in the course.
Setting Up the RepoLukas demonstrates how to set up the course repo, runs the npm run server:all command to set up a JSON API server that the client-side app can communicate with, and uses ng serve to start the application.
Angular OverviewLukas describes the main differences between Angular 1.x and the new version of Angular, and explains that the new version of Angular is a component based framework containing modules, routes, components, and services.
Generate an App with the Angular CLILukas demonstrates how to generate a new Angular application with the Angular CLI from scratch.
Angular Files & Style GuideLukas walks through the files generated in an Angular application through the CLI, and references the Angular style guide as the community guidelines for writing good Angular code.
Generate a New ComponentLukas demonstrates how to generate a new component with the Angular CLI, and explains that there are two parallel module systems: one is at the language level, ES6 and above, to manage the source code and the other, ng module, is in charge of the application configuration. A module can have multiple components.
Angular and ES6 ModulesLukas answers questions from the audience about when to create a module when using Angular, explains that every component does not need a module, and describes why a module is necessary when using lazy loading.
Adding Angular MaterialLukas adds Angular material into the project, demonstrates how to import Angular material modules in a barrel role of modules, and uses a few material modules, which are material design components for angular on the generated application from a previous section.
Component FundamentalsLukas describes the anatomy of a component in Angular, demonstrates how to add a component to an application using the @Component decorator, and explains how to attach the decorator to the application using the component selector. In this section an application that allows users to list the courses taken on Frontend Masters and their progress is being built.
Component RoutesLukas demonstrates how to add routes to an application that then loads the component in the component outlet.
Component DataLukas explains the fundamentals of components and component data flow, and demonstrates how to render data on the application's main page.
Property BindingLukas explains that property binding is from class to template, demonstrates how to display data from the component into the markup using Angular templates, and uses a popular debugging technique that involves the JSON pipe filter.
Event BindingLukas demonstrates how to attach events to components, how to allow events to be triggered, and how to allow data to flow back into the component events.
ngForLukas shows how to loop through data using ngFor template syntax.
Selecting an Item & ngIfLukas demonstrates how to render the selected data item, or lesson in the template, and how to only render the data if it is available using ngIf.
Local Templates & elseLukas creates a local template and displays it inside an else reference using the elseBlock.
Sanitizing Input DataLukas answers a question about how to sanitize user data in form inputs by demonstrating how to use DomSanitizer and the Sanitizer class.
Component Fundamentals ExerciseStudents are instructed to create a component, bind properties and events to the component, and display the selected data.
Component Fundamentals SolutionLukas live codes the solution to the component fundamentals exercise.
Template FormsLukas demonstrates how to set up an Angular form, how to add fields and make some fields required, and how to render a form.
Submitting Forms & Valid StatesLukas adds a submit button to the form, and demonstrates how to display a button that is active or disabled depending on the state associated with the button.
Form Template ExerciseStudents are instructed to add additional fields to the form started in the previous sections, and link them to the appropriate Angular component.
Form Template SolutionLukas live codes the solution to the form template exercise.
Services & HTTP Client
ServicesLukas explains the need for services to orchestrate data coming to and from the server, demonstrates how to uses services, and use services to render data on the UI.
Services CRUD MethodsLukas creates the create, read, update, and delete methods in a service, and demonstrates how to use the methods in the application developed in the previous sections.
Services ExerciseStudents are instructed to build a new service that will allow users to create and add new lessons.
Services Solution: Building a ServiceLukas live codes the first part of the solution to the services exercise, and starts by creating a new service.
Services Solution: Remote EndpointLukas continues live coding the solution to the services exercise by fetching data from an API and explaining what optimistic and pessimistic loading of data is.
HTTP Client ExerciseStudents are instructed to complete the remote update call, the remote delete call, and to fix the UI when the operation is complete.
HTTP Client SolutionLukas live codes the solution to the HTTP client exercise.
Component Driven ArchitectureLukas explains that Angular strongly encourages the component architecture by making it necessary to build every feature as a component, and adds that components allow developers to develop custom properties and custom events. Angular has a component hiearchy that leads to better structure and communication within the components of application.
Component API Input & OutputLukas refactors the application started in the previous section, creates children components, and adds input and output properties to a component.
Handling Shared Mutable StateLukas explains that shared mutable state is the basis of some of the most common bugs in large applications, and demonstrates how to unshare a mutable state by creating a local copy of the data so that it doesn't allow other consumers to mutate that data.
Component Architecture ExerciseStudents are instructed to create a lessons component, the appropriate input and output properties, and to render the correct lessons list of the component.
Component Architecture SolutionLukas live codes the solution to the component architecture exercise.
Router LinksLukas demonstrates how to create links to other routes in the application using the RouterLink directive.
Routing to ComponentsLukas explains how to route to a specific component and render that component in an outlet based on the route. An outlet activates an event when a new component is instantiated.
Creating a Lazy Loaded RouteLukas demonstrates how to set up a lazy loaded route so you can separate the applications module payloads and not have to load everything upfront for performance.
Router ServiceLukas builds a router service and triggers routes from events and behaviors from within the application.
Create a Route ExerciseStudents are instructed to generate a new users component, create a new users route, and to update sidenav to route to new users.
Create a Route SolutionLukas live codes the solution to the create a route exercise.
Unit Testing in AngularLukas introduces unit testing in Angular, and demonstrates how to build unit tests.
Template TestingLukas demonstrates how to link unit tests to templates, and explains that change detection in a testing environment is not automated and needs to be added.
Resolving Dependencies & MockingLukas goes through the application's testing errors and resolves the errors using module dependencies and mocking services.
Spying & Component TestingLukas demonstrates how to set up spies on methods that run when events happen in an application, and explains how to test components.