Angular - The Complete Guide

Name: Angular - The Complete Guide
Price: 9 USD
Availability: InStock

26h 25m 26s

English

Paid

June 21, 2024

Angular is one of the most popular web development frameworks you can learn these days - especially in the enterprise landscape.

It offers amazing performance, a versatile syntax & API, a "batteries-included" philosophy where key features like routing are included and an active and helpful community.

And with this course, you'll learn Angular from the ground up and in great detail - all whilst building multiple demo projects. Therefore, concepts are explained & explored not just in theory, but instead by applying your knowledge to real problems!

This is a huge course because it really covers EVERYTHING you need to know and learn to become an Angular developer!

No matter if you know nothing about Angular or if you already got some basic Angular knowledge (not required but also not a problem), you will get tons of useful information and knowledge out of this course!

Because my goal with this course is to ensure that you feel confident working with Angular, so that you can apply for Angular jobs, use it in your own projects or simply enhance your portfolio as a developer - whatever your goal is: This course gets you there!

For this course, no prior Angular knowledge is required - instead, the course starts with a very thorough "Essentials" section that will get you up and running with Angular's core features in just a few hours!

But, of course, this course doesn't stop there!

After finishing the "Essentials" sections, the course offers a vast selection of "Deep Dive" sections that allows you to dive deeper into core and advanced Angular concepts & features. You'll learn all about components, directives, signals, change detection, routing, sending HTTP requests and much, much more!

But Angular has also changed since its original release back in 2016. And this course ensures that you get the most out of it, no matter which Angular version you're using!

Whilst the course does focus on the latest & most modern Angular syntax and teach that as a default, it also covers older Angular features and concepts so that you'll be able to use your knowledge no matter which Angular version you might be using in your upcoming projects.

By the end of this course, you'll therefore be able to use Angular with confidence in your next projects!

What's in this course?

A thorough introduction to Angular (What is it and why would you use it?)
All the core essentials: How Angular works, building components with Angular & building UIs with Angular
Components, inputs, outputs & dynamic data binding (with and without signals)
Working with user events and state to create interactive applications
How to use crucial concepts like services to connect components or outsource data
A (thorough) look behind the scenes to understand how Angular works under the hood
Detailed explanations on how to work with lists and conditional content
How to debug Angular apps
Styling Angular apps with scoped styles
Building and using components, directives, pipes & more
Sending Http requests & handling transitional states + responses
Handling forms and user input (incl. validation)
Routing to create multi-page applications
Deploying Angular
TypeScript Introduction
And so much more - check out the full curriculum on this page!

About the Author: Academind Pro

Academind offers the most comprehensive and up-to-date learning resources on Web Development. From the very basics up to advanced topics and real projects - we got you covered! And we'll give you course completion certificates to prove your progress to others!

Watch Online 323 lessons

0:00

#1: Welcome To The Course!

All Course Lessons (323)

