Introduction

• Introduction to MEAN, Single Page Application (SPA)
• Introduction to NodeJS
• Installing Node, Angular CLI and MongoDB
• Working with VSCode
• Creating an Angular Project
• Understanding Project Structure

Angular

Typescript Fundamentals

• Introduction
• Using Types
• Classes
• Interfaces
• Generics
• Modules

Angular Fundamentals

• Structure of an Angular App
• Components
• Understanding the Role of AppModule and Component Declaration
• Using Custom Components
• Creating Components with the CLI & Nesting Components
• Working with Component Templates
• Working with Component Styles
• What is Databinding?
• String Interpolation
• Property Binding
• Property Binding vs String Interpolation
• Event Binding
• Passing and Using Data with Event Binding
• Two-Way-Databinding
• Combining all Forms of Databinding
• Practicing Databinding
• Understanding Directives
• Using ngIf to Output Data Conditionally
• Enhancing ngIf with an Else Condition
• Styling Elements Dynamically with ngStyle
• Applying CSS Classes Dynamically with ngClass
• Outputting Lists with ngFor
• Getting the Index when using ngFor

Working on a Project

Components & Databinding

• Introduction to Databinding
• Splitting Apps into Components
• Property & Event Binding Overview
• Binding to Custom Properties
• Assigning an Alias to Custom Properties
• Binding to Custom Events
• Assigning an Alias to Custom Events
• Custom Property and Event Binding Summary
• Understanding View Encapsulation
• Using Local References in Templates
• @ViewChild() in Angular
• Getting Access to the Template & DOM with @ViewChild
• Projecting Content into Components with ng-content
• Understanding the Component Lifecycle
• Understanding Lifecycle Hooks
• Lifecycle Hooks and Template Access
• @ContentChild() in Angular
• Getting Access to ng-content with @ContentChild

Working on the Project

Angular Directives

• ngFor and ngIf Recap
• ngClass and ngStyle Recap
• Creating a Basic Attribute Directive
• Using the Renderer to build a Better Attribute Directive
• Using HostListener to Listen to Host Events
• Using HostBinding to Bind to Host Properties
• Binding to Directive Properties
• Understanding Structural Directives
• Building a Structural Directive
• Understanding ngSwitch
• Building and Using a Dropdown Directive

Services and Dependency Injection

• Introduction to Services
• Creating a Logging Service
• Injecting the Logging Service into Components
• Creating a Data Service
• Understanding the Hierarchical Injector
• Injecting Services into Services
• Using Services for Cross-Component Communication

Working on the Project

Routing

• Introduction
• Setting up and Loading Routes
• Navigating with Router Links
• Understanding Navigation Paths
• Styling Active Router Links
• Navigating Programmatically
• Using Relative Paths in Programmatic Navigation
• Passing Parameters to Routes
• Fetching Route Parameters
• Fetching Route Parameters Reactively
• Understanding Route Observables
• Passing Query Parameters and Fragments
• Retrieving Query Parameters and Fragments
• Setting up Child (Nested) Routes
• Using Query Parameters
• Configuring the Handling of Query Parameters
• Redirecting and Wildcard Routes
• Redirection Path Matching
• Outsourcing the Route Configuration
• An Introduction to Guards
• Protecting Routes with canActivate
• Protecting Child (Nested) Routes with canActivateChild
• Using a Fake Auth Service
• Controlling Navigation with canDeactivate
• Passing Static Data to a Route
• Resolving Dynamic Data with the resolve Guard
• Understanding Location Strategies

Working on the Project

Understanding Observables

• Analyzing Angular Observables
• Getting Closer to the Core of Observables
• Building a Custom Observable
• Errors & Completion
• Understanding Operators
• Subjects
• Improving the Reactive Service with Observables (Subjects)

Handling Forms in Angular

• Introduction
• Template-Driven (TD) vs Reactive Approach
• An Example Form
• TD: Creating the Form and Registering the Controls
• TD: Submitting and Using the Form
• TD: Understanding Form State
• TD: Accessing the Form with @ViewChild
• TD: Adding Validation to check User Input
• Built-in Validators & Using HTML5 Validation
• TD: Using the Form State
• TD: Outputting Validation Error Messages
• TD: Set Default Values with ngModel Property Binding
• TD: Using ngModel with Two-Way-Binding
• TD: Grouping Form Controls
• TD: Handling Radio Buttons
• TD: Setting and Patching Form Values
• TD: Using Form Data
• TD: Resetting Forms
• Practicing Template-Driven Forms
• Introduction to the Reactive Approach
• Reactive: Setup
• Reactive: Creating a Form in Code
• Reactive: Syncing HTML and Form
• Reactive: Submitting the Form
• Reactive: Adding Validation
• Reactive: Getting Access to Controls
• Reactive: Grouping Controls
• Fixing a Bug
• Reactive: Arrays of Form Controls (FormArray)
• Reactive: Creating Custom Validators
• Reactive: Using Error Codes
• Reactive: Creating a Custom Async Validator
• Reactive: Reacting to Status or Value Changes
• Reactive: Setting and Patching Values

