Angular - The Complete Guide (2023 Edition)
Responsible | Nguyễn Trung Dũng |
---|---|
Last Update | 05/29/2023 |
Completion Time | 1 day 13 hours 23 minutes |
Members | 2 |
-
01 Getting Started
-
001 Course Introduction
-
002 What is Angular
-
003 Join our Online
-
004 Angular vs Angular 2 vs Latest Angular Version
-
005 CLI Deep Dive _ Troubleshooting
-
006 Project Setup and First App
-
007 Editing the First App
-
008 The Course Structure
-
009 How to get the Most out of the Course
-
010 What is TypeScript
-
011 Optional TypeScript Quick Introduction
-
012 A Basic Project Setup using Bootstrap for Styling
-
013 About the Course Code Code Snapshots
-
-
02 The Basics
-
001 Module Introduction
-
002 How an Angular App gets Loaded and Started
-
003 Components are Important!
-
004 Creating a New Component
-
005 Understanding the Role of AppModule and Component Declaration.mp4
-
006 Using Custom Components
-
007 Creating Components with the CLI _ Nesting Components
-
008 Working with Component Templates
-
009 Working with Component Styles
-
010 Fully Understanding the Component Selector
-
011 [OPTIONAL] Assignment Solution
-
012 What is Databinding
-
013 String Interpolation
-
014 Property Binding
-
015 Property Binding vs String Interpolation
-
016 Event Binding
-
017 Bindable Properties and Events
-
018 Passing and Using Data with Event Binding
-
019 Important FormsModule is Required for Two-Way-Binding!
-
024 Using ngIf to Output Data Conditionally
-
026 Styling Elements Dynamically with ngStyle
-
027 Applying CSS Classes Dynamically with ngClass
-
028 Outputting Lists with ngFor
-
029 [OPTIONAL] Assignment Solution
-
030 Getting the Index when using ngFor
-
020 Two-Way-Databinding
-
021 Combining all Forms of Databinding
-
022 [OPTIONAL] Assignment Solution
-
023 Understanding Directives
-
025 Enhancing ngIf with an Else Condition
-
-
03 Course Project - The Basics
-
001 Project Introduction
-
002 Planning the App
-
003 Creating a New App Correctly
-
004 Setting up the Application
-
005 Creating the Components
-
006 Using the Components
-
007 Adding a Navigation Bar
-
008 Alternative Non-Collapsable Navigation Bar (1)
-
009 Creating a Recipe Model
-
010 Adding Content to the Recipes Components
-
011 Outputting a List of Recipes with ngFor
-
012 Displaying Recipe Details
-
013 Working on the ShoppingListComponent
-
014 Creating an Ingredient Model
-
015 Creating and Outputting the Shopping List
-
016 Adding a Shopping List Edit Section
-
017 Wrap Up _ Next Steps (1)
-
-
04 Debugging
-
001 Understanding Angular Error Messages
-
002 Debugging Code in the Browser Using Sourcemaps
-
-
05 Components _ Databinding Deep Dive
-
001 Module Introduction
-
002 Splitting Apps into Components
-
003 Property _ Event Binding Overview
-
004 Binding to Custom Properties
-
005 Assigning an Alias to Custom Properties
-
006 Binding to Custom Events
-
007 Assigning an Alias to Custom Events
-
008 Custom Property and Event Binding Summary
-
009 Understanding View Encapsulation
-
010 More on View Encapsulation
-
011 Using Local References in Templates
-
012 @ViewChild() in Angular 8+
-
013 Getting Access to the Template _ DOM with @ViewChild
-
014 Projecting Content into Components with ng-content
-
015 Understanding the Component Lifecycle
-
016 Seeing Lifecycle Hooks in Action
-
017 Lifecycle Hooks and Template Access
-
018 @ContentChild() in Angular 8+
-
019 Getting Access to ng-content with @ContentChild
-
020 Wrap Up
-
021 [OPTIONAL] Assignment Solution
-
-
06 Course Project - Components _ Databinding
-
001 Introduction
-
002 Adding Navigation with Event Binding and ngIf
-
003 Passing Recipe Data with Property Binding
-
004 Passing Data with Event and Property Binding (Combined)
-
005 Make sure you have FormsModule added!
-
006 Allowing the User to Add Ingredients to the Shopping List
-
-
07 Directives Deep Dive
-
001 Module Introduction
-
002 ngFor and ngIf Recap
-
003 ngClass and ngStyle Recap
-
004 Creating a Basic Attribute Directive
-
005 Using the Renderer to build a Better Attribute Directive
-
006 More about the Renderer
-
007 Using HostListener to Listen to Host Events
-
008 Using HostBinding to Bind to Host Properties
-
009 Binding to Directive Properties
-
010 What Happens behind the Scenes on Structural Directives
-
011 Building a Structural Directive
-
012 Understanding ngSwitch
-
-
08 Course Project - Directives
-
001 Building and Using a Dropdown Directive
-
002 Closing the Dropdown From Anywhere
-
-
09 Using Services _ Dependency Injection
-
001 Module Introduction
-
002 Why would you Need Services
-
003 Creating a Logging Service
-
004 Injecting the Logging Service into Components
-
005 Creating a Data Service
-
006 Understanding the Hierarchical Injector
-
007 How many Instances of Service Should It Be
-
008 Injecting Services into Services
-
009 Using Services for Cross-Component Communication
-
010 A Different Way Of Injecting Services
-
011 [OPTIONAL] Assignment Solution
-
-
10 Course Project - Services _ Dependency Injection
-
001 Introduction
-
002 Setting up the Services
-
003 Managing Recipes in a Recipe Service
-
004 Using a Service for Cross-Component Communication
-
005 Adding the Shopping List Service
-
006 Using Services for Pushing Data from A to B
-
007 Adding Ingredients to Recipes
-
008 Passing Ingredients from Recipes to the Shopping List (via a Service)
-
-
11 Changing Pages with Routing
-
001 Module Introduction
-
002 Why do we need a Router
-
003 Understanding the Example Project
-
004 Setting up and Loading Routes
-
005 Navigating with Router Links
-
006 Understanding Navigation Paths
-
007 Styling Active Router Links
-
008 Navigating Programmatically
-
009 Using Relative Paths in Programmatic Navigation
-
010 Passing Parameters to Routes
-
011 Fetching Route Parameters
-
012 Fetching Route Parameters Reactively
-
013 An Important Note about Route Observables
-
014 Passing Query Parameters and Fragments
-
015 Retrieving Query Parameters and Fragments
-
016 Practicing and some Common Gotchas
-
017 Setting up Child (Nested) Routes
-
018 Using Query Parameters - Practice
-
019 Configuring the Handling of Query Parameters
-
020 Redirecting and Wildcard Routes
-
021 Important Redirection Path Matching, thiếu video bổ sung sau
-
022 Outsourcing the Route Configuration
-
023 An Introduction to Guards
-
024 Protecting Routes with canActivate
-
025 Protecting Child (Nested) Routes with canActivateChild
-
026 Using a Fake Auth Service
-
027 Controlling Navigation with canDeactivate
-
028 Passing Static Data to a Route
-
029 Resolving Dynamic Data with the resolve Guard
-
030 Understanding Location Strategies
-
031 Wrap Up
-
-
12 Course Project - Routing
-
001 Planning the General Structure
-
002 Setting Up Routes
-
003 Adding Navigation to the App
-
004 Marking Active Routes
-
005 Fixing Page Reload Issues
-
006 Child Routes Challenge
-
007 Adding Child Routing Together
-
008 Configuring Route Parameters
-
009 Passing Dynamic Parameters to Links
-
010 Styling Active Recipe Items
-
011 Adding Editing Routes
-
012 Retrieving Route Parameters
-
013 Programmatic Navigation to the Edit Page
-
014 One Note about Route Observables
-
015 Project CleanupNew
-
-
13 Understanding Observables
-
001 Module Introduction
-
002 Install RxJS
-
003 Analyzing Angular Observables
-
004 Getting Closer to the Core of Observables
-
005 Building a Custom Observable
-
006 Errors _ Completion
-
007 Observables _ You!
-
008 Understanding Operators
-
009 Subjects
-
010 Wrap Up
-
011 Useful Resources _ Links
-
-
14 Course Project - Observables
-
001 Improving the Reactive Service with Observables (Subjects)
-
002 Changed the Subscription Name
-
-
15 Handling Forms in Angular Apps
-
001 Module Introduction
-
002 Why do we Need Angular_s Help
-
003 Template-Driven (TD) vs Reactive Approach
-
004 An Example Form
-
005 TD Creating the Form and Registering the Controls
-
006 TD Submitting and Using the Form
-
007 TD Understanding Form State
-
008 TD Accessing the Form with @ViewChild
-
009 TD Adding Validation to check User Input
-
010 Built-in Validators _ Using HTML5 Validation, thiếu video và phiên âm bổ sung sau
-
011 TD Using the Form State
-
012 TD Outputting Validation Error Messages
-
013 TD Set Default Values with ngModel Property Binding
-
014 TD Using ngModel with Two-Way-Binding
-
015 TD Grouping Form Controls
-
016 TD Handling Radio Buttons
-
017 TD Setting and Patching Form Values
-
018 TD Using Form Data
-
019 TD Resetting Forms
-
020 Introduction to the Reactive Approach
-
021 Reactive Setup
-
022 Reactive Creating a Form in Code
-
023 Reactive Syncing HTML and Form
-
024 Reactive Submitting the Form
-
025 Reactive Adding Validation
-
026 Reactive Getting Access to Controls
-
027 Reactive Grouping Controls
-
028 Fixing a Bug
-
029 Reactive Arrays of Form Controls (FormArray)
-
030 Reactive Creating Custom Validators
-
031 Reactive Using Error Codes
-
032 Reactive Creating a Custom Async Validator
-
033 Reactive Reacting to Status or Value Changes
-
034 Reactive Setting and Patching Values
-
035 [OPTIONAL] Assignment Solution
-
-
16 Course Project - Forms
-
001 Introduction
-
002 TD Adding the Shopping List Form
-
003 Adding Validation to the Form
-
004 Allowing the Selection of Items in the List
-
005 Loading the Shopping List Items into the Form
-
006 Updating existing Items
-
007 Resetting the Form
-
008 Allowing the the User to Clear (Cancel) the Form
-
009 Allowing the Deletion of Shopping List Items
-
010 Creating the Template for the (Reactive) Recipe Edit Form
-
011 Creating the Form For Editing Recipes
-
012 Syncing HTML with the Form
-
013 Fixing a Bug
-
014 Adding Ingredient Controls to a Form Array
-
015 Adding new Ingredient Controls
-
016 Validating User Input
-
017 Submitting the Recipe Edit Form
-
018 Adding a Delete and Clear (Cancel) Functionality
-
019 Redirecting the User (after Deleting a Recipe)
-
020 Adding an Image Preview
-
021 Providing the Recipe Service Correctly
-
022 Deleting Ingredients and Some Finishing Touches
-
023 Deleting all Items in a FormArray, thiếu video & phiên âm bổ sung sau
-
-
17 Using Pipes to Transform Output
-
001 Part 1 - Implement Page object file for Product Catalogue page with actions
-
002 Using Pipes
-
003 Parametrizing Pipes
-
004 Where to learn more about Pipes
-
005 Chaining Multiple Pipes
-
006 Creating a Custom Pipe
-
007 Parametrizing a Custom Pipe
-
008 Example Creating a Filter Pipe
-
009 Pure and Impure Pipes (or How to fix the Filter Pipe)
-
010 Understanding the async Pipe
-
-
18 Making Http Requests
-
001 A New IDE
-
002 Module Introduction
-
003 How Does Angular Interact With Backends
-
004 The Anatomy of a Http Request
-
005 Backend (Firebase) Setup
-
006 Sending a POST Request
-
007 GETting Data
-
008 Using RxJS Operators to Transform Response Data
-
009 Using Types with the HttpClient
-
010 Outputting Posts
-
011 Showing a Loading Indicator
-
012 Using a Service for Http Requests
-
013 Services _ Components Working Together
-
014 Sending a DELETE Request
-
015 Handling Errors
-
016 Using Subjects for Error Handling
-
017 Using the catchError Operator
-
018 Error Handling _ UX
-
019 Setting Headers
-
020 Adding Query Params
-
021 Observing Different Types of Responses
-
022 Changing the Response Body Type
-
023 Introducing Interceptors
-
024 Manipulating Request Objects.mp4
-
025 Response Interceptors
-
026 Multiple Interceptors.mp4
-
027 Wrap Up
-
-
19 Course Project - Http
-
001 Module Introduction
-
002 Backend (Firebase) Setup
-
003 Setting Up the DataStorage Service
-
004 Storing Recipes
-
005 Fetching Recipes
-
006 Transforming Response Data
-
007 Resolving Data Before Loading
-
008 Fixing a Bug with the Resolver
-
-
20 Authentiaction & Route Protection in Angular
-
001 Module Introduction
-
002 How Authentication Works
-
003 Adding the Auth Page
-
004 Switching Between Auth Modes
-
005 Handling Form Input
-
006 Preparing the Backend
-
Preview
-
008 Preparing the Signup Request
-
009 Sending the Signup Request
-
010 Adding a Loading Spinner _ Error Handling Logic
-
011 Improving Error Handling
-
012 Sending Login Requests
-
013 Login Error Handling
-
014 Creating _ Storing the User Data
-
015 Reflecting the Auth State in the UI
-
016 Adding the Token to Outgoing Requests
-
017 Attaching the Token with an Interceptor
-
018 Adding Logout
-
019 Adding Auto-Login
-
020 Adding Auto-Logout
-
021 Adding an Auth Guard
-
022 Wrap Up
-
023 Useful Resources _ Links, thiếu video và phiên âm bổ sung sau
-
-
21 Dynamic Components
-
001 Module Introduction
-
002 Adding an Alert Modal Component
-
003 Understanding the Different Approaches
-
004 Using ngIf
-
005 Preparing Programmatic Creation
-
006 Creating a Component Programmatically
-
007 Understanding entryComponents
-
008 Data Binding _ Event Binding
-
009 Wrap Up
-
010, thiếu video và phiên âm bổ sung sau
-
-
22 Angular Modules _ Optimizing Angular Apps
-
001 Module Introduction
-
002 What are Modules
-
003 Analyzing the AppModule
-
004 Getting Started with Feature Modules
-
005 Splitting Modules Correctly
-
006 Adding Routes to Feature Modules
-
007 Component Declarations
-
008 The ShoppingList Feature Module
-
009 Understanding Shared Modules
-
010 Understanding the Core Module
-
011 Adding an Auth Feature Module
-
012 Understanding Lazy Loading
-
013 Implementing Lazy Loading
-
014 More Lazy Loading
-
015 Preloading Lazy-Loaded Code
-
016 Modules _ Services
-
017 Loading Services Differently
-
018 Useful Resources _ Links
-
-
23 Deploying an Angular App
-
001 Module Introduction
-
002 Deployment Preparation _ Steps
-
003 Using Environment Variables
-
004 Deploying Angular Applications
-
005 Deployment Example Firebase Hosting
-
-
24 Preview Standalone Components
-
001 Module Introduction
-
002 Starting Setup _ Why We Want Standalone Components
-
003 Building a First Standalone Component
-
004 Standalone Directives _ Connecting Building Blocks
-
005 Migrating Another Component
-
006 A Standalone Root Component
-
007 Services _ Standalone Components
-
008 Routing with Standalone Components
-
009 Lazy Loading
-
010 Summary
-
-
25 Bonus Working with NgRx in our Project
-
001 Module Introduction
-
002 What is Application State
-
003 What is NgRx
-
004 Getting Started with Reducers
-
005 Adding Logic to the Reducer
-
006 Understanding _ Adding Actions
-
007 Setting Up the NgRx Store
-
008 Selecting State
-
009 Dispatching Actions
-
010 Multiple Actions
-
011 Preparing Update _ Delete Actions
-
012 Updating & Deleting Ingredients
-
013 Expanding the State
-
014 Managing More State via NgRx
-
015 Removing Redundant Component State Management
-
016 First Summary _ Clean Up
-
017 One Root State
-
018 Setting Up Auth Reducer _ Actions
-
019 Dispatching Auth Actions
-
020 Auth Finished (For Now...).mp4
-
021 And Important Note on Actions
-
022 Exploring NgRx Effects
-
023 Defining the First Effect
-
024 Effects _ Error Handling
-
025 Login via NgRx Effects
-
026 Managing UI State in NgRx
-
027 Finishing the Login Effect
-
028 Preparing Other Auth Actions
-
029 Adding Signup
-
030 Further Auth Effects
-
031 Adding Auto-Login with NgRx
-
032 Adding Auto-Logout
-
033 Finishing the Auth Effects
-
034 Using the Store Devtools
-
035 The Router Store
-
036 Getting Started with NgRx for Recipes
-
037 Fetching Recipe Detail Data
-
038 Fetching Recipes _ Using the Resolver
-
039 Fixing the Auth Redirect
-
040 Update, Delete and Add Recipes
-
041 Storing Recipes via Effects
-
042 Cleanup Work
-
043 Wrap Up
-
044 Alternative NgRx Syntax
-
045 Useful Resources _ Links
-
-
26 Bonus Angular Universal
-
001 Module Introduction
-
002 Angular Universal _ ModuleMapLoader
-
003 Adding Angular Universal
-
004 Adding Angular Universal with NestJS
-
005 Deploying Universal Apps
-
006 Important Remaining Lectures
-
007 Module Introduction
-
008 Getting Started with Angular Universal
-
009 Working on the App Module
-
010 Adding a Server-Side Build Workflow
-
011 Adding a NodeJS Server
-
012 Pre-Rendering the App on the Server
-
013 Next Steps
-
014 Angular Universal Gotchas
-
-
27 Angular Animations
-
001 Making Animations Work with Angular 4+
-
002 Introduction
-
003 Setting up the Starting Project
-
004 Animations Triggers and State
-
005 Switching between States
-
006 Transitions
-
007 Advanced Transitions
-
008 Transition Phases
-
009 The void State
-
010 Using Keyframes for Animations
-
011 Grouping Transitions
-
012 Using Animation Callbacks
-
-
28 Adding Offline Capabilities with Service Workers
-
001 Module Introduction
-
002 Adding Service Workers
-
003 Caching Assets for Offline Use
-
004 Caching Dynamic Assets _ URLs
-
005 Further Links _ Resources
-
-
29 A Basic Introduction to Unit Testing in Angular Apps
-
002 Introduction
-
003 Why Unit Tests
-
004 Analyzing the Testing Setup (as created by the CLI)
-
005 Running Tests (with the CLI)
-
006 Adding a Component and some fitting Tests
-
007 Testing Dependencies Components and Services
-
008 Simulating Async Tasks
-
009 Using fakeAsync and tick
-
010 Isolated vs Non-Isolated Tests
-
011 Further Resources _ Where to Go Next
-
-
30 Angular as a Platform _ Closer Look at the CLI
-
001 Module Introduction
-
002 A Closer Look at ng new
-
003 IDE _ Project Setup
-
004 Understanding the Config Files
-
005 Important CLI Commands
-
006 The angular.json File - A Closer Look
-
007 Angular Schematics - An Introduction
-
008 The ng add Command
-
009 Using Custom ng generate Schematics
-
010 Smooth Updating of Projects with ng update.mp4
-
011 Simplified Deployment with ng deploy
-
012 Understanding Differential Loading
-
013 Managing Multiple Projects in One Folder
-
014 Angular Libraries - An Introduction
-
015 Wrap Up
-
-
31 Angular Changes _ New Features
-
001 A First Look At Angular Elements
-
-
32 Course Roundup
-
001 Thanks for being part of the course!
-
002 Bonus More Content!
-
-
33 Bonus TypeScript Introduction (for Angular 2 Usage)
-
001 Module Introduction
-
002 What _ Why.mp4
-
003 Installing _ Using TypeScript
-
004 Base Types _ Primitives
-
005 Array _ Object Types
-
006 Type Inference
-
007 Working with Union Types
-
008 Assigning Type Aliases
-
009 Diving into Functions _ Function Types
-
010 Understanding Generics
-
011 Classes _ TypeScript
-
012 Working with Interfaces
-
013 Configuring the TypeScript Compiler
-
014 Module Resources
-