Angular Essentials (Angular 2+ with TypeScript)

Obviously, it's extremely important to know what you're working with. This lecture tackles the most important question for that reason: What is Angular?

In order to use Angular, you also need to know how it works - this lecture dives into that question.

Enough of the theory - let's get started! In this lecture, we'll set up our first Angular App!

The first app is running - that's amazing. But it would be even more amazing if we would change it, right? Let's do that in this lecture.

We got our first app, we did edit it ... but what did the CLI actually create for us? Let's go through the project structure.

What's happening behind the scenes? We didn't take a closer look yet, so it's time to do that now.

Let me briefly walk you through the course structure and explain what you can get out of this course.

Angular uses TypeScript and you don't need to know TypeScript in order to follow along. It can still be easier if you got some basics about TypeScript set. That's the goal of this lecture.

This course offers a lot of content but sometimes, you might get stuck. Learn how to get un-stuck with the hints outlined in this lecture.

Need more information? Have a look at this lecture.

Let me introduce you to this course module and what you're going to learn in it.

Before we dive into components, let's make sure we have a development environment we actually want to work with.

Components use templates and templates influence what we see on the screen in the end. Let's dive deeper into this relation in this lecture.

We worked with Components a bit but how does Angular actually work with them? Let's dive into this question in this lecture.

Time to leave the world of "AppComponent" - let's build our first custom component in this lecture.

Obviously, we want to output content when creating an app. Angular offers a couple of ways of achieving this - this lecture explores the first method: String Interpolation.

Outputting content is nice but for a reactive app, we also need to be able to listen to events. This lecture shows how that works.

Let's dive into the third form of databinding: Property binding.

Want to combine event binding with property binding? You actually can! Learn more about two-way-binding in this lecture.

We had a look at property binding - the great thing is: You can also bind to properties of your own components! Learn more about that in this lecture.

Just as you can bind your own properties, you can also emit your own events - and listen to them. More about that in this lecture.

Thus far, we only worked with two components. Let's now add more components and let's also see how the CLI helps you with this.

Angular does something special when it comes to styling your component. Let's take a closer look!

Let me wrap this module up and summarize what you learned.

Want to dive deeper? Have a look at this lecture!

Let me introduce you to this module and what you're going to learn in it.

You can't avoid running into errors - they're going to happen! But error messages can be very helpful as this lecture will show you.

For logical errors, you're not going to get any error messages. But thankfully, you can debug your code at runtime. How? Take a look at this lecture.

You need more insights? Have a look at Augury - a useful Chrome plugin for developing Angular apps.

Sometimes, you need that extra CSS framework. Learn how to easily add CSS framework to your Angular (CLI) project in this lecture.

What about JS libraries - can you add those, too? Yes, of course! This lecture shows how to quickly add a JS library to your Angular (CLI) project.

Want to dive deeper or learn more? Have a look at this lecture!

Let me introduce you to this module and to what you're going to learn!

Let's dive into the most important question first: What are Directives? This lecture answers this question.

A key directive Angular ships with, is ngFor. Learn how it works and which kind of directive it is in this lecture.

Want to conditionally add or remove CSS classes? Angular's got a directive for you!

We learned about two very important Directives - let's take a closer look at other directives, too.

ngIf is another core directive as you'll learn in this lecture.

Let me wrap this module up and summarize what you learned thus far.

Let me introduce you to this module and its goal.

Before you start building any (Angular) project, you first need to plan it, right? Let's do that in this lecture.

The app planning is finished, time to get started!

The app is planned, we also got started, let's now start fill the app and its components with some life.

Obviously our application uses some data. How do we manage that? This lecture helps with that question.

If you need to pass data between components, consider property binding. This lecture shows how to quickly pass data around.

What would you expect if you click a tab link? That the tab looks like it was selected, right? Let's work on that experience in this lecture.

We're not limited to passing data down the component tree. We of course can build our own events and emit them to go the other direction.

Let me introduce you this module and outline what we're going to learn.

Before we start creating services, you of course need to understand what they are and which role they play. This lecture will do just that.

Now that you know what services are, it's time to create one!

We got a service. Great! How do we use it? Well, this lecture shows how NOT to use it.

Angular ships with a powerful Dependency Injection Framework. This lecture shows you how you may use it to use services in components (or anywhere else in your app).

We already used Dependency Injection. It's a powerful tools and you can use it in different ways. This lecture explores your alternatives.

With Services in place, we can clean up the course project and improve it. Let's do that in this lecture.

What if you want to inject a Service into another Service. Does that work? Yes it does, learn how it works in this lecture.

Let me introduce you to this module and to what you're going to learn in it.

Let's start by setting up a form in a component template. No rocket science but the foundation for all further steps.

Learn how Angular helps you with handling forms in this lecture.

We got a form and with that, users may submit content. Learn how to handle user submissions in this lecture.

Of course you want to make sure that you only work with valid data. This lecture shows you how you may use Angular to easily validate forms.

In the previous lecture, you learned about required. There are other validators, too. Learn more in this lecture.

It's great that we may validate forms, it's even better if we inform the user about incorrect inputs. This lectures explores your options.

We used ngModel in this course module. We also used it earlier in the course - for two-way-binding. How else may you use it?

There is an alternative approach you may use - learn a bit more about it in this lecture.

Does the reactive approach sound interesting to you? Learn more about it in this lecture.

Let me wrap this module up and summarize what we learned.

Want to dive deeper? This lecture is for you!

Let me introduce you to this module and the topics we'll cover.

It's key to understand the differences between server-side and client-side routing. We'll take a closer look at this question in this lecture.

When using routing, it makes sense to have a header. In this lecture, we're going to create one.

Enough of the preparation - time to finally add routing to our application!

Having routes is great, but typically, you provide a better user experience if you provide links. Learn how to easily add links in this lecture.

If the user enters an unknown route, you probably want to handle that. This lecture dives into your options.

Now we're getting advanced - let's dive into child routes and route params!

Being able to pass dynamic data via route params is great but it's only useful if you can extract that data. This lecture shows you how that works.

Did you notice that the page reloads unexpectedly? Let's fix this issue in this lecture - it's a common gotcha!

With routing added, we may clean up our app. Whilst doing that, we'll discover that it kind of broke. We'll fix it soon though!

Want to learn more? This lecture is for you!