This course has been updated! We now recommend you take the Angular 13 Fundamentals course.
Table of Contents
Introduction
Introduction
Lukas 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 Repo
Lukas 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 Overview
Lukas 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 CLI
Lukas demonstrates how to generate a new Angular application with the Angular CLI from scratch.
Angular Files & Style Guide
Lukas 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 Component
Lukas 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 Modules
Lukas 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 Material
Lukas 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.
Components
Component Fundamentals
Lukas 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 Routes
Lukas demonstrates how to add routes to an application that then loads the component in the component outlet.
Component Data
Lukas explains the fundamentals of components and component data flow, and demonstrates how to render data on the application's main page.
Property Binding
Lukas 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 Binding
Lukas 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.
ngFor
Lukas shows how to loop through data using ngFor template syntax.
Selecting an Item & ngIf
Lukas 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 & else
Lukas creates a local template and displays it inside an else reference using the elseBlock.
Sanitizing Input Data
Lukas answers a question about how to sanitize user data in form inputs by demonstrating how to use DomSanitizer and the Sanitizer class.
Component Fundamentals Exercise
Students are instructed to create a component, bind properties and events to the component, and display the selected data.
Component Fundamentals Solution
Lukas live codes the solution to the component fundamentals exercise.
Forms
Template Forms
Lukas 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 States
Lukas 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 Exercise
Students are instructed to add additional fields to the form started in the previous sections, and link them to the appropriate Angular component.
Form Template Solution
Lukas live codes the solution to the form template exercise.
Services & HTTP Client
Services
Lukas 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 Methods
Lukas 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 Exercise
Students are instructed to build a new service that will allow users to create and add new lessons.
Services Solution: Building a Service
Lukas live codes the first part of the solution to the services exercise, and starts by creating a new service.
Services Solution: Remote Endpoint
Lukas 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 Exercise
Students are instructed to complete the remote update call, the remote delete call, and to fix the UI when the operation is complete.
HTTP Client Solution
Lukas live codes the solution to the HTTP client exercise.
Component State
Component Driven Architecture
Lukas 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 & Output
Lukas refactors the application started in the previous section, creates children components, and adds input and output properties to a component.
Handling Shared Mutable State
Lukas 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 Exercise
Students 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 Solution
Lukas live codes the solution to the component architecture exercise.
Routing
Router Links
Lukas demonstrates how to create links to other routes in the application using the RouterLink directive.
Routing to Components
Lukas 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 Route
Lukas 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 Service
Lukas builds a router service and triggers routes from events and behaviors from within the application.
Create a Route Exercise
Students 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 Solution
Lukas live codes the solution to the create a route exercise.
Testing
Unit Testing in Angular
Lukas introduces unit testing in Angular, and demonstrates how to build unit tests.
Template Testing
Lukas 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 & Mocking
Lukas goes through the application's testing errors and resolves the errors using module dependencies and mocking services.
Spying & Component Testing
Lukas demonstrates how to set up spies on methods that run when events happen in an application, and explains how to test components.
