Course Content
Subtitle Guide – Hướng dẫn thêm phụ đề
0/1
Set up subtitle for video – Hướng dẫn thêm phụ đề
01 – Getting Started
0/8
Download Resource Files
001 Welcome To The Course!
01:31
002 What Exactly Is Angular
01:49
003 Why Would You Use Angular
06:41
004 Angular’s Evolution & Stability
04:44
005 Creating A New Angular Project
07:02
006 Setting Up An Angular Development Environment
04:48
007 About This Course
03:18
02 – Angular Essentials – Components, Templates, Services & More
0/58
Download Resource Files
001 Module Introduction
01:19
002 A New Starting Project & Analyzing The Project Structure
06:27
003 Understanding Components & How Content Ends Up On The Screen
06:18
004 Creating a First Custom Component
05:14
006 Configuring the Custom Component
05:20
007 Using the Custom Component
06:08
008 Styling the Header Component & Adding An Image
06:20
009 Managing & Creating Components with the Angular CLI
04:28
010 Styling & Using Our Next Custom Component
05:08
011 Preparing User Data (To Output Dynamic Content)
02:07
012 Storing Data in a Component Class
03:55
013 Outputting Dynamic Content with String Interpolation
02:30
014 Property Binding & Outputting Computed Values
04:37
016 Using Getters For Computed Values
03:29
017 Listening to Events with Event Binding
04:04
018 Managing State & Changing Data
03:06
019 A Look Behind The Scenes Of Angular’s Change Detection Mechanism
02:06
020 Introducing Signals_part1
06:26
020 Introducing Signals_part2
06:26
021 We Need More Flexible Components!
03:40
022 Defining Component Inputs
08:17
023 Required & Optional Inputs
02:56
024 Using Signal Inputs
14:00
025 We Need Custom Events!
01:47
026 Working with Outputs & Emitting Data
06:59
027 Using the output() Function
06:12
028 Adding Extra Type Information To EventEmitter
01:57
029 Exercise Create a Configurable Component_part1
04:23
029 Exercise Create a Configurable Component_part2
04:23
030 TypeScript Working With Potentially Undefined Values & Union Types
08:06
031 Accepting Objects As Inputs & Adding Appropriate Typings
04:46
032 TypeScript Type Aliases & Interfaces
03:11
033 Outputting List Content
05:33
034 Outputting Conditional Content
04:26
035 Legacy Angular Using ngFor & ngIf
05:21
036 Adding More Components to the Demo App
06:14
037 Outputting User-specific Tasks
06:30
038 Outputting Task Data in the Task Component
04:04
039 Storing Data Models in Separate Files
03:44
040 Dynamic CSS Styling with Class Bindings
04:36
041 More Component Communication Deleting Tasks
05:25
042 Creating & Conditionally Rendering Another Component
05:25
043 Managing The New Task Dialog_part1
03:15
043 Managing The New Task Dialog_part2
03:15
044 Using Directives & Two-Way-Binding
10:46
045 Signals & Two-Way-Binding
02:19
046 Handling Form Submission
03:20
047 Using the Submitted Data
07:20
048 Content Projection with ng-content
06:48
049 Transforming Template Data with Pipes
03:16
050 Getting Started with Services
06:15
051 Getting Started with Dependency Injection
08:02
052 More Service Usage & Alternative Dependency Injection Mechanism
05:17
053 Time to Practice Services
03:16
054 Using localStorage for Data Storage
05:40
055 Module Summary_part1
04:22
055 Module Summary_part2
04:22
03 – Angular Essentials – Working with Modules
0/10
Download Resource Files
001 Module Introduction
02:16
002 A First Introduction To Angular Modules (NgModule)
03:05
003 Creating a First Empty Module
02:56
004 Bootstrapping Apps with Angular Modules
05:21
005 Declaring & Using Components
04:46
006 A First Summary
02:14
007 Migrating All Components To Use Modules
06:50
008 Creating & Using Shared Modules
04:13
009 Creating More Complex Module-based App Structures
07:22
04 – Angular Essentials – Time To Practice
0/23
Download Resource Files
001 Module Introduction & Starting Project
05:19
003 Adding a Header Component With An Image
05:11
004 Adding a User Input Component
06:42
005 Handling Form Submission
02:30
006 Extracting Values with Two-Way-Binding
08:10
007 Calculating the Annual Investment Data_part1
02:32
007 Calculating the Annual Investment Data_part2
02:32
008 Cross-Component Communication with Outputs_part1
04:42
008 Cross-Component Communication with Outputs_part2
04:42
009 Creating & Using a Data Model
02:58
010 Passing Data from Parent to Child with Inputs_part1
05:04
010 Passing Data from Parent to Child with Inputs_part2
05:04
011 Outputting Data in a Table
04:57
012 Formatting Output with a Pipe
01:39
013 Using Signals & Resetting The Form After Submission_part1
04:58
013 Using Signals & Resetting The Form After Submission_part2
04:57
014 Using a Service for Cross-Component Communication_part1
04:47
014 Using a Service for Cross-Component Communication_part2
04:47
015 Using Signals in Services
04:11
016 Migrating to Angular Modules_part1
04:04
016 Migrating to Angular Modules_part2
04:04
017 Module Summary
01:13
05 – Debugging Angular Apps
0/6
Download Resource Files
001 Module Introduction
01:41
002 Understanding Error Messages & Fixing Errors
03:46
003 Debugging Logical Errors with the Browser DevTools & Breakpoints_part1
03:09
003 Debugging Logical Errors with the Browser DevTools & Breakpoints_part2
03:09
004 Exploring the Angular DevTools
03:50
06 – Components & Templates – Deep Dive
0/58
Download Resource Files
001 Module Introduction
02:00
002 Starting Project & An Opportunity For Smaller Components
02:34
003 When & How To Split Up Components
04:25
004 Splitting A Component Into Multiple Components_part1
04:22
004 Splitting A Component Into Multiple Components_part2
04:22
005 Creating Reusable Components
03:58
006 Component Inputs Repetition
05:22
007 Property Binding Repetition
08:31
008 Using Content Projection & ng-content
02:58
009 Adding Forms to Components
06:01
010 A Possible, But Not Ideal Way Of Extending Built-in Elements
04:27
011 Extending Built-in Elements with Custom Components via Attribute Selectors
05:08
012 Supporting Content Projection with Multiple Slots
06:32
013 Exploring Advanced Content Projection
03:10
014 Defining Content Projection Fallbacks
02:09
015 Multi-Element Custom Components & Content Projection
07:28
016 Scoping CSS Styles to Components
05:03
017 Understanding & Configuring View Encapsulation
05:22
018 Making Sense of Component Host Elements
02:52
019 Using Host Elements Like Regular Elements
04:30
020 Interacting With Host Elements From Inside Components
02:06
021 When (Not) To Rely On Host Elements_part1
03:04
021 When (Not) To Rely On Host Elements_part2
03:04
022 Interacting with Host Elements via @HostListener & @HostBinding
05:14
023 Accessing Host Elements Programmatically
04:03
024 Class Bindings Repetition
04:24
025 There’s More Than One Way Of Binding CSS Classes Dynamically
03:16
026 A Closer Look At Dynamic Inline Style Binding
03:30
027 Manipulating State & Using Literal Values
04:42
028 Introducing the Component Lifecycle ngOnInit
04:02
029 Implementing Lifecycle Interfaces
03:11
030 Component Lifecycle – A Deep Dive_part1
07:38
030 Component Lifecycle – A Deep Dive_part2
07:38
031 Component Cleanup with ngOnDestroy
04:07
032 Component Cleanup with DestroyRef
02:48
033 Handling Form Submissions Repetition
02:46
034 Working with Template Variables
07:13
035 Extracting Input Values via Template Variables
01:54
036 Template Variables & Component Instances
02:35
037 Getting Access to Template Elements via ViewChild_part1
04:43
037 Getting Access to Template Elements via ViewChild_part2
04:43
038 Using The viewChild Signal Function
06:22
039 ViewChild vs ContentChild
06:58
040 A Closer Look at Decorator-based Queries & Lifecycle Hooks
04:57
041 The afterRender and afterNextRender Lifecycle Functions
03:09
042 Making Sense of Signal Effects
05:28
044 TypeScript & Type Models Repetition
03:31
045 Component Outputs Repetition
04:23
046 A Closer Look At Template For Loops
05:53
047 Revisiting Inputs & Signals
05:00
048 Updating Signal Values
04:50
049 Cross-Component Communication & State Management
06:13
050 Configuring Component Inputs & Outputs
04:06
051 Two-Way Binding Repetition
03:55
052 Setting Up Custom Two-Way Binding_part1
04:27
052 Setting Up Custom Two-Way Binding_part2
04:27
053 An Easier Way of Setting Up Custom Two-Way Binding
03:53
07 – Enhancing Elements with Directives – Deep Dive
0/16
Download Resource Files
001 Module Introduction
01:03
002 Understanding Directives
02:57
003 The Starting Project
01:04
004 Analyzing a Built-in Attribute Directive ngModel
05:41
005 Analyzing a Built-in Structural Directive ngIf
06:29
006 Getting Started with Custom Directives
08:10
007 Using Attribute Directives To Change Element Behavior
04:47
008 Working with Inputs in Custom Directives
08:51
009 Directives & Dependency Injection
04:09
010 Building Another Directive_part1
03:58
010 Building Another Directive_part2
03:58
011 Building a Custom Structural Directive
08:22
012 Structural Directives & Syntactic Sugar
03:08
013 Host Directives & Composition_part1
04:00
013 Host Directives & Composition_part2
03:59
08 – Transforming Values with Pipes – Deep Dive
0/13
Download Resource Files
001 Module Introduction
00:36
002 Making Sense of Pipes
02:55
003 Using Built-in Pipes
02:56
004 More Built-in Pipes Examples
04:18
005 Building a First Custom Pipe
05:57
006 Using Custom Pipes to Perform Custom Transformations
03:49
007 Accepting Parameters in Custom Pipes
05:57
008 Chaining Pipes & Being Aware of Limitations
04:44
009 Building a Pipe That Sorts Items
06:45
010 Understanding How Pipes Are Executed
04:14
011 Pure & Impure Pipes
01:44
012 Pipe Limitations & When Not To Use Them
02:53
09 – Understanding Services & Dependency Injection – Deep Dive
0/21
Download Resource Files
001 Module Introduction
00:59
002 The Starting Project & The Need For A Centralized Service
03:14
003 Creating a Service
07:27
004 How NOT To Provide A Service
02:23
005 Using Angular’s Dependency Injection Mechanism
05:01
006 Using The Alternative Dependency Injection Syntax
05:27
007 Outsourcing & Reusing Logic with Services_part1
05:28
007 Outsourcing & Reusing Logic with Services_part2
05:28
008 Angular Has Multiple Injectors!
04:23
009 There Are Multiple Ways Of Providing a Service
04:16
010 Providing Services via the Element Injector
03:16
011 Understanding the Element Injector’s Behavior
03:44
012 Injecting Services Into Services
05:26
013 Analyzing Dependency Injection with the Angular DevTools
02:29
014 Using Custom DI Tokens & Providers
08:27
015 Preparing A Non-Class Value For Injection
05:24
016 Injecting Other Values (NOT Services)_part1
05:12
016 Injecting Other Values (NOT Services)_part2
05:12
017 Angular Modules (NgModule) & Dependency Injection
03:05
018 Working with Services Without Using Signals
02:16
10 – Making Sense of Change Detection – Deep Dive
0/19
Download Resource Files
001 Module Introduction
01:52
002 Analyzing the Starting Project
01:52
003 Understanding How Angular Performs Change Detection
04:45
004 Change Detection During Development ExpressionChangedAfterChecked Errors
02:45
005 Writing Efficient Template Bindings
01:19
006 Avoiding Zone Pollution
05:18
007 Using the OnPush Strategy
03:21
008 Understanding the OnPush Strategy_part1
04:18
008 Understanding the OnPush Strategy_part2
04:18
009 Working with OnPush & Signals
02:13
010 Using Signals for Sharing Data Across Components (with OnPush)
04:11
011 The Problem With OnPush, Cross-Component Data & Not Using Signals
03:12
012 Triggering Change Detection Manually & Using RxJS Subjects_part1
05:30
012 Triggering Change Detection Manually & Using RxJS Subjects_part2
05:30
013 Introducing The async Pipe
04:32
014 Going Zoneless!_part1
04:19
014 Going Zoneless!_part2
04:19
014 Going Zoneless!_part3
04:19
11 – Working with RxJS (Observables) – Deep Dive
0/13
Download Resource Files
001 Module Introduction
00:52
002 What Are Observables & What Is RxJS
01:07
003 Creating & Using an Observable_part1
04:38
003 Creating & Using an Observable_part2
04:38
004 Working with RxJS Operators
05:34
005 Working with Signals
05:13
006 Signals vs Observables
06:00
007 Converting Signals To Observables
03:49
008 Converting Observables To Signals
04:53
009 Deep Dive Creating & Using A Custom Observable From Scratch_part1
06:12
009 Deep Dive Creating & Using A Custom Observable From Scratch_part2
06:12
010 Module Summary
02:38
12 – Sending HTTP Requests & Handling Responses
0/28
Download Resource Files
001 Module Introduction
01:28
002 The Starting Projects Frontend & Backend
04:42
003 How To Connect Angular Apps To A Backend
04:02
005 Getting Started with Angular’s Http Client
04:23
007 Sending a GET Request To Fetch Data
07:53
008 Configuring Http Requests
03:40
009 Transforming & Using Response Data
02:51
010 Showing a Loading Fallback
03:11
011 Handling HTTP Errors_part1
05:22
011 Handling HTTP Errors_part2
05:22
012 Sending Data To A Backend_part1
03:34
012 Sending Data To A Backend_part2
03:34
013 More Data Fetching & Some Code Duplication_part1
02:17
013 More Data Fetching & Some Code Duplication_part2
02:17
014 Outsourcing HTTP Request Logic Into A Service_part1
04:29
014 Outsourcing HTTP Request Logic Into A Service_part2
04:29
015 Managing HTTP-loaded Data via a Service_part1
02:27
015 Managing HTTP-loaded Data via a Service_part2
02:27
016 Implementing Optimistic Updating
02:41
017 Potential Problems Introduced by Optimistic Updating
02:06
018 Improved Optimistic Updating
05:09
019 Implementing App-wide Error Management
11:10
020 Practice Sending DELETE Requests_part1
04:12
020 Practice Sending DELETE Requests_part2
04:12
021 Introducing HTTP Interceptors_part1
03:28
021 Introducing HTTP Interceptors_part2
03:28
023 Introducing HTTP Response Interceptors
03:03
13 – Handling User Input & Working with Forms (Template-driven & Reactive)
0/31
Download Resource Files
001 Module Introduction
02:27
002 Template-driven vs Reactive Forms
02:53
003 Template-driven Registering Form Controls
06:00
004 Getting Access to the Angular-managed Form
08:31
005 Extracting User Input Values
02:46
006 Validating Input with Form Validation Directives
06:09
007 Using the Form Validation Status To Provide User Feedback
07:33
008 Adding Validation Styles
04:45
009 Interacting With The Underlying Form Object In The Component_part1
04:23
009 Interacting With The Underlying Form Object In The Component_part2
04:23
009 Interacting With The Underlying Form Object In The Component_part3
04:23
010 Updating Form Values Programmatically
05:29
011 Reactive Forms Getting Started
05:18
012 Syncing Reactive Form Definition & Template
03:36
013 Handling Form Submission (Reactive Forms)
03:16
014 Adding Validators To Reactive Forms_part1
03:18
014 Adding Validators To Reactive Forms_part2
03:17
015 Building Custom Validators
05:21
016 Creating & Using Async Validators
03:54
017 Interacting with the Form Programmatically_part1
04:19
017 Interacting with the Form Programmatically_part2
04:19
018 Exercise Problem
02:18
019 Exercise Solution
04:37
020 Connecting & Registering Inputs For A Complex Form_part1
04:29
020 Connecting & Registering Inputs For A Complex Form_part2
04:29
021 Working with Nested Form Groups
05:29
022 Working with Form Arrays
04:44
023 Practice Adding More Validation
03:31
024 Creating Multi-Input Validators Form Group Validators
07:50
025 Module Summary
01:30
14 – Routing & Building Multi-page Single Page Applications
0/35
Download Resource Files
001 Module Introduction
01:57
002 What Is Routing
02:35
003 Enabling Routing & Adding a First Route
06:15
004 Rendering Routes
03:34
005 Registering Multiple Routes
03:15
006 Adding Links The Right Way
05:50
007 Styling Active Navigation Links
02:53
008 Setting Up & Navigating To Dynamic Routes
07:23
009 Extracting Dynamic Route Parameters via Inputs
05:33
011 Extracting Dynamic Route Parameters via Observables_part1
03:59
011 Extracting Dynamic Route Parameters via Observables_part2
03:59
012 Working with Nested Routes
05:30
013 Route Links & Relative Links
02:35
014 Accessing Parent Route Data From Inside Nested Routes
04:32
015 Loading Data Based On Route Parameters In Child Routes
02:15
016 Link Shortcuts & Programmatic Navigation
06:37
017 Adding A Not Found Route
01:46
018 Redirecting Users
05:09
019 Splitting Route Definitions Across Multiple Files
02:50
020 Activated Route vs Activated Route Snapshot
03:38
021 Setting Query Parameters
05:35
022 Extracting Query Parameters via Inputs
03:16
023 Extracting Query Parameters via Observables
03:22
024 Using Query Parameters For Data Manipulation
03:37
025 Adding Static Data To Routes
05:06
026 Resolving Route-related Dynamic Data_part1
05:41
026 Resolving Route-related Dynamic Data_part2
05:41
028 Accessing Route Data In Components
02:46
029 Controlling Route Resolver Execution
03:09
030 Setting & Resolving Titles
04:14
031 Introducing Route Guards
09:18
033 Making Sense of The CanDeactivate Guard
04:56
034 Improving The CanDeactivate Logic
02:59
035 Reloading Pages via the Angular Router & Configuring Programmatic Navigation
05:46
15 – Code Splitting & Deferrable Views
0/13
Download Resource Files
001 Module Introduction
01:04
002 What Is Lazy Loading Code Splitting
01:36
003 Introducing Route-based Lazy Loading
02:49
004 Implementing Route-based Lazy Loading_part1
04:07
004 Implementing Route-based Lazy Loading_part2
04:07
005 Lazy Loading Entire Route Groups
05:20
006 Using Lazy Loading & Routing to Lazy-load Services
03:58
007 Introducing Deferrable Views
03:09
008 Defer Loading Until Viewport Visibility
03:47
009 Deferrable Views Using Other Triggers
01:36
010 Prefetching Lazy-loaded Code
01:59
011 Deferrable Views Summary
02:06
16 – Deploying Angular Apps – CSR, SSR, SGA
0/15
Download Resource Files
001 Module Introduction
01:08
003 Preparing a Project For Deployment Building It For Production
04:56
004 Building SPAs Pros & Cons
03:42
005 SPAs Deployment Example_part1
03:57
005 SPAs Deployment Example_part2
03:57
006 Using ng add, ng deploy & Angular’s Built-in Deployment Support
02:16
007 Server-side Rendering (SSR) Introduction
03:39
008 Setting Up SSR For An Angular App
04:12
009 Building and Service an SSR App
02:36
010 Authoring SSR-ready Code (Beware of Pitfalls!)
03:53
011 SSR and Client-Server Mismatches
03:37
012 Static Site Generation (SSG) Introduction
02:55
013 Configuring & Using SSG
05:34
014 Deployment Methods – A Summary
00:54
17 – Course Roundup & Next Steps
0/3
Download Resource Files
001 Course Roundup
01:48
003 About The Rest Of This Course
02:10
18 – The Basics [Angular 16]
0/29
Download Resource Files
002 Module Introduction
00:57
003 How an Angular App gets Loaded and Started
07:11
004 Components are Important!
03:09
005 Creating a New Component
06:51
006 Understanding the Role of AppModule and Component Declaration
05:15
008 Using Custom Components
01:12
009 Creating Components with the CLI & Nesting Components
03:51
010 Working with Component Templates
03:08
011 Working with Component Styles
04:02
012 Fully Understanding the Component Selector
03:50
013 [OPTIONAL] Assignment Solution
06:42
014 What is Databinding
02:49
015 String Interpolation
05:19
016 Property Binding
06:34
017 Property Binding vs String Interpolation
03:07
018 Event Binding
04:09
020 Passing and Using Data with Event Binding
04:37
022 Two-Way-Databinding
02:47
023 Combining all Forms of Databinding
01:46
024 [OPTIONAL] Assignment Solution
05:12
025 Understanding Directives
02:17
026 Using ngIf to Output Data Conditionally
03:53
027 Enhancing ngIf with an Else Condition
02:46
029 Styling Elements Dynamically with ngStyle
05:02
030 Applying CSS Classes Dynamically with ngClass
02:53
031 Outputting Lists with ngFor
03:43
033 [OPTIONAL] Assignment Solution
07:06
034 Getting the Index when using ngFor
02:52
19 – Course Project – The Basics [Angular 16]
0/17
Download Resource Files
002 Project Introduction
01:04
003 Planning the App
05:34
005 Setting up the Application
04:31
006 Creating the Components
09:33
007 Using the Components
03:15
008 Adding a Navigation Bar
05:09
010 Creating a Recipe Model
04:33
011 Adding Content to the Recipes Components_part1
03:50
011 Adding Content to the Recipes Components_part2
03:50
012 Outputting a List of Recipes with ngFor
04:37
013 Displaying Recipe Details
05:53
014 Working on the ShoppingListComponent
01:50
015 Creating an Ingredient Model
02:36
016 Creating and Outputting the Shopping List
02:27
017 Adding a Shopping List Edit Section
03:28
018 Wrap Up & Next Steps
00:54
20 – Debugging [Angular 16]
0/3
Download Resource Files
001 Understanding Angular Error Messages
04:36
002 Debugging Code in the Browser Using Sourcemaps
05:32
21 – Components & Databinding Deep Dive [Angular 16]
0/25
Download Resource Files
001 Module Introduction
00:36
002 Splitting Apps into Components
05:56
003 Property & Event Binding Overview
01:44
004 Binding to Custom Properties
05:43
005 Assigning an Alias to Custom Properties
01:59
006 Binding to Custom Events_part1
04:32
006 Binding to Custom Events_part2
04:32
007 Assigning an Alias to Custom Events
00:57
008 Custom Property and Event Binding Summary
02:02
009 Understanding View Encapsulation
04:59
010 More on View Encapsulation
02:43
011 Using Local References in Templates
04:36
013 Getting Access to the Template & DOM with @ViewChild
05:02
014 Projecting Content into Components with ng-content
03:22
015 Understanding the Component Lifecycle
04:54
016 Seeing Lifecycle Hooks in Action_part1
05:57
016 Seeing Lifecycle Hooks in Action_part2
05:57
017 Lifecycle Hooks and Template Access
02:33
019 Getting Access to ng-content with @ContentChild
03:00
020 Wrap Up
00:49
021 [OPTIONAL] Assignment Solution_part1
03:05
021 [OPTIONAL] Assignment Solution_part2
03:05
021 [OPTIONAL] Assignment Solution_part3
03:05
021 [OPTIONAL] Assignment Solution_part4
03:05
22 – Course Project – Components & Databinding [Angular 16]
0/6
Download Resource Files
001 Introduction
00:50
002 Adding Navigation with Event Binding and ngIf
07:31
003 Passing Recipe Data with Property Binding
04:43
004 Passing Data with Event and Property Binding (Combined)
10:32
006 Allowing the User to Add Ingredients to the Shopping List
07:22
23 – Directives Deep Dive [Angular 16]
0/13
Download Resource Files
001 Module Introduction
01:23
002 ngFor and ngIf Recap
03:36
003 ngClass and ngStyle Recap
02:57
004 Creating a Basic Attribute Directive
06:42
005 Using the Renderer to build a Better Attribute Directive
07:04
007 Using HostListener to Listen to Host Events
03:00
008 Using HostBinding to Bind to Host Properties
03:17
009 Binding to Directive Properties_part1
03:21
009 Binding to Directive Properties_part2
03:21
010 What Happens behind the Scenes on Structural Directives
03:04
011 Building a Structural Directive
06:14
012 Understanding ngSwitch
02:49
24 – Course Project – Directives [Angular 16]
0/2
Download Resource Files
001 Building and Using a Dropdown Directive
06:25
25 – Using Services & Dependency Injection [Angular 16]
0/12
Download Resource Files
001 Module Introduction
01:40
002 Why would you Need Services
02:04
003 Creating a Logging Service
03:32
004 Injecting the Logging Service into Components_part1
03:10
004 Injecting the Logging Service into Components_part2
03:10
006 Creating a Data Service
06:41
007 Understanding the Hierarchical Injector
02:41
008 How many Instances of Service Should It Be
02:12
009 Injecting Services into Services
05:13
010 Using Services for Cross-Component Communication
04:07
012 [OPTIONAL] Assignment Solution
09:37
26 – Course Project – Services & Dependency Injection [Angular 16]
0/9
Download Resource Files
001 Introduction
01:23
002 Setting up the Services
01:15
003 Managing Recipes in a Recipe Service
04:07
004 Using a Service for Cross-Component Communication
05:07
005 Adding the Shopping List Service
05:04
006 Using Services for Pushing Data from A to B
03:08
007 Adding Ingredients to Recipes
03:42
008 Passing Ingredients from Recipes to the Shopping List (via a Service)
07:03
27 – Changing Pages with Routing [Angular 16]
0/36
Download Resource Files
001 Module Introduction
01:26
002 Why do we need a Router
01:16
004 Setting up and Loading Routes
08:02
005 Navigating with Router Links
05:18
006 Understanding Navigation Paths_part1
02:27
006 Understanding Navigation Paths_part2
02:27
007 Styling Active Router Links
05:01
008 Navigating Programmatically
03:28
009 Using Relative Paths in Programmatic Navigation
05:09
010 Passing Parameters to Routes
03:10
011 Fetching Route Parameters
04:01
012 Fetching Route Parameters Reactively
07:25
013 An Important Note about Route Observables
02:42
014 Passing Query Parameters and Fragments
05:53
015 Retrieving Query Parameters and Fragments
03:16
016 Practicing and some Common Gotchas
06:07
017 Setting up Child (Nested) Routes
04:28
018 Using Query Parameters – Practice
05:36
019 Configuring the Handling of Query Parameters
01:50
020 Redirecting and Wildcard Routes_part1
02:18
020 Redirecting and Wildcard Routes_part2
02:18
022 Outsourcing the Route Configuration
04:40
023 An Introduction to Guards
01:45
024 Protecting Routes with canActivate
08:55
025 Protecting Child (Nested) Routes with canActivateChild
02:52
026 Using a Fake Auth Service
01:43
027 Controlling Navigation with canDeactivate_part1
06:14
027 Controlling Navigation with canDeactivate_part2
06:14
028 Passing Static Data to a Route_part1
02:58
028 Passing Static Data to a Route_part2
02:58
029 Resolving Dynamic Data with the resolve Guard_part1
03:17
029 Resolving Dynamic Data with the resolve Guard_part2
03:17
029 Resolving Dynamic Data with the resolve Guard_part3
03:17
030 Understanding Location Strategies
04:43
031 Wrap Up
00:51
28 – Course Project – Routing [Angular 16]
0/15
Download Resource Files
001 Planning the General Structure
01:36
002 Setting Up Routes
07:58
003 Adding Navigation to the App
01:41
004 Marking Active Routes
01:31
005 Fixing Page Reload Issues
02:51
006 Child Routes Challenge
01:54
007 Adding Child Routing Together
04:21
008 Configuring Route Parameters
06:22
009 Passing Dynamic Parameters to Links
03:01
010 Styling Active Recipe Items
01:15
011 Adding Editing Routes
03:44
012 Retrieving Route Parameters
03:19
013 Programmatic Navigation to the Edit Page
04:46
014 One Note about Route Observables
00:52
29 – Understanding Observables [Angular 16]
0/11
Download Resource Files
001 Module Introduction
04:25
003 Analyzing Angular Observables
02:15
004 Getting Closer to the Core of Observables
06:50
005 Building a Custom Observable
04:46
006 Errors & Completion
06:39
007 Observables & You!
01:55
008 Understanding Operators_part1
04:20
008 Understanding Operators_part2
04:20
009 Subjects
08:17
010 Wrap Up
01:15
30 – Course Project – Observables [Angular 16]
0/2
Download Resource Files
001 Improving the Reactive Service with Observables (Subjects)
06:04
31 – Handling Forms in Angular Apps [Angular 16]
0/37
Download Resource Files
001 Module Introduction
01:19
002 Why do we Need Angular’s Help
02:21
003 Template-Driven (TD) vs Reactive Approach
01:16
004 An Example Form
01:32
005 TD Creating the Form and Registering the Controls
05:42
006 TD Submitting and Using the Form
06:15
007 TD Understanding Form State
02:29
008 TD Accessing the Form with @ViewChild
03:03
009 TD Adding Validation to check User Input
04:14
011 TD Using the Form State
04:27
012 TD Outputting Validation Error Messages
02:23
013 TD Set Default Values with ngModel Property Binding
02:16
014 TD Using ngModel with Two-Way-Binding
02:48
015 TD Grouping Form Controls
03:30
016 TD Handling Radio Buttons
03:27
017 TD Setting and Patching Form Values
04:42
018 TD Using Form Data
04:44
019 TD Resetting Forms
01:48
020 Introduction to the Reactive Approach
00:40
021 Reactive Setup
02:26
022 Reactive Creating a Form in Code
04:07
023 Reactive Syncing HTML and Form
03:58
024 Reactive Submitting the Form
02:15
025 Reactive Adding Validation
02:51
026 Reactive Getting Access to Controls
03:47
027 Reactive Grouping Controls
03:46
029 Reactive Arrays of Form Controls (FormArray)
07:31
030 Reactive Creating Custom Validators
06:11
031 Reactive Using Error Codes
03:20
032 Reactive Creating a Custom Async Validator
04:38
033 Reactive Reacting to Status or Value Changes
02:11
034 Reactive Setting and Patching Values
02:09
035 [OPTIONAL] Assignment Solution_part1
03:27
035 [OPTIONAL] Assignment Solution_part2
03:27
035 [OPTIONAL] Assignment Solution_part3
03:27
035 [OPTIONAL] Assignment Solution_part4
03:27
32 – Course Project – Forms [Angular 16]
0/22
Download Resource Files
001 Introduction
00:59
002 TD Adding the Shopping List Form
03:43
003 Adding Validation to the Form
02:22
004 Allowing the Selection of Items in the List
04:24
005 Loading the Shopping List Items into the Form
03:02
006 Updating existing Items
03:15
007 Resetting the Form
02:34
008 Allowing the the User to Clear (Cancel) the Form
01:16
009 Allowing the Deletion of Shopping List Items
02:52
010 Creating the Template for the (Reactive) Recipe Edit Form
05:00
011 Creating the Form For Editing Recipes
05:06
012 Syncing HTML with the Form
03:52
014 Adding Ingredient Controls to a Form Array
05:39
015 Adding new Ingredient Controls
03:39
016 Validating User Input
05:10
017 Submitting the Recipe Edit Form
07:30
018 Adding a Delete and Clear (Cancel) Functionality
04:47
019 Redirecting the User (after Deleting a Recipe)
01:47
020 Adding an Image Preview
01:48
021 Providing the Recipe Service Correctly
01:59
022 Deleting Ingredients and Some Finishing Touches
03:34
33 – Using Pipes to Transform Output [Angular 16]
0/11
Download Resource Files
001 Introduction & Why Pipes are Useful
02:02
002 Using Pipes
03:28
003 Parametrizing Pipes
02:10
004 Where to learn more about Pipes
01:56
005 Chaining Multiple Pipes
02:20
006 Creating a Custom Pipe
06:42
007 Parametrizing a Custom Pipe
02:36
008 Example Creating a Filter Pipe
07:01
009 Pure and Impure Pipes (or How to fix the Filter Pipe)
04:46
010 Understanding the async Pipe
04:04
34 – Making Http Requests [Angular 16]
0/28
Download Resource Files
001 A New IDE
00:43
002 Module Introduction
01:06
003 How Does Angular Interact With Backends
03:10
004 The Anatomy of a Http Request
02:27
005 Backend (Firebase) Setup
02:35
006 Sending a POST Request
10:11
007 GETting Data
02:56
008 Using RxJS Operators to Transform Response Data
03:59
009 Using Types with the HttpClient
05:07
010 Outputting Posts
02:15
011 Showing a Loading Indicator
02:03
012 Using a Service for Http Requests
06:37
013 Services & Components Working Together
03:28
014 Sending a DELETE Request
03:27
015 Handling Errors
06:38
016 Using Subjects for Error Handling
02:39
017 Using the catchError Operator
02:13
018 Error Handling & UX
02:07
019 Setting Headers
03:18
020 Adding Query Params
04:01
021 Observing Different Types of Responses
07:32
022 Changing the Response Body Type
03:16
023 Introducing Interceptors
07:24
024 Manipulating Request Objects
02:32
025 Response Interceptors
02:46
026 Multiple Interceptors
04:52
027 Wrap Up
01:57
35 – Course Project – Http [Angular 16]
0/9
Download Resource Files
001 Module Introduction
00:55
002 Backend (Firebase) Setup
02:03
003 Setting Up the DataStorage Service
05:32
004 Storing Recipes
06:39
005 Fetching Recipes
05:38
006 Transforming Response Data
04:17
007 Resolving Data Before Loading
07:31
008 Fixing a Bug with the Resolver
01:43
36 – Authentication & Route Protection in Angular
0/24
Download Resource Files
001 Module Introduction
00:52
002 How Authentication Works
05:01
003 Adding the Auth Page
06:44
004 Switching Between Auth Modes
04:02
005 Handling Form Input
03:44
006 Preparing the Backend
03:15
008 Preparing the Signup Request
08:24
009 Sending the Signup Request
04:36
010 Adding a Loading Spinner & Error Handling Logic
06:34
011 Improving Error Handling
05:39
012 Sending Login Requests
06:00
013 Login Error Handling
04:29
014 Creating & Storing the User Data
10:17
015 Reflecting the Auth State in the UI
09:41
016 Adding the Token to Outgoing Requests_part1
05:07
016 Adding the Token to Outgoing Requests_part2
05:07
017 Attaching the Token with an Interceptor_part1
04:24
017 Attaching the Token with an Interceptor_part2
04:24
018 Adding Logout
03:19
019 Adding Auto-Login
09:55
020 Adding Auto-Logout
07:39
021 Adding an Auth Guard
10:56
022 Wrap Up
01:55
37 – Dynamic Components [Angular 16]
0/10
Download Resource Files
001 Module Introduction
01:09
002 Adding an Alert Modal Component
07:33
003 Understanding the Different Approaches
02:28
004 Using ngIf
03:05
005 Preparing Programmatic Creation
08:27
006 Creating a Component Programmatically
04:46
008 Understanding entryComponents
05:06
009 Data Binding & Event Binding
05:05
010 Wrap Up
01:25
38 – Angular Modules & Optimizing Angular Apps [Angular 16]
0/20
Download Resource Files
001 Module Introduction
00:41
002 What are Modules
02:26
003 Analyzing the AppModule
06:24
004 Getting Started with Feature Modules_part1
04:30
004 Getting Started with Feature Modules_part2
04:29
005 Splitting Modules Correctly
04:09
006 Adding Routes to Feature Modules
04:35
007 Component Declarations
01:58
008 The ShoppingList Feature Module
04:27
009 Understanding Shared Modules
08:10
010 Understanding the Core Module
05:48
011 Adding an Auth Feature Module
04:22
012 Understanding Lazy Loading
02:52
013 Implementing Lazy Loading_part1
06:10
013 Implementing Lazy Loading_part2
06:10
014 More Lazy Loading
03:02
015 Preloading Lazy-Loaded Code
03:39
016 Modules & Services
05:46
017 Loading Services Differently
08:24
39 – Standalone Components
0/12
Download Resource Files
001 Module Introduction
01:27
002 Starting Setup & Why We Want Standalone Components
04:48
003 Building a First Standalone Component_part1
04:54
003 Building a First Standalone Component_part2
04:54
005 Standalone Directives & Connecting Building Blocks
02:19
006 Migrating Another Component
01:49
007 A Standalone Root Component
04:20
008 Services & Standalone Components
03:59
009 Routing with Standalone Components
06:36
010 Lazy Loading
08:04
011 Summary
01:56
40 – Angular Signals
0/10
Download Resource Files
001 Module Introduction
01:08
002 Signals What & Why
05:40
003 Creating a New Signal
03:23
004 Updating a Signal Value
02:34
005 Reading & Outputting a Signal Value
02:11
006 Signal Updating set(), update() & mutate()
06:12
007 Important Signals are NOT Finished Yet!
01:02
009 Computed Values & Effects
03:48
010 Module Summary
00:55
41 – Bonus Using NgRx For State Management
0/25
Download Resource Files
001 Module Introduction
00:57
002 What Is NgRx
02:09
003 Understanding NgRx & Its Building Blocks
03:58
004 Project Setup & Installing NgRx
05:12
005 Adding a First Reducer & Store Setup
08:35
006 An Alternative Way Of Creating Reducers
04:19
007 Reading Data From The Store_part1
04:48
007 Reading Data From The Store_part2
04:48
008 Introducing Actions & State Changing Reducers
07:49
009 Dispatching Actions
03:41
010 Attaching Data To Actions
04:20
011 Handling Actions Without createReducer
06:01
012 An Alternative Way Of Defining Actions_part1
05:01
012 An Alternative Way Of Defining Actions_part2
05:01
013 Time To Practice A Second Action
05:28
014 Exploring Selectors
08:17
015 Introducing Effects
02:39
016 Installing the Effects Package
02:03
017 Defining a First Effect
08:40
018 The Old @Effect Decorator & Registering Effects
03:43
019 Using Store Data In Effects
03:24
020 Adding a Second Effect_part1
04:59
020 Adding a Second Effect_part2
04:59
021 Summary
03:02
42 – Angular Animations
0/13
Download Resource Files
002 Introduction
01:03
003 Setting up the Starting Project
00:52
004 Animations Triggers and State_part1
03:36
004 Animations Triggers and State_part2
03:36
005 Switching between States
02:04
006 Transitions
01:54
007 Advanced Transitions
05:22
008 Transition Phases
03:57
009 The void State
06:11
010 Using Keyframes for Animations
05:32
011 Grouping Transitions
02:11
012 Using Animation Callbacks
02:38
43 – Adding Offline Capabilities with Service Workers
0/9
Download Resource Files
001 Module Introduction
02:09
002 Adding Service Workers_part1
03:10
002 Adding Service Workers_part2
03:10
002 Adding Service Workers_part3
03:10
002 Adding Service Workers_part4
03:10
003 Caching Assets for Offline Use
05:28
004 Caching Dynamic Assets & URLs_part1
03:31
004 Caching Dynamic Assets & URLs_part2
03:31
44 – A Basic Introduction to Unit Testing in Angular Apps
0/11
Download Resource Files
002 Introduction
01:18
003 Why Unit Tests
02:12
004 Analyzing the Testing Setup (as created by the CLI)
08:01
005 Running Tests (with the CLI)
01:59
006 Adding a Component and some fitting Tests
06:14
007 Testing Dependencies Components and Services_part1
03:27
007 Testing Dependencies Components and Services_part2
03:27
008 Simulating Async Tasks
09:41
009 Using fakeAsync and tick
02:14
010 Isolated vs Non-Isolated Tests
06:10
45 – Angular as a Platform & Closer Look at the CLI
0/16
Download Resource Files
001 Module Introduction
01:44
002 A Closer Look at ng new
05:18
003 IDE & Project Setup
02:31
004 Understanding the Config Files
09:01
005 Important CLI Commands
05:25
006 The angular.json File – A Closer Look
11:18
007 Angular Schematics – An Introduction
01:41
008 The ng add Command
04:31
009 Using Custom ng generate Schematics
03:05
010 Smooth Updating of Projects with ng update
02:14
011 Simplified Deployment with ng deploy
05:46
012 Understanding Differential Loading
05:10
013 Managing Multiple Projects in One Folder
04:35
014 Angular Libraries – An Introduction
02:51
015 Wrap Up
01:27
46 – Bonus TypeScript Introduction (for Angular 2 Usage)
0/14
Download Resource Files
001 Module Introduction
01:15
002 What & Why
06:32
003 Installing & Using TypeScript
06:22
004 Base Types & Primitives
03:55
005 Array & Object Types
05:33
006 Type Inference
02:47
007 Working with Union Types
02:48
008 Assigning Type Aliases
02:42
009 Diving into Functions & Function Types
05:12
010 Understanding Generics
07:20
011 Classes & TypeScript
07:58
012 Working with Interfaces
05:36
013 Configuring the TypeScript Compiler
02:29
Angular – The Complete Guide (2024 Edition)
About Lesson

Please follow the instructions at the following link to add subtitles 

[ Các bạn làm theo chỉ dẫn ở link sau để thêm phụ đề cho bài giảng]

https://freestudy247.com/set-up-subtitle-for-video/

Join the conversation
Previous
Next

Please contact me via telegram

DMCA.com Protection Status