This course starts from scratch, you neither need to know Angular 1 nor Angular 2! (Angular 4 simply is the latest version of Angular 2)
Join the most comprehensive and popular Angular course on Udemy, because now is the time to get started!
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!
This Course uses TypeScript
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 4 simply is the latest version of the Angular framework and simply an update to Angular 2.
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 4) 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:
Pay once, benefit a lifetime!
Don’t lose any time, gain an edge and start developing now!
Let me introduce you to this course and give a rough outline over what you're going to learn!
First things first! What is Angular? Why would you want to learn it? This lecture helps answering this question.
So many Angular versions! What's up with them and which version does this course cover?
Enough of the talking, let's create our first Angular project and view our first app in the browser.
Got issues using the CLI, setting up a project or simply want to learn more about it? Check out this lecture.
With the first App running, it's time to make some changes and get a first impression on what Angular is capable of doing.
How is this course structured? This lecture answers the question and explains what you're going to learn!
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.
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.
Do you get some strange error? Are you stuck? Have a look at the source code of this course.
Let me introduce you to the module and explain what you're going to learn.
We saw our first App run in the browser but do you really know how it got there? This lecture answers the question.
Angular is all about Components! This lectures takes a closer look and explains what Components really are.
Thus far, we worked with the AppComponent. Time to change this and create our first own component.
Did you recognize that AppModule file? It's super important - this lecture explains what it's about!
Now that we learned how to create and register our own components, let's now dive into using them.
We can also use the CLI to create components. This lecture explains how that then works and also how you may nest components.
A Component needs to have a Template. It's an absolute must. This lectures dives deeper into templates.
Whilst a Component is required to have a template, Styles are optional. This lectures explains how you may add styling.
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.
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.
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.
Property Binding is another form of Databinding - also related to outputting content. Learn more about it in this lecture.
Since both Property Binding and String Interpolation are related to outputting content, which one should you use? This lecture helps you with that decision!
So far, we only passed data to the template. What if we want to react to (User) Events? Event Binding to the rescue!
To which Properties and Events can you bind? This article should be helpful.
When we're talking about Events, we have to consider passing data. This lecture explains how that works.
You can also combine event and property binding - with Two-Way-Databinding. Learn more about it in this lecture.
We learned about the different forms of Databinding, let's now combine them!
Directives are another important building block in Angular apps. Learn more about it in this lecture.
ngIf is one of the built-in directives - it's super helpful if you want to output data dynamically.
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.
Want to change some styles dynamically? ngStyle is what you're looking for.
Kind of related to the dynamic styling - you can also apply CSS classes dynamically with ngClass.
What if you wanted to output lists (e.g. an array)? ngFor is there for you.
ngFor also allows you to get the Index of the current iteration - this lecture explains how that works.
Time to get started with the Course Project.
How should the Angular app we're building look like? Let's plan which features and components we need.
Let's get our hands dirty and set the app up.
Time to create the components we planned to create. Try doing it on your own first!
With the components created in the last lecture, it's now time to use them so that we can see something.
Later in this course, we want to switch pages - setting up a navigation bar sounds like a great idea for that.
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.
We're also going to use some data in this project - time to create a model for that data.
With the model and the component created, we can now add some content to our component template.
In the end, we want to have more than one recipe, so let's prepare our template to output such a list.
We also want to display some detailed information about selected recipes, so let's add the appropriate code.
We worked on the Recipe Components, let's now do the same for the shopping list.
As with the Recipe, we're also going to use some Ingredients in our app - let's add the respective model.
With the model added, we can work on outputting some ingredients.
We also want to be able to add new Ingredients to the Shopping List, so let's add the respective feature.
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.
Things don't always go the way you want them to go. Learn how to read Angular's error messages.
It can be incredibly useful to debug your app in the browser - learn more in this lecture.
Augury is a nice plugin you can use to dive deeply into your app in the browser.
We already learned some things about components but now it's time to dive deeper into them!
This lecture explains how you may split an existing app into multiple new components.
You already learned about property and event binding - but you didn't learn everything about it. Time to do so now.
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.
Sometimes, you want to use a different property name outside of a component than inside of it. This lecture explains how to do that.
As with property binding, you can also bind to custom events.
You may also assign an alias to your custom events.
Let me summarize the things you learned about property and event binding.
Angular allows you to apply different styles to different components - this lecture explains how that works.
Let's dive deeper into View Encapsulation.
Sometimes, you want to get access to some of your HTML elements. Local references allow you to do just that.
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.
Want to pass structured content (e.g. HTML code) into another component? Learn more about it in this lecture.
Components follow a certain lifecycle - this lecture dives deeper into this topic.
Let's see those lifecycle hooks in action.
How can we access template elements in different lifecycle hooks? Let's find out ...
You may also get access to the content projected into a component - let's also see how that works in lifecycle hooks.
Let me wrap up this section about Components & Databinding
Now that we learned how to pass data to components, let's enhance our app.
Let's use the new features to add a first version of our app navigation - using custom events and ngIf.
We can not only listen to our own events, we can also pass data to components now, so let's do so.
Let's build a more complex chain of custom property and event binding to pass data around.
The user should also be able to add ingredients to the shopping list, so let's add such a feature.
Let me explain what this module is about!
We already learned about them, let's quickly recap ngIf and ngFor.
We already know ngStyle and ngClass but let me quickly refresh our knowledge on them.
What if the built-in directives don't offer the functionality you're looking for? No problem, you can build your own directive!
The directive we built is okay but can be enhanced. Let's do so now in this lecture.
This lecture allows you to dive deeper into the Renderer.
When using directives, you have an easy way of reacting to events on your hosting element. Learn more about it in this lecture.
You're not limited to reacting to events, you can also bind to properties of the hosting element. This lecture explains how that works.
Property binding is of course not limited to components - let's bind to some directive properties!
We not only have attribute directives, we also use structural directives. What's that strange "*" all about though?
Let's build our own structural directive!
There's another nice built-in structural directive: ngSwitch. Learn more about it in this lecture.
Time to add a custom directive to the course project - let's enable the dropdowns by building a DropdownDirective!
Services are a core concept of Angular - let me explain what you may expect from this section.
Services are important - but why? This lecture explores this question.
Now that we understood what services are, let's create a Logging service.
We got a service but how can we use it now? Angular will help us - this lecture explains how.
We got the basics set now. Time to build another service and ramp up our game!
We learned a lot about services - time to make the next step. Angular actually allows us to control how many instances of a service get created. Learn more about this in this lecture.
How many services should it be?
You're not limited to using Services in components or directives. This lecture explains how you may use services in services, too.
Besides the usecases already covered in this module, services can also be very useful when it comes to allowing cross component communication. This lecture dives deeper.
Time to practice services and add some to our project!
Let's create some service files for the services we're actually going to use in this section.
A great candidate for a service is the management of our recipes - let's build a service for that!
We learned, that services may be used for cross component communication. Let's add this feature to our app.
Let's add the the shopping list service to our app!
Besides setting up services which may be queried by other "parts" of our app, we can also actively send out messages. Let's take a closer look in this lecture.
Almost done! Let's finetune our app by allowing the addition of ingredients from a Recipe to the Shopping List. For that, we need Ingredients on Recipes - let's add them now.
Almost done! Let's finetune our app by allowing the addition of ingredients from a Recipe to the Shopping List.
Experience as Web Developer
Starting out at the age of 13 I never stopped learning new programming skills and languages. Early I started creating websites for friends and just for fun as well. This passion has since lasted and lead to my decision of working as a freelance web developer and consultant. The success and fun I have in this job is immense and really keeps that passion burningly alive.
Starting web development on the backend (PHP with Laravel, NodeJS) I also became more and more of a frontend developer using modern frameworks like Angular 2 or VueJS 2 in a lot of projects. I love both world nowadays!
As a self-taught developer I had the chance to broaden my horizon by studying Business Administration where I hold a Master's degree. That enabled me to work in a major strategy consultancy as well as a bank. While learning, that I enjoy development more than these fields, the time in this sector greatly improved my overall experience and skills.
Experience as Instructor
As a self-taught professional I really know the hard parts and the difficult topics when learning new or improving on already-known languages. This background and experience enables me to focus on the most relevant key concepts and topics. My track record of many 5-star rated courses as well as a successful YouTube channel is the best proof for that.
Whether working as development instructor or teaching Business Administration I always received great feedback. The most rewarding experience is to see how people find new, better jobs, build awesome web applications, acquire amazing projects or simply enjoy their hobby with the help of my content.