Setting Up An Angular Development Environment | Academind

Autoplay
Autocomplete

Previous Lesson Complete and Continue

Angular - The Complete Guide

Getting Started

Welcome To The Course! (1:31)
What Exactly Is Angular? (1:49)
Why Would You Use Angular? (6:41)
Angular's Evolution & Stability (4:44)
Creating A New Angular Project (7:02)
Setting Up An Angular Development Environment (4:48)
About This Course (1:45)
Course Resources & Using The Course Efficiently

Angular Essentials - Components, Templates, Services & More

Module Introduction (1:19)
A New Starting Project & Analyzing The Project Structure (6:27)
Understanding Components & How Content Ends Up On The Screen (6:18)
Creating a First Custom Component (5:14)
[Optional] JavaScript Refresher: Classes, Properties & More
Configuring the Custom Component (5:20)
Using the Custom Component (6:08)
Styling the Header Component & Adding An Image (6:20)
Managing & Creating Components with the Angular CLI (4:28)
Styling & Using Our Next Custom Component (5:08)
Preparing User Data (To Output Dynamic Content) (2:07)
Storing Data in a Component Class (3:55)
Outputting Dynamic Content with String Interpolation (2:30)
Attribute Binding
Property Binding & Outputting Computed Values (4:37)
Using Getters For Computed Values (3:29)
Listening to Events with Event Binding (4:04)
Managing State & Changing Data (3:06)
A Look Behind The Scenes Of Angular's Change Detection Mechanism (2:06)
Introducing Signals (12:53)
We Need More Flexible Components! (3:40)
Defining Component Inputs (8:17)
Required & Optional Inputs (2:56)
Using Signal Inputs (14:00)
We Need Custom Events! (1:47)
Working with Outputs & Emitting Data (6:59)
Using the output() Function (6:12)
Adding Extra Type Information To EventEmitter (1:57)
Exercise: Create a Configurable Component (8:47)
TypeScript: Working With Potentially Undefined Values & Union Types (8:06)
Accepting Objects As Inputs & Adding Appropriate Typings (4:46)
TypeScript: Type Aliases & Interfaces (3:11)
Outputting List Content (5:33)
Outputting Conditional Content (4:26)
Legacy Angular: Using ngFor & ngIf (5:21)
Adding More Components to the Demo App (6:14)
Outputting User-specific Tasks (6:30)
Outputting Task Data in the Task Component (4:04)
Storing Data Models in Separate Files (3:44)
Dynamic CSS Styling with Class Bindings (4:36)
More Component Communication: Deleting Tasks (5:25)
Creating & Conditionally Rendering Another Component (5:25)
Managing The "New Task" Dialog (6:30)
Using Directives & Two-Way-Binding (10:46)
Signals & Two-Way-Binding (2:19)
Handling Form Submission (3:20)
Using the Submitted Data (7:20)
Content Projection with ng-content (6:48)
Transforming Template Data with Pipes (3:16)
Getting Started with Services (6:15)
Getting Started with Dependency Injection (8:02)
More Service Usage & Alternative Dependency Injection Mechanism (5:17)
Time to Practice: Services (3:16)
Using localStorage for Data Storage (5:40)
Module Summary (8:45)

Angular Essentials - Working with Modules

Module Introduction (2:16)
A First Introduction To Angular Modules (NgModule) (3:05)
Creating a First Empty Module (2:56)
Bootstrapping Apps with Angular Modules (5:21)
Declaring & Using Components (4:46)
A First Summary (2:14)
Migrating All Components To Use Modules (6:50)
Creating & Using Shared Modules (4:13)
Creating More Complex Module-based App Structures (7:22)

Angular Essentials - Time To Practice

Module Introduction & Starting Project (5:19)
Exercise Hints
Adding a Header Component With An Image (5:10)
Adding a User Input Component (6:42)
Handling Form Submission (2:30)
Extracting Values with Two-Way-Binding (8:10)
Calculating the Annual Investment Data (5:05)
Cross-Component Communication with Outputs (9:25)
Creating & Using a Data Model (2:58)
Passing Data from Parent to Child with Inputs (10:09)
Outputting Data in a Table (4:57)
Formatting Output with a Pipe (1:39)
Using Signals & Resetting The Form After Submission (9:55)
Using a Service for Cross-Component Communication (9:35)
Using Signals in Services (4:11)
Migrating to Angular Modules (8:08)
Module Summary (1:13)