#	Lesson Title	Duration
1	Welcome To The Course! Demo	01:32
2	What Exactly Is Angular?	01:50
3	Why Would You Use Angular?	06:42
4	Angular's Evolution & Stability	04:45
5	Creating A New Angular Project	07:03
6	Setting Up An Angular Development Environment	04:49
7	About This Course	01:46
8	Module Introduction	01:20
9	A New Starting Project & Analyzing The Project Structure	06:28
10	Understanding Components & How Content Ends Up On The Screen	06:19
11	Creating a First Custom Component	05:15
12	Configuring the Custom Component	05:21
13	Using the Custom Component	06:09
14	Styling the Header Component & Adding An Image	06:21
15	Managing & Creating Components with the Angular CLI	04:29
16	Styling & Using Our Next Custom Component	05:09
17	Preparing User Data (To Output Dynamic Content)	02:08
18	Storing Data in a Component Class	03:56
19	Outputting Dynamic Content with String Interpolation	02:31
20	Property Binding & Outputting Computed Values	04:38
21	Using Getters For Computed Values	03:30
22	Listening to Events with Event Binding	04:05
23	Managing State & Changing Data	03:07
24	A Look Behind The Scenes Of Angular's Change Detection Mechanism	02:07
25	Introducing Signals	12:54
26	We Need More Flexible Components!	03:41
27	Defining Component Inputs	08:18
28	Required & Optional Inputs	02:57
29	Using Signal Inputs	14:01
30	We Need Custom Events!	01:48
31	Working with Outputs & Emitting Data	07:00
32	Using the output() Function	06:13
33	Adding Extra Type Information To EventEmitter	01:58
34	Exercise: Create a Configurable Component	08:48
35	TypeScript: Working With Potentially Undefined Values & Union Types	08:07
36	Accepting Objects As Inputs & Adding Appropriate Typings	04:47
37	TypeScript: Type Aliases & Interfaces	03:11
38	Outputting List Content	05:34
39	Outputting Conditional Content	04:27
40	Legacy Angular: Using ngFor & ngIf	05:22
41	Adding More Components to the Demo App	06:15
42	Outputting User-specific Tasks	06:31
43	Outputting Task Data in the Task Component	04:05
44	Storing Data Models in Separate Files	03:45
45	Dynamic CSS Styling with Class Bindings	04:37
46	More Component Communication: Deleting Tasks	05:26
47	Creating & Conditionally Rendering Another Component	05:25
48	Managing The "New Task" Dialog	06:31
49	Using Directives & Two-Way-Binding	10:47
50	Signals & Two-Way-Binding	02:20
51	Handling Form Submission	03:21
52	Using the Submitted Data	07:21
53	Content Projection with ng-content	06:48
54	Transforming Template Data with Pipes	03:17
55	Getting Started with Services	06:16
56	Getting Started with Dependency Injection	08:03
57	More Service Usage & Alternative Dependency Injection Mechanism	05:18
58	Time to Practice: Services	03:17
59	Using localStorage for Data Storage	05:41
60	Module Summary	08:46
61	Module Introduction	02:17
62	A First Introduction To Angular Modules (NgModule)	03:06
63	Creating a First Empty Module	02:57
64	Bootstrapping Apps with Angular Modules	05:22
65	Declaring & Using Components	04:47
66	A First Summary	02:15
67	Migrating All Components To Use Modules	06:51
68	Creating & Using Shared Modules	04:13
69	Creating More Complex Module-based App Structures	07:23
70	Module Introduction & Starting Project	05:20
71	Adding a Header Component With An Image	05:11
72	Adding a User Input Component	06:43
73	Handling Form Submission	02:30
74	Extracting Values with Two-Way-Binding	08:11
75	Calculating the Annual Investment Data	05:06
76	Cross-Component Communication with Outputs	09:26
77	Creating & Using a Data Model	02:59
78	Passing Data from Parent to Child with Inputs	10:10
79	Outputting Data in a Table	04:58
80	Formatting Output with a Pipe	01:40
81	Using Signals & Resetting The Form After Submission	09:56
82	Using a Service for Cross-Component Communication	09:36
83	Using Signals in Services	04:12
84	Migrating to Angular Modules	08:09
85	Module Summary	01:14
86	Module Introduction	01:42
87	Understanding Error Messages & Fixing Errors	03:47
88	Debugging Logical Errors with the Browser DevTools & Breakpoints	06:20
89	Exploring the Angular DevTools	03:51
90	Module Introduction	02:01
91	Starting Project & An Opportunity For Smaller Components?	02:35
92	When & How To Split Up Components	04:26
93	Splitting A Component Into Multiple Components	08:46
94	Creating Reusable Components	03:59
95	Component Inputs: Repetition	05:23
96	Property Binding: Repetition	08:32
97	Using Content Projection & ng-content	02:59
98	Adding Forms to Components	06:02
99	A Possible, But Not Ideal Way Of Extending Built-in Elements	04:28
100	Extending Built-in Elements with Custom Components via Attribute Selectors	05:09
101	Supporting Content Projection with Multiple Slots	06:33
102	Exploring Advanced Content Projection	03:11
103	Defining Content Projection Fallbacks	02:10
104	Multi-Element Custom Components & Content Projection	07:29
105	Scoping CSS Styles to Components	05:04
106	Understanding & Configuring View Encapsulation	05:23
107	Making Sense of Component Host Elements	02:53
108	Using Host Elements Like Regular Elements	04:31
109	Interacting With Host Elements From Inside Components	02:07
110	When (Not) To Rely On Host Elements	06:09
111	Interacting with Host Elements via @HostListener & @HostBinding	05:15
112	Accessing Host Elements Programmatically	04:04
113	Class Bindings: Repetition	04:25
114	There's More Than One Way Of Binding CSS Classes Dynamically	03:17
115	A Closer Look At Dynamic Inline Style Binding	03:31
116	Manipulating State & Using Literal Values	04:43
117	Introducing the Component Lifecycle: ngOnInit	04:03
118	Implementing Lifecycle Interfaces	03:12
119	Component Lifecycle - A Deep Dive	15:17
120	Component Cleanup with ngOnDestroy	04:08
121	Component Cleanup with DestroyRef	02:48
122	Handling Form Submissions: Repetition	02:47
123	Working with Template Variables	07:14
124	Extracting Input Values via Template Variables	01:55
125	Template Variables & Component Instances	02:36
126	Getting Access to Template Elements via ViewChild	09:28
127	Using The viewChild Signal Function	06:23
128	ViewChild vs ContentChild	06:59
129	A Closer Look at Decorator-based Queries & Lifecycle Hooks	04:58
130	The afterRender and afterNextRender Lifecycle Functions	03:09
131	Making Sense of Signal Effects	05:29
132	TypeScript & Type Models: Repetition	03:32
133	Component Outputs: Repetition	04:24
134	A Closer Look At Template For Loops	05:54
135	Revisiting Inputs & Signals	05:01
136	Updating Signal Values	04:51
137	Cross-Component Communication & State Management	06:14
138	Configuring Component Inputs & Outputs	04:07
139	Two-Way Binding: Repetition	03:56
140	Setting Up Custom Two-Way Binding	08:55
141	An Easier Way of Setting Up Custom Two-Way Binding	03:54
142	Module Introduction	01:04
143	Understanding Directives	02:58
144	The Starting Project	01:05
145	Analyzing a Built-in Attribute Directive: ngModel	05:42
146	Analyzing a Built-in Structural Directive: ngIf	06:30
147	Getting Started with Custom Directives	08:11
148	Using Attribute Directives To Change Element Behavior	04:48
149	Working with Inputs in Custom Directives	08:52
150	Directives & Dependency Injection	04:10
151	Building Another Directive	07:57
152	Building a Custom Structural Directive	08:23
153	Structural Directives & Syntactic Sugar	03:08
154	Host Directives & Composition	08:00
155	Module Introduction	00:37
156	Making Sense of Pipes	02:56
157	Using Built-in Pipes	02:57
158	More Built-in Pipes Examples	04:19
159	Building a First Custom Pipe	05:58
160	Using Custom Pipes to Perform Custom Transformations	03:50
161	Accepting Parameters in Custom Pipes	05:58
162	Chaining Pipes & Being Aware of Limitations	04:45
163	Building a Pipe That Sorts Items	06:46
164	Understanding How Pipes Are Executed	04:15
165	Pure & Impure Pipes	01:45
166	Pipe Limitations & When Not To Use Them	02:54
167	The Starting Project & The Need For A Centralized Service	03:15
168	Module Introduction	00:59
169	Creating a Service	07:28
170	How NOT To Provide A Service	02:24
171	Using Angular's Dependency Injection Mechanism	05:02
172	Using The Alternative Dependency Injection Syntax	05:28
173	Outsourcing & Reusing Logic with Services	10:57
174	Angular Has Multiple Injectors!	04:24
175	There Are Multiple Ways Of Providing a Service	04:17
176	Providing Services via the Element Injector	03:17
177	Understanding the Element Injector's Behavior	03:45
178	Injecting Services Into Services	05:27
179	Analyzing Dependency Injection with the Angular DevTools	02:30
180	Using Custom DI Tokens & Providers	08:28
181	Preparing A Non-Class Value For Injection	05:25
182	Injecting Other Values (NOT Services)	10:26
183	Angular Modules (NgModule) & Dependency Injection	03:06
184	Working with Services Without Using Signals	02:17
185	Module Introduction	01:53
186	Analyzing the Starting Project	01:53
187	Understanding How Angular Performs Change Detection	04:45
188	Change Detection During Development: ExpressionChangedAfterChecked Errors	02:46
189	Writing Efficient Template Bindings	01:20
190	Avoiding Zone Pollution	05:19
191	Using the OnPush Strategy	03:22
192	Understanding the OnPush Strategy	08:38
193	Working with OnPush & Signals	02:14
194	Using Signals for Sharing Data Across Components (with OnPush)	04:12
195	The Problem With OnPush, Cross-Component Data & Not Using Signals	03:13
196	Triggering Change Detection Manually & Using RxJS Subjects	11:02
197	Introducing The async Pipe	04:33
198	Going Zoneless!	12:59
199	Module Introduction	00:53
200	What Are Observables & What Is RxJS?	01:08
201	Creating & Using an Observable	09:18
202	Working with RxJS Operators	05:35
203	Working with Signals	05:14
204	Signals vs Observables	06:01
205	Converting Signals To Observables	03:50
206	Converting Observables To Signals	04:54
207	Deep Dive: Creating & Using A Custom Observable From Scratch	12:25
208	Module Summary	02:39
209	Module Introduction	01:29
210	The Starting Projects: Frontend & Backend	04:43
211	How To Connect Angular Apps To A Backend	04:03
212	Getting Started with Angular's Http Client	04:24
213	Sending a GET Request To Fetch Data	07:54
214	Configuring Http Requests	03:40
215	Transforming & Using Response Data	02:52
216	Showing a Loading Fallback	03:12
217	Handling HTTP Errors	10:46
218	Sending Data To A Backend	07:10
219	More Data Fetching & Some Code Duplication	04:35
220	Outsourcing HTTP Request Logic Into A Service	08:59
221	Managing HTTP-loaded Data via a Service	04:55
222	Implementing Optimistic Updating	02:42
223	Potential Problems Introduced by Optimistic Updating	02:07
224	Improved Optimistic Updating	05:10
225	Implementing App-wide Error Management	11:11
226	Practice: Sending DELETE Requests	08:25
227	Introducing HTTP Interceptors	06:58
228	Introducing HTTP Response Interceptors	03:04
229	Template-driven vs Reactive Forms	02:54
230	Module Introduction	02:28
231	Template-driven: Registering Form Controls	06:01
232	Getting Access to the Angular-managed Form	08:32
233	Extracting User Input Values	02:47
234	Validating Input with Form Validation Directives	06:10
235	Using the Form Validation Status To Provide User Feedback	07:34
236	Adding Validation Styles	04:46
237	Interacting With The Underlying Form Object In The Component	13:11
238	Updating Form Values Programmatically	05:30
239	Reactive Forms: Getting Started	05:19
240	Syncing Reactive Form Definition & Template	03:37
241	Handling Form Submission (Reactive Forms)	03:16
242	Adding Validators To Reactive Forms	06:36
243	Building Custom Validators	05:22
244	Creating & Using Async Validators	03:55
245	Interacting with the Form Programmatically	08:39
246	Exercise: Problem	02:19
247	Exercise: Solution	04:38
248	Connecting & Registering Inputs For A Complex Form	08:59
249	Working with Nested Form Groups	05:30
250	Working with Form Arrays	04:45
251	Practice: Adding More Validation	03:32
252	Creating Multi-Input Validators / Form Group Validators	07:51
253	Module Summary	01:31
254	Module Introduction	01:58
255	What Is Routing?	02:36
256	Enabling Routing & Adding a First Route	06:16
257	Rendering Routes	03:35
258	Registering Multiple Routes	03:15
259	Adding Links The Right Way	05:51
260	Styling Active Navigation Links	02:54
261	Setting Up & Navigating To Dynamic Routes	07:24
262	Extracting Dynamic Route Parameters via Inputs	05:34
263	Extracting Dynamic Route Parameters via Observables	08:00
264	Working with Nested Routes	05:31
265	Route Links & Relative Links	02:36
266	Accessing Parent Route Data From Inside Nested Routes	04:33
267	Loading Data Based On Route Parameters In Child Routes	02:15
268	Link Shortcuts & Programmatic Navigation	06:38
269	Adding A "Not Found" Route	01:47
270	Redirecting Users	05:10
271	Splitting Route Definitions Across Multiple Files	02:51
272	Activated Route vs Activated Route Snapshot	03:39
273	Setting Query Parameters	05:36
274	Extracting Query Parameters via Inputs	03:17
275	Extracting Query Parameters via Observables	03:23
276	Using Query Parameters For Data Manipulation	03:38
277	Adding Static Data To Routes	05:07
278	Resolving Route-related Dynamic Data	11:23
279	Accessing Route Data In Components	02:47
280	Controlling Route Resolver Execution	03:09
281	Setting & Resolving Titles	04:15
282	Introducing Route Guards	09:19
283	Making Sense of The CanDeactivate Guard	04:57
284	Improving The CanDeactivate Logic	03:00
285	Reloading Pages via the Angular Router & Configuring Programmatic Navigation	05:47
286	Module Introduction	01:05
287	What Is Lazy Loading / Code Splitting?	01:37
288	Introducing Route-based Lazy Loading	02:50
289	Implementing Route-based Lazy Loading	08:15
290	Lazy Loading Entire Route Groups	05:20
291	Using Lazy Loading & Routing to Lazy-load Services	03:59
292	Introducing Deferrable Views	03:10
293	Defer Loading Until Viewport Visibility	03:48
294	Deferrable Views: Using Other Triggers	01:37
295	Prefetching Lazy-loaded Code	02:00
296	Deferrable Views: Summary	02:07
297	Module Introduction	01:09
298	Preparing a Project For Deployment: Building It For Production	04:57
299	Building SPAs: Pros & Cons	03:43
300	SPAs: Deployment Example	07:55
301	Using "ng add", "ng deploy" & Angular's Built-in Deployment Support	02:17
302	Server-side Rendering (SSR) Introduction	03:40
303	Setting Up SSR For An Angular App	04:13
304	Building and Service an SSR App	02:37
305	Authoring SSR-ready Code (Beware of Pitfalls!)	03:54
306	SSR and Client-Server Mismatches	03:38
307	Static Site Generation (SSG) Introduction	02:56
308	Configuring & Using SSG	05:35
309	Deployment Methods - A Summary	00:55
310	Course Roundup	01:49
311	Module Introduction	01:16
312	What & Why?	06:33
313	Installing & Using TypeScript	06:23
314	Base Types & Primitives	03:56
315	Array & Object Types	05:34
316	Type Inference	02:48
317	Working with Union Types	02:49
318	Assigning Type Aliases	02:43
319	Diving into Functions & Function Types	05:13
320	Understanding Generics	07:21
321	Classes & TypeScript	07:59
322	Working with Interfaces	05:37
323	Configuring the TypeScript Compiler	02:30

Unlock unlimited learning

Get instant access to all 322 lessons in this course, plus thousands of other premium courses. One subscription, unlimited knowledge.

Learn more about subscription