Angular - The Complete Guide (2024 Edition)
- Description
- Curriculum
- FAQ
- Reviews
Join the most comprehensive and bestselling Angular course on Udemy and learn all about this amazing framework from the ground up, in great depth!
This course starts from scratch, you neither need to know Angular 1 nor Angular 2!
From Setup to Deployment, this course covers it all! You’ll learn all about Components, Directives, Services, Forms, Http Access, Authentication, Optimizing an Angular App with Modules and Offline Compilation and much more – and in the end: You’ll learn how to deploy an application!
But that’s not all! This course will also show you how to use the Angular CLI and feature a complete project, which allows you to practice the things learned throughout the course!
And if you do get stuck, you benefit from an extremely fast and friendly support – both via direct messaging or discussion. You have my word! 😉
Angular is one of the most modern, performance-efficient and powerful frontend frameworks you can learn as of today. It allows you to build great web apps which offer awesome user experiences! Learn all the fundamentals you need to know to get started developing Angular applications right away.
Hear what my students have to say
“Absolutely fantastic tutorial series. I cannot thank you enough. The quality is first class and your presentational skills are second to none. Keep up this excellent work. You really rock! – Paul Whitehouse”
“The instructor, Max, is very enthusiastic and engaging. He does a great job of explaining what he’s doing and why rather than having students just mimic his coding. Max was also very responsive to questions. I would recommend this course and any others that he offers. Thanks, Max!”
“As a person new to both JavaScript and Angular 2 I found this course extremely helpful because Max does a great job of explaining all the important concepts behind the code. Max has a great teaching ability to focus on what his audience needs to understand.”
This Course uses TypeScript
TypeScript is the main language used by the official Angular team and the language you’ll mostly see in Angular tutorials. It’s a superset to JavaScript and makes writing Angular apps really easy. Using it ensures, that you will have the best possible preparation for creating Angular apps. Check out the free videos for more information.
TypeScript knowledge is, however, not required – basic JavaScript knowledge is enough.
Why Angular?
Angular is the next big deal. Being the successor of the overwhelmingly successful Angular.js framework it’s bound to shape the future of frontend development in a similar way. The powerful features and capabilities of Angular allow you to create complex, customizable, modern, responsive and user friendly web applications.
Angular is faster than Angular 1 and offers a much more flexible and modular development approach. After taking this course you’ll be able to fully take advantage of all those features and start developing awesome applications immediately.
Due to the drastic differences between Angular 1 and Angular (= Angular 2+) you don’t need to know anything about Angular.js to be able to benefit from this course and build your futures projects with Angular.
Get a very deep understanding of how to create Angular applications
This course will teach you all the fundamentals about modules, directives, components, databinding, routing, HTTP access and much more! We will take a lot of deep dives and each section is backed up with a real project. All examples showcase the features Angular offers and how to apply them correctly.
Specifically you will learn:
-
Which architecture Angular uses
-
How to use TypeScript to write Angular applications
-
All about directives and components, including the creation of custom directives/ components
-
How databinding works
-
All about routing and handling navigation
-
What pipes are and how to use them
-
How to send HTTP requests (e.g. to REST APIs)
-
What dependency injection is and how to use it
-
How to use modules in Angular
-
How to optimize your (bigger) Angular applications
-
An introduction to NgRx and complex state management
-
We will build a major project in this course so that you can practice all concepts
-
And so much more!
Pay once, benefit a lifetime!
Don’t lose any time, gain an edge and start developing now!
-
1
Course IntroductionWelcome to this course! Let me introduce myself and explain what the course is about!
-
2
What is Angular?
First things first! What is Angular? Why would you want to learn it? This lecture helps answering this question.
-
3
Join our Online Learning CommunityLearning alone is absolutely fine but finding learning partners might be a nice thing, too. Our learning community is a great place to learn and grow together - of course it's 100% free and optional!
-
4
Angular vs Angular 2 vs Latest Angular Version
So many Angular versions! What's up with them and which version does this course cover?
-
5
CLI Deep Dive & Troubleshooting
Got issues using the CLI, setting up a project or simply want to learn more about it? Check out this lecture.
-
6
Project Setup and First App
Enough of the talking, let's create our first Angular project and view our first app in the browser.
-
7
Editing the First App
Let's edit our first app!
-
8
The Course Structure
How is this course structured? This lecture answers the question and explains what you're going to learn!
-
9
How to get the Most out of the Course
Of course you can simply go through all the lectures, but to get the most out of the course, you should consider the advises given in this lecture.
-
10
What is TypeScript?
Angular uses TypeScript. What does that mean for you?
-
11
Optional: TypeScript Quick Introduction
-
12
A Basic Project Setup using Bootstrap for Styling
A lot of sections of this course will start with a basic setup - this lecture explains how that basic setup is created with the CLI.
-
13
About the Course Code / Code Snapshots
Do you get some strange error? Are you stuck? Have a look at the source code of this course.
-
14
Module Introduction
Let me introduce you to the module and explain what you're going to learn.
-
15
How an Angular App gets Loaded and Started
We saw our first App run in the browser but do you really know how it got there? This lecture answers the question.
-
16
Components are Important!
Angular is all about Components! This lectures takes a closer look and explains what Components really are.
-
17
Creating a New Component
Thus far, we worked with the AppComponent. Time to change this and create our first own component.
-
18
Understanding the Role of AppModule and Component Declaration
Did you recognize that AppModule file? It's super important - this lecture explains what it's about!
-
19
Working with Standalone Components
-
20
Using Custom Components
Now that we learned how to create and register our own components, let's now dive into using them.
-
21
Creating Components with the CLI & Nesting Components
We can also use the CLI to create components. This lecture explains how that then works and also how you may nest components.
-
22
Working with Component Templates
A Component needs to have a Template. It's an absolute must. This lectures dives deeper into templates.
-
23
Working with Component Styles
Whilst a Component is required to have a template, Styles are optional. This lectures explains how you may add styling.
-
24
Fully Understanding the Component Selector
The Selector of a Component is important if you want to include it in another template. This lecture explains how that selector actually works and what to watch out for.
-
25
Practicing Components
-
26
[OPTIONAL] Assignment Solution
-
27
What is Databinding?
Enough about Components for now - let's finally output more dynamic content now. Databinding is super important when it comes to that. This lectures explains what Databinding is.
-
28
String Interpolation
One of the simplest forms of Databinding is String Interpolation which allows you to output text in your template. This lecture takes a closer look.
-
29
Property Binding
Property Binding is another form of Databinding - also related to outputting content. Learn more about it in this lecture.
-
30
Property Binding vs String Interpolation
Since both Property Binding and String Interpolation are related to outputting content, which one should you use? This lecture helps you with that decision!
-
31
Event Binding
So far, we only passed data to the template. What if we want to react to (User) Events? Event Binding to the rescue!
-
32
Bindable Properties and Events
To which Properties and Events can you bind? This article should be helpful.
-
33
Passing and Using Data with Event Binding
When we're talking about Events, we have to consider passing data. This lecture explains how that works.
-
34
Important: FormsModule is Required for Two-Way-Binding!
-
35
Two-Way-Databinding
You can also combine event and property binding - with Two-Way-Databinding. Learn more about it in this lecture.
-
36
Combining all Forms of Databinding
We learned about the different forms of Databinding, let's now combine them!
-
37
Practicing Databinding
-
38
[OPTIONAL] Assignment Solution
-
39
Understanding Directives
Directives are another important building block in Angular apps. Learn more about it in this lecture.
-
40
Using ngIf to Output Data Conditionally
ngIf is one of the built-in directives - it's super helpful if you want to output data dynamically.
-
41
Enhancing ngIf with an Else Condition
ngIf is not limited to the usage you learned in the last lecture. Learn how to use it together with an else condition in this lecture.
-
42
Angular 17: Alternative "if" Syntax
-
43
Styling Elements Dynamically with ngStyle
Want to change some styles dynamically? ngStyle is what you're looking for.
-
44
Applying CSS Classes Dynamically with ngClass
Kind of related to the dynamic styling - you can also apply CSS classes dynamically with ngClass.
-
45
Outputting Lists with ngFor
What if you wanted to output lists (e.g. an array)? ngFor is there for you.
-
46
Angular 17: Alternative "for" Syntax
-
47
Practicing Directives
-
48
[OPTIONAL] Assignment Solution
-
49
Getting the Index when using ngFor
ngFor also allows you to get the Index of the current iteration - this lecture explains how that works.
-
50
Project Introduction
Time to get started with the Course Project.
-
51
Planning the App
How should the Angular app we're building look like? Let's plan which features and components we need.
-
52
Creating a New App Correctly
This is an important one - make sure to not skip this lecture!
-
53
Setting up the Application
Let's get our hands dirty and set the app up.
-
54
Creating the Components
Time to create the components we planned to create. Try doing it on your own first!
-
55
Using the Components
With the components created in the last lecture, it's now time to use them so that we can see something.
-
56
Adding a Navigation Bar
Later in this course, we want to switch pages - setting up a navigation bar sounds like a great idea for that.
-
57
Alternative Non-Collapsable Navigation Bar
Our navbar collapses and we don't offer a hamburger menu. Feel free to implement one on your own or change the code as outlined here.
-
58
Creating a "Recipe" Model
We're also going to use some data in this project - time to create a model for that data.
-
59
Adding Content to the Recipes Components
With the model and the component created, we can now add some content to our component template.
-
60
Outputting a List of Recipes with ngFor
In the end, we want to have more than one recipe, so let's prepare our template to output such a list.
-
61
Displaying Recipe Details
We also want to display some detailed information about selected recipes, so let's add the appropriate code.
-
62
Working on the ShoppingListComponent
We worked on the Recipe Components, let's now do the same for the shopping list.
-
63
Creating an "Ingredient" Model
As with the Recipe, we're also going to use some Ingredients in our app - let's add the respective model.
-
64
Creating and Outputting the Shopping List
With the model added, we can work on outputting some ingredients.
-
65
Adding a Shopping List Edit Section
We also want to be able to add new Ingredients to the Shopping List, so let's add the respective feature.
-
66
Wrap Up & Next Steps
Part one of the app is finished. We achieved a lot but a lot of features are also still missing - time to move on and learn more about Angular.
-
69
Module Introduction
We already learned some things about components but now it's time to dive deeper into them!
-
70
Splitting Apps into Components
This lecture explains how you may split an existing app into multiple new components.
-
71
Property & Event Binding Overview
You already learned about property and event binding - but you didn't learn everything about it. Time to do so now.
-
72
Binding to Custom Properties
You're not limited to binding to built-in properties. Indeed, binding to custom property is a key feature of Angular apps. Time to learn more about it.
-
73
Assigning an Alias to Custom Properties
Sometimes, you want to use a different property name outside of a component than inside of it. This lecture explains how to do that.
-
74
Binding to Custom Events
As with property binding, you can also bind to custom events.
-
75
Assigning an Alias to Custom Events
You may also assign an alias to your custom events.
-
76
Custom Property and Event Binding Summary
Let me summarize the things you learned about property and event binding.
-
77
Understanding View Encapsulation
Angular allows you to apply different styles to different components - this lecture explains how that works.
-
78
More on View Encapsulation
Let's dive deeper into View Encapsulation.
-
79
Using Local References in Templates
Sometimes, you want to get access to some of your HTML elements. Local references allow you to do just that.
-
80
@ViewChild() in Angular 8+
-
81
Getting Access to the Template & DOM with @ViewChild
You got the local references in the templates, but you can also access your elements directly from the TypeScript file - this lecture explains how that works.
-
82
Projecting Content into Components with ng-content
Want to pass structured content (e.g. HTML code) into another component? Learn more about it in this lecture.
-
83
Understanding the Component Lifecycle
Components follow a certain lifecycle - this lecture dives deeper into this topic.
-
84
Seeing Lifecycle Hooks in Action
Let's see those lifecycle hooks in action.
-
85
Lifecycle Hooks and Template Access
How can we access template elements in different lifecycle hooks? Let's find out ...
-
86
@ContentChild() in Angular 8+
-
87
Getting Access to ng-content with @ContentChild
You may also get access to the content projected into a component - let's also see how that works in lifecycle hooks.
-
88
Wrap Up
Let me wrap up this section about Components & Databinding
-
89
Practicing Property & Event Binding and View Encapsulation
-
90
[OPTIONAL] Assignment Solution
