Skip to navigation
Skip to navigation
Skip to search form
Skip to login form
Skip to footer
Skip to main content
Accessibility options
Accessibility profiles
Visual impairment
Seizure and epileptic
Color vision deficiency
ADHD
Learning
Content adjustments
Readable font
Highlight titles
Highlight links
Stop animations
Text size
+
+ +
+ + +
Line height
+
+ +
+ + +
Text spacing
+
+ +
+ + +
Color adjustments
Dark contrast
Light contrast
High contrast
High saturation
Low saturation
Monochrome
Orientation adjustments
Reading guide
Reading Mask
Big black cursor
Big white cursor
Email: it@huph.edu.vn
Email: it@huph.edu.vn
Các khóa học
Đổi giao diện
Giao diện cũ
Giao diện mới
en
English
Công nghệ
Programing Language
Angular - The Complete Guide (2023 Edition)
0 students
Last updated
Mar 2024
Enrol now
Overview
Course content
Instructors
About the course
Show more...
Course content
Sections:
34
•
Activities:
0
•
Resources:
452
Expand all
Section 1
Getting Started
001-Course Introduction
002-What is Angular
004-Angular vs Angular 2 vs Latest Angular Version
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
012-A Basic Project Setup using Bootstrap for Styling
Section 2
The Basics
014-Module Introduction
015-How an Angular App gets Loaded and Started
016-Components are Important
017-Creating a New Component
018-Understanding the Role of AppModule and Component Declaration
019-Using Custom Components
020-Creating Components with the CLI Nesting Components
021-Working with Component Templates
022-Working with Component Styles
023-Fully Understanding the Component Selector
025-OPTIONAL Assignment Solution
026-What is Databinding
027-String Interpolation
028-Property Binding
029-Property Binding vs String Interpolation
030-Event Binding
032-Passing and Using Data with Event Binding
034-Two Way Databinding
035-Combining all Forms of Databinding
037-OPTIONAL Assignment Solution
038-Understanding Directives
039-Using ngIf to Output Data Conditionally
040-Enhancing ngIf with an Else Condition
041-Styling Elements Dynamically with ngStyle
042-Applying CSS Classes Dynamically with ngClass
043-Outputting Lists with ngFor
045-OPTIONAL Assignment Solution
046-Getting the Index when using ngFor
Section 3
Course Project - The Basics
047-Project Introduction
048-Planning the App
050-Setting up the Application
051-Creating the Components
052-Using the Components
053-Adding a Navigation Bar
055-Creating a Recipe Model-
056-Adding Content to the Recipes Components
057-Outputting a List of Recipes with ngFor
058-Displaying Recipe Details
059-Working on the ShoppingListComponent
060-Creating an Ingredient Model
061-Creating and Outputting the Shopping List
062-Adding a Shopping List Edit Section
063-Wrap Up Next Steps
Section 4
Debugging
065-Debugging Code in the Browser Using Sourcemaps
066-Module Introduction
Section 5
Components & Databinding Deep Dive
067-Splitting Apps into Components
068-Property Event Binding Overview
069-Binding to Custom Properties
070-Assigning an Alias to Custom Properties
071-Binding to Custom Events
072-Assigning an Alias to Custom Events
073-Custom Property and Event Binding Summary
074-Understanding View Encapsulation
075-More on View Encapsulation
076-Using Local References in Templates
078-Getting Access to the Template DOM with ViewChild
079-Projecting Content into Components with ng content
080-Understanding the Component Lifecycle
081-Seeing Lifecycle Hooks in Action
082-Lifecycle Hooks and Template Access-
084-Getting Access to ng content with ContentChild
085-Wrap Up
087-OPTIONAL Assignment Solution
Section 6
Course Project - Components & Databinding
088-Introduction-
089-Adding Navigation with Event Binding and ngIf
090-Passing Recipe Data with Property Binding
091-Passing Data with Event and Property Binding Combined
093-Allowing the User to Add Ingredients to the Shopping List-
Section 7
Directives Deep Dive
094-Module Introduction
095-ngFor and ngIf Recap
096-ngClass and ngStyle Recap
097-Creating a Basic Attribute Directive
098-Using the Renderer to build a Better Attribute Directive
100-Using HostListener to Listen to Host Events
101-Using HostBinding to Bind to Host Properties
102-Binding to Directive Properties
103-What Happens behind the Scenes on Structural Directives
104-Building a Structural Directive-
105-Understanding ngSwitch-
Section 8
Course Project - Directives
106-Building and Using a Dropdown Directive
Section 9
Using Services & Dependency Injection
108-Module Introduction
109-Why would you Need Services
110-Creating a Logging Service
111-Injecting the Logging Service into Components
113-Creating a Data Service
114-Understanding the Hierarchical Injector
115-How many Instances of Service Should It Be
116-Injecting Services into Services
117-Using Services for Cross Component Communication
120-OPTIONAL Assignment Solution
Section 10
Course Project - Services & Dependency Injection
121-Introduction
122-Setting up the Services
123-Managing Recipes in a Recipe Service
121-Introduction (copy) (copy) (copy)
124-Using a Service for Cross Component Communication
125-Adding the Shopping List Service
126-Using Services for Pushing Data from A to B
127-Adding Ingredients to Recipes
128-Passing Ingredients from Recipes to the Shopping List via a Service
Section 11
Changing Pages with Routing
129-Module Introduction
130-Why do we need a Router
132-Setting up and Loading Routes
133-Navigating with Router Links
134-Understanding Navigation Paths
135-Styling Active Router Links
136-Navigating Programmatically
137-Using Relative Paths in Programmatic Navigation
138-Passing Parameters to Routes
139-Fetching Route Parameters
140-Fetching Route Parameters Reactively
141-An Important Note about Route Observables
142-Passing Query Parameters and Fragments
143-Retrieving Query Parameters and Fragments
144-Practicing and some Common Gotchas
145-Setting up Child Nested Routes
146-Using Query Parameters Practice
147-Configuring the Handling of Query Parameters
148-Redirecting and Wildcard Routes
150-Outsourcing the Route Configuration
151-An Introduction to Guards
152-Protecting Routes with canActivate
153-Protecting Child Nested Routes with canActivateChild
154-Using a Fake Auth Service
155-Controlling Navigation with canDeactivate
156-Passing Static Data to a Route
157-Resolving Dynamic Data with the resolve Guard
158-Understanding Location Strategies
159-Wrap Up
Section 12
Course Project - Routing
160-Planning the General Structure
161-Setting Up Routes
162-Adding Navigation to the App-
163-Marking Active Routes
164-Fixing Page Reload Issues
165-Child Routes Challenge
166-Adding Child Routing Together
167-Configuring Route Parameters
168-Passing Dynamic Parameters to Links
169-Styling Active Recipe Items
170-Adding Editing Routes
171-Retrieving Route Parameters
172-Programmatic Navigation to the Edit Page
173-One Note about Route Observables
Section 13
Understanding Observables
175-Module Introduction
177-Analyzing Angular Observables
178-Getting Closer to the Core of Observables
179-Building a Custom Observable
180-Errors Completion
181-Observables You
182-Understanding Operators
183-Subjects
184-Wrap Up
Section 14
Course Project - Observables
186-Improving the Reactive Service with Observables Subjects
Section 15
Handling Forms in Angular Apps
188-Module Introduction
189-Why do we Need Angular s Help
191-An Example Form
190-Template Driven TD vs Reactive Approach
192-TD Creating the Form and Registering the Controls
193-TD Submitting and Using the Form
194-TD Understanding Form State
195-TD Accessing the Form with ViewChild
196-TD Adding Validation to check User Input
198-TD Using the Form State
199-TD Outputting Validation Error Messages
200-TD Set Default Values with ngModel Property Binding
201-TD Using ngModel with Two Way Binding
202-TD Grouping Form Controls
203-TD Handling Radio Buttons
204-TD Setting and Patching Form Values
205-TD Using Form Data
206-TD Resetting Forms
208-Introduction to the Reactive Approach
209-Reactive Setup
210-Reactive Creating a Form in Code
211-Reactive Syncing HTML and Form
212-Reactive Submitting the Form-
213-Reactive Adding Validation-
214-Reactive Getting Access to Controls
215-Reactive Grouping Controls-
217-Reactive Arrays of Form Controls FormArray
218-Reactive Creating Custom Validators
219-Reactive Using Error Codes-
220-Reactive Creating a Custom Async Validator
221-Reactive Reacting to Status or Value Changes
222-Reactive Setting and Patching Values
224-OPTIONAL Assignment Solution
Section 16
Course Project - Forms
225-Introduction-
226-TD Adding the Shopping List Form
227-Adding Validation to the Form-
228-Allowing the Selection of Items in the List
229-Loading the Shopping List Items into the Form
230-Updating existing Items
231-Resetting the Form
232-Allowing the the User to Clear Cancel the Form
233-Allowing the Deletion of Shopping List Items
234-Creating the Template for the Reactive Recipe Edit Form
235-Creating the Form For Editing Recipes
236-Syncing HTML with the Form
238-Adding Ingredient Controls to a Form Array
239-Adding new Ingredient Controls
240-Validating User Input
241-Submitting the Recipe Edit Form
242-Adding a Delete and Clear Cancel Functionality
243-Redirecting the User after Deleting a Recipe
244-Adding an Image Preview
245-Providing the Recipe Service Correctly
246-Deleting Ingredients and Some Finishing Touches
Section 17
Using Pipes to Transform Output
248-Introduction Why Pipes are Useful
249-Using Pipes
250-Parametrizing Pipes
251-Where to learn more about Pipes
252-Chaining Multiple Pipes
253-Creating a Custom Pipe
254-Parametrizing a Custom Pipe
255-Example Creating a Filter Pipe
256-Pure and Impure Pipes or How to fix the Filter Pipe
257-Understanding the async Pipe
Section 18
Making Http Requests
259-A New IDE
260-Module Introduction
261-How Does Angular Interact With Backends
262-The Anatomy of a Http Request
263-Backend Firebase Setup
264-Sending a POST Request-
265-GETting Data-VNxK
266-Using RxJS Operators to Transform Response Data
267-Using Types with the HttpClient
268-Outputting Posts
269-Showing a Loading Indicator
270-Using a Service for Http Requests
271-Services Components Working Together
272-Sending a DELETE Request
273-Handling Errors
274-Using Subjects for Error Handling
275-Using the catchError Operator-
276-Error Handling UX
277-Setting Headers-
278-Adding Query Params
279-Observing Different Types of Responses
280-Changing the Response Body Type-
281-Introducing Interceptors
282-Manipulating Request Objects
283-Response Interceptors
284-Multiple Interceptors
285-Wrap Up
Section 19
Course Project - Http
287-Module Introduction
288-Backend Firebase Setup
289-Setting Up the DataStorage Service
290-Storing Recipes
291-Fetching Recipes
292-Transforming Response Data
293-Resolving Data Before Loading-
294-Fixing a Bug with the Resolver
Section 20
Authentication & Route Protection in Angular
295-Module Introduction
296-How Authentication Works
297-Adding the Auth Page
298-Switching Between Auth Modes
299-Handling Form Input
300-Preparing the Backend
302-Preparing the Signup Request
303-Sending the Signup Reques
304-Adding a Loading Spinner Error Handling Logic
305-Improving Error Handling
306-Sending Login Requests
307-Login Error Handling
308-Creating Storing the User Data
309-Reflecting the Auth State in the UI
310-Adding the Token to Outgoing Requests
311-Attaching the Token with an Interceptor
312-Adding Logout
313-Adding Auto Login
314-Adding Auto Logout
315-Adding an Auth Guard
316-Wrap Up
Section 21
Dynamic Components
318-Module Introduction
319-Adding an Alert Modal Component
320-Understanding the Different Approaches
321-Using ngIf
322-Preparing Programmatic Creation
323-Creating a Component Programmatically
325-Understanding entryComponents
326-Data Binding Event Binding
327-Wrap Up
Section 22
Angular Modules & Optimizing Angular Apps
329-Module Introduction
330-What are Modules
331-Analyzing the AppModule
332-Getting Started with Feature Modules
333-Splitting Modules Correctly
334-Adding Routes to Feature Modules
335-Component Declarations
336-The ShoppingList Feature Module
337-Understanding Shared Modules
338-Understanding the Core Module
339-Adding an Auth Feature Module
340-Understanding Lazy Loading
341-Implementing Lazy Loading
342-More Lazy Loading
343-Preloading Lazy Loaded Code
344-Modules Services
345-Loading Services Differently
Section 23
Deploying an Angular App
347-Module Introduction
348-Deployment Preparation Steps
349-Using Environment Variables-
351-Deployment Example Firebase Hosting
Section 24
Standalone Components
353-Module Introduction
354-Starting Setup Why We Want Standalone Components
355-Building a First Standalone Component
357-Standalone Directives Connecting Building Blocks
358-Migrating Another Component
359-A Standalone Root Component
360-Services Standalone Components
361-Routing with Standalone Components
362-Lazy Loading
363-Summary
Section 25
Angular Signals
364-Module Introduction
365-Signals What Why
366-Creating a New Signal
367-Updating a Signal Value
368-Reading Outputting a Signal Value
369-Signal Updating set update mutate
370-Important Signals are NOT Finished Yet
372-Computed Values Effects
373-Module Summary
Section 26
Bonus: Using NgRx For State Management
374-Module Introduction
375-What Is NgRx
376-Understanding NgRx Its Building Blocks
377-Project Setup Installing NgRx
378-Adding a First Reducer Store Setup
379-An Alternative Way Of Creating Reducers
380-Reading Data From The Store
381-Introducing Actions State Changing Reducers
382-Dispatching Actions
383-Attaching Data To Actions
384-Handling Actions Without createReduce
385-An Alternative Way Of Defining Actions
386-Time To Practice A Second Action
387-Exploring Selectors
388-Introducing Effects
389-Installing the Effects Package
390-Defining a First Effect
391-The Old Effect Decorator Registering Effects
392-Using Store Data In Effects
393-Adding a Second Effect
394-Summary
397-Getting Started with Reducers
398-Adding Logic to the Reducer
399-Understanding Adding Actions
400-Setting Up the NgRx Store
401-Selecting State
402-Dispatching Actions
403-Multiple Actions
404-Preparing Update Delete Actions
405-Updating Deleting Ingredients
406-Expanding the State
407-Managing More State via NgRx
408-Removing Redundant Component State Management
409-First Summary Clean Up
410-One Root State
411-Setting Up Auth Reducer Actions
412-Dispatching Auth Actions
413-Auth Finished For Now
414-And Important Note on Actions
415-Exploring NgRx Effect
416-Defining the First Effect
418-Effects Error Handling
419-Login via NgRx Effects
420-Managing UI State in NgRx
421-Finishing the Login Effect
422-Preparing Other Auth Actions
423-Adding Signup
424-Further Auth Effects
425-Adding Auto Login with NgRx
426-Adding Auto Logout
427-Finishing the Auth Effects
428-Using the Store Devtools
429-The Router Store
430-Getting Started with NgRx for Recipes
431-Fetching Recipe Detail Data
432-Fetching Recipes Using the Resolver
433-Fixing the Auth Redirect
434-Update Delete and Add Recipes
435-Storing Recipes via Effects
436-Cleanup Work
437-Wrap Up
Section 27
Bonus: Angular Universal
440-Module Introduction
441-Angular Universal What Why
442-Converting the App to a Universal App
443-Analyzing Running Server side Code
444-A Closer Look At The Server side Code
445-Integrating a REST API
446-Some Notes About Deploying Angular Universal Apps-
Section 28
Angular Animations
449-Introduction
450-Setting up the Starting Project
451-Animations Triggers and State
452-Switching between States
453-Transitions
454-Advanced Transitions
455-Transition Phases
456-The void State
457-Using Keyframes for Animation
458-Grouping Transitions
459-Using Animation Callbacks
Section 29
Adding Offline Capabilities with Service Workers
460-Module Introduction
461-Adding Service Workers
462-Caching Assets for Offline Use
463-Caching Dynamic Assets URLs
Section 30
A Basic Introduction to Unit Testing in Angular Apps
466-Introduction
467-Why Unit Tests
468-Analyzing the Testing Setup as created by the CLI
469-Running Tests with the CLI
470-Adding a Component and some fitting Tests
471-Testing Dependencies Components and Services
472-Simulating Async Tasks
473-Using fakeAsync and tick
474-Isolated vs Non Isolated Tests
Section 31
Angular as a Platform & Closer Look at the CLI
476-Module Introduction
477-A Closer Look at ng new
478-IDE Project Setup
479-Understanding the Config Files
480-Important CLI Commands
481-The angular json File A Closer Look
482-Angular Schematics An Introduction
483-The ng add Command
484-Using Custom ng generate Schematics
485-Smooth Updating of Projects with ng update
486-Simplified Deployment with ng deploy
487-Understanding Differential Loading
488-Managing Multiple Projects in One Folder
489-Angular Libraries An Introduction
490-Wrap Up
Section 32
Angular Changes & New Features
491-A First Look At Angular Elements
Section 33
Course Roundup
492-Thanks for being part of the course
Section 34
Bonus: TypeScript Introduction (for Angular 2 Usage)
494-Module Introduction
495-What Why
496-Installing Using TypeScript
497-Base Types Primitives
498-Array Object Types
499-Type Inference
500-Working with Union Types
501-Assigning Type Aliases
502-Diving into Functions Function Types
503-Understanding Generics
504-Classes TypeScript
505-Working with Interfaces
506-Configuring the TypeScript Compiler
Instructors
Enrolment options
Angular - The Complete Guide (2023 Edition)
Course modified date:
14 Mar 2024
Enrolled students:
There are no students enrolled in this course.
Guests cannot access this course. Please log in.
Continue
Enrol now
This course includes
Resources
Share this course
Scroll to top
×
Close
×
Close