Debugging Angular Apps

Module Introduction (1:41)
Understanding Error Messages & Fixing Errors (3:46)
Debugging Logical Errors with the Browser DevTools & Breakpoints (6:19)
Exploring the Angular DevTools (3:50)
What Next?

Components & Templates - Deep Dive

Module Introduction (2:00)
Starting Project & An Opportunity For Smaller Components? (2:34)
When & How To Split Up Components (4:25)
Splitting A Component Into Multiple Components (8:45)
Creating Reusable Components (3:58)
Component Inputs: Repetition (5:22)
Property Binding: Repetition (8:31)
Using Content Projection & ng-content (2:58)
Adding Forms to Components (6:01)
A Possible, But Not Ideal Way Of Extending Built-in Elements (4:27)
Extending Built-in Elements with Custom Components via Attribute Selectors (5:08)
Supporting Content Projection with Multiple Slots (6:32)
Exploring Advanced Content Projection (3:10)
Defining Content Projection Fallbacks (2:09)
Multi-Element Custom Components & Content Projection (7:28)
Scoping CSS Styles to Components (5:03)
Understanding & Configuring View Encapsulation (5:22)
Making Sense of Component Host Elements (2:52)
Using Host Elements Like Regular Elements (4:30)
Interacting With Host Elements From Inside Components (2:06)
When (Not) To Rely On Host Elements (6:08)
Interacting with Host Elements via @HostListener & @HostBinding (5:14)
Accessing Host Elements Programmatically (4:03)
Class Bindings: Repetition (4:24)
There's More Than One Way Of Binding CSS Classes Dynamically (3:16)
A Closer Look At Dynamic Inline Style Binding (3:30)
Manipulating State & Using Literal Values (4:42)
Introducing the Component Lifecycle: ngOnInit (4:02)
Implementing Lifecycle Interfaces (3:11)
Component Lifecycle - A Deep Dive (15:16)
Component Cleanup with ngOnDestroy (4:07)
Component Cleanup with DestroyRef (2:48)
Handling Form Submissions: Repetition (2:46)
Working with Template Variables (7:13)
Extracting Input Values via Template Variables (1:54)
Template Variables & Component Instances (2:35)
Getting Access to Template Elements via ViewChild (9:27)
Using The viewChild Signal Function (6:22)
ViewChild vs ContentChild (6:58)
A Closer Look at Decorator-based Queries & Lifecycle Hooks (4:57)
The afterRender and afterNextRender Lifecycle Functions (3:08)
Making Sense of Signal Effects (5:28)
Signal Effects Cleanup Functions
TypeScript & Type Models: Repetition (3:31)
Component Outputs: Repetition (4:23)
A Closer Look At Template For Loops (5:53)
Revisiting Inputs & Signals (5:00)
Updating Signal Values (4:50)
Cross-Component Communication & State Management (6:13)
Configuring Component Inputs & Outputs (4:06)
Two-Way Binding: Repetition (3:55)
Setting Up Custom Two-Way Binding (8:54)
An Easier Way of Setting Up Custom Two-Way Binding (3:53)

Enhancing Elements with Directives - Deep Dive

Module Introduction (1:03)
Understanding Directives (2:57)
The Starting Project (1:04)
Analyzing a Built-in Attribute Directive: ngModel (5:41)
Analyzing a Built-in Structural Directive: ngIf (6:29)
Getting Started with Custom Directives (8:10)
Using Attribute Directives To Change Element Behavior (4:47)
Working with Inputs in Custom Directives (8:51)
Directives & Dependency Injection (4:09)
Building Another Directive (7:56)
Building a Custom Structural Directive (8:22)
Structural Directives & Syntactic Sugar (3:07)
Host Directives & Composition (7:59)

Transforming Values with Pipes - Deep Dive

Module Introduction (0:36)
Making Sense of Pipes (2:55)
Using Built-in Pipes (2:56)
More Built-in Pipes Examples (4:18)
Building a First Custom Pipe (5:57)
Using Custom Pipes to Perform Custom Transformations (3:49)
Accepting Parameters in Custom Pipes (5:57)
Chaining Pipes & Being Aware of Limitations (4:44)
Building a Pipe That Sorts Items (6:45)
Understanding How Pipes Are Executed (4:14)
Pure & Impure Pipes (1:44)
Pipe Limitations & When Not To Use Them (2:53)