Working on the Project

Using Pipes to Transform Output

• Introduction
• Using Pipes
• Parametrizing Pipes
• Where to learn more about Pipes
• Chaining Multiple Pipes
• Creating a Custom Pipe
• Parametrizing a Custom Pipe
• Example: Creating a Filter Pipe
• Pure and Impure Pipes
• Understanding the "async" Pipe

Making HTTP Requests - RxJS

• Introduction
• How Does Angular Interact With Backends?
• The Anatomy of a Http Request
• Backend (Firebase) Setup
• Sending a POST Request
• GETting Data
• Using RxJS Operators to Transform Response Data
• Using Types with the HttpClient
• Outputting Posts
• Showing a Loading Indicator
• Using a Service for Http Requests
• Services & Components Working Together
• Sending a DELETE Request
• Handling Errors
• Using Subjects for Error Handling
• Using the catchError Operator
• Error Handling & UX
• Setting Headers
• Adding Query Params
• Observing Different Types of Responses
• Changing the Response Body Type
• Introducing Interceptors
• Manipulating Request Objects
• Response Interceptors
• Multiple Interceptors

Working on the Project

Authentication & Route Protection

• Introduction
• How Authentication Works
• Adding the Auth Page
• Switching Between Auth Modes
• Handling Form Input
• Preparing the Backend
• Preparing the Signup Request
• Sending the Signup Request
• Adding a Loading Spinner & Error Handling Logic
• Sending Login Requests
• Login Error Handling
• Creating & Storing the User Data
• Reflecting the Auth State in the UI
• Adding the Token to Outgoing Requests
• Attaching the Token with an Interceptor
• Adding Logout
• Adding Auto-Login
• Adding Auto-Logout
• Adding an Auth Guard

Dynamic Components

• Introduction
• Adding an Alert Modal Component
• Understanding the Different Approaches
• Using ngIf
• Preparing Programmatic Creation
• Creating a Component Programmatically
• Understanding entryComponents
• Data Binding & Event Binding

Angular Modules & Optimizing Angular Apps

• Introduction
• What are Modules?
• Analyzing the AppModule
• Getting Started with Feature Modules
• Splitting Modules Correctly
• Adding Routes to Feature Modules
• Component Declarations
• The ShoppingList Feature Module
• Understanding Shared Modules
• Understanding the Core Module
• Adding an Auth Feature Module
• Understanding Lazy Loading
• Implementing Lazy Loading
• More Lazy Loading
• Preloading Lazy-Loaded Code
• Modules & Services
• Loading Services Differently
• Ahead-of-Time Compilation

Deploying an Angular App

• Introduction
• Deployment Preparation & Steps
• Using Environment Variables
• Deployment Example: Firebase Hosting

NodeJS and ExpressJS

• What is a RESTful API?
• Adding the Node Backend
• Adding the Express Framework
• Improving the server.js Code
• Fetching Initial Posts
• Using the Angular HTTP Client
• Understanding CORS
• Adding the POST Backend Point
• Adding Angular

 

MongoDB

• What is MongoDB?
• Comparing SQL & NoSQL
• Connecting Angular to a Database
• Setting Up MongoDB
• Using MongoDB Atlas & IP Whitelist
• Adding Mongoose
• Understanding Mongoose Schemas & Models
• Creating a POST Instance
• Connecting our Node Express App to MongoDB
• Storing Data in a Database
• Fetching Data From a Database
• Transforming Response Data
• Deleting Documents
• Updating the Frontend after Deleting Posts
• Adding Posts with an ID

 

User Authentication & Authorization

• Adding the Login Input Fields
• Handling User Input
• Adding the Signup Screen
• Creating the User Model
• Creating a New User Upon Request
• Connecting Angular to the Backend
• Understanding SPA Authentication
• Implementing SPA Authentication
• Sending the Token to the Frontend
• Adding Middleware to Protect Routes
• Adding the Token to Authenticate Requests
• Improving the UI Header to Reflect the Authentication Status
• Improving the UI Messages to Reflect the Authentication Status
• Connecting the Logout Button to the Authentication Status
• Redirecting Users
• Adding Route Guards
• Reflecting the Token Expiration in the UI
• Saving the Token in the Local Storage
• Adding a Reference to the Model
• Adding the User ID to Posts
• Protecting Resources with Authorization
• Passing the User ID to the Frontend
• Using the User ID on the Frontend

 

Project Deployment

• Deployment Options
• Deploying the REST API
• Deploying the REST Api
• Deploying Angular
• Angular Deployment - Finishing the Two App Setup
• Using the Integrated Approach