Understanding Services & Dependency Injection - Deep Dive

The Starting Project & The Need For A Centralized Service (3:14)
Module Introduction (0:59)
Creating a Service (7:27)
How NOT To Provide A Service (2:23)
Using Angular's Dependency Injection Mechanism (5:01)
Using The Alternative Dependency Injection Syntax (5:27)
Outsourcing & Reusing Logic with Services (10:56)
Angular Has Multiple Injectors! (4:23)
There Are Multiple Ways Of Providing a Service (4:16)
Providing Services via the Element Injector (3:16)
Understanding the Element Injector's Behavior (3:44)
Injecting Services Into Services (5:26)
Analyzing Dependency Injection with the Angular DevTools (2:29)
Using Custom DI Tokens & Providers (8:27)
Preparing A Non-Class Value For Injection (5:24)
Injecting Other Values (NOT Services) (10:25)
Angular Modules (NgModule) & Dependency Injection (3:05)
Working with Services Without Using Signals (2:16)

Making Sense of Change Detection - Deep Dive

Module Introduction (1:52)
Analyzing the Starting Project (1:52)
Understanding How Angular Performs Change Detection (4:44)
Change Detection During Development: ExpressionChangedAfterChecked Errors (2:45)
Writing Efficient Template Bindings (1:19)
Avoiding Zone Pollution (5:18)
Using the OnPush Strategy (3:21)
Understanding the OnPush Strategy (8:37)
Working with OnPush & Signals (2:13)
Using Signals for Sharing Data Across Components (with OnPush) (4:11)
The Problem With OnPush, Cross-Component Data & Not Using Signals (3:12)
Triggering Change Detection Manually & Using RxJS Subjects (11:01)
Introducing The async Pipe (4:32)
Going Zoneless! (12:58)

Working with RxJS (Observables) - Deep Dive

Module Introduction (0:52)
What Are Observables & What Is RxJS? (1:07)
Creating & Using an Observable (9:17)
Working with RxJS Operators (5:34)
Working with Signals (5:13)
Signals vs Observables (6:00)
Converting Signals To Observables (3:49)
Converting Observables To Signals (4:53)
Deep Dive: Creating & Using A Custom Observable From Scratch (12:24)
Module Summary (2:38)

Sending HTTP Requests & Handling Responses

Module Introduction (1:28)
The Starting Projects: Frontend & Backend (4:42)
How To Connect Angular Apps To A Backend (4:02)
Optional: HTTP Essentials
Getting Started with Angular's Http Client (4:23)
Providing the HttpClient when using NgModules
Sending a GET Request To Fetch Data (7:53)
Configuring Http Requests (3:40)
Transforming & Using Response Data (2:51)
Showing a Loading Fallback (3:11)
Handling HTTP Errors (10:45)
Sending Data To A Backend (7:09)
More Data Fetching & Some Code Duplication (4:34)
Outsourcing HTTP Request Logic Into A Service (8:58)
Managing HTTP-loaded Data via a Service (4:54)
Implementing Optimistic Updating (2:41)
Potential Problems Introduced by Optimistic Updating (2:06)
Improved Optimistic Updating (5:09)
Implementing App-wide Error Management (7:07)
Practice: Sending DELETE Requests (8:24)
Introducing HTTP Interceptors (6:57)
Optional: Class-based Interceptors
Introducing HTTP Response Interceptors (3:03)

Handling User Input & Working with Forms (Template-driven & Reactive)

Template-driven vs Reactive Forms (2:53)
Module Introduction (2:27)
Template-driven: Registering Form Controls (6:00)
Getting Access to the Angular-managed Form (8:31)
Extracting User Input Values (2:46)
Validating Input with Form Validation Directives (6:09)
Using the Form Validation Status To Provide User Feedback (7:33)
Adding Validation Styles (4:45)
Interacting With The Underlying Form Object In The Component (13:10)
Updating Form Values Programmatically (5:29)
Reactive Forms: Getting Started (5:18)
Syncing Reactive Form Definition & Template (3:36)
Handling Form Submission (Reactive Forms) (3:15)
Adding Validators To Reactive Forms (6:35)
Building Custom Validators (5:21)
Creating & Using Async Validators (3:54)
Interacting with the Form Programmatically (8:38)
Exercise: Problem (2:18)
Exercise: Solution (4:37)
Connecting & Registering Inputs For A Complex Form (8:58)
Working with Nested Form Groups (5:29)
Working with Form Arrays (4:44)
Practice: Adding More Validation (3:31)
Creating Multi-Input Validators / Form Group Validators (7:50)
Module Summary (1:30)

Routing & Building Multi-page Single Page Applications

Module Introduction (1:57)
What Is Routing? (2:35)
Enabling Routing & Adding a First Route (6:15)
Rendering Routes (3:34)
Registering Multiple Routes (3:14)
Adding Links The Right Way (5:50)
Styling Active Navigation Links (2:53)
Setting Up & Navigating To Dynamic Routes (7:23)
Extracting Dynamic Route Parameters via Inputs (5:33)
Extracting Dynamic Route Parameters via @Input()
Extracting Dynamic Route Parameters via Observables (7:59)
Working with Nested Routes (5:30)
Route Links & Relative Links (2:35)
Accessing Parent Route Data From Inside Nested Routes (4:32)
Loading Data Based On Route Parameters In Child Routes (2:15)
Link Shortcuts & Programmatic Navigation (6:37)
Adding A "Not Found" Route (1:46)
Redirecting Users (5:09)
Splitting Route Definitions Across Multiple Files (2:50)
Activated Route vs Activated Route Snapshot (3:38)
Setting Query Parameters (5:35)
Extracting Query Parameters via Inputs (3:16)
Extracting Query Parameters via Observables (3:22)
Using Query Parameters For Data Manipulation (3:37)
Adding Static Data To Routes (5:06)
Resolving Route-related Dynamic Data (11:22)
Optional: Class-based Resolvers
Accessing Route Data In Components (2:46)
Controlling Route Resolver Execution (3:08)
Setting & Resolving Titles (4:14)
Introducing Route Guards (9:18)
Optional: Class-based Guards
Making Sense of The CanDeactivate Guard (4:56)
Improving The CanDeactivate Logic (2:59)
Reloading Pages via the Angular Router & Configuring Programmatic Navigation (5:46)

Code Splitting & Deferrable Views

Module Introduction (1:04)
What Is Lazy Loading / Code Splitting? (1:36)
Introducing Route-based Lazy Loading (2:49)
Implementing Route-based Lazy Loading (8:14)
Lazy Loading Entire Route Groups (5:19)
Using Lazy Loading & Routing to Lazy-load Services (3:58)
Introducing Deferrable Views (3:09)
Defer Loading Until Viewport Visibility (3:47)
Deferrable Views: Using Other Triggers (1:36)
Prefetching Lazy-loaded Code (1:59)
Deferrable Views: Summary (2:06)

Deploying Angular Apps - CSR, SSR, SGA

Module Introduction (1:08)
The Starting Project
Preparing a Project For Deployment: Building It For Production (4:56)
Building SPAs: Pros & Cons (3:42)
SPAs: Deployment Example (7:54)
Using "ng add", "ng deploy" & Angular's Built-in Deployment Support (2:16)
Server-side Rendering (SSR) Introduction (3:39)
Setting Up SSR For An Angular App (4:12)
Building and Service an SSR App (2:36)
Authoring SSR-ready Code (Beware of Pitfalls!) (3:53)
SSR and Client-Server Mismatches (3:37)
Static Site Generation (SSG) Introduction (2:55)
Configuring & Using SSG (5:34)
Deployment Methods - A Summary (0:54)
SSR & SSG Deployment Example

Roundup & Next Steps

Course Roundup (1:48)

Bonus: TypeScript Introduction

Module Introduction (1:15)
What & Why? (6:32)
Installing & Using TypeScript (6:22)
Base Types & Primitives (3:55)
Array & Object Types (5:33)
Type Inference (2:47)
Working with Union Types (2:48)
Assigning Type Aliases (2:42)
Diving into Functions & Function Types (5:12)
Understanding Generics (7:20)
Classes & TypeScript (7:58)
Working with Interfaces (5:36)
Configuring the TypeScript Compiler (2:29)
Module Resources

Setting Up An Angular Development Environment

Complete and Continue