Welcome!

Hello and welcome to Angular Start! This course will teach you everything you need to know about Angular, from the basics right through to building complete professional-grade applications.

Our goal here isn’t just to learn the bare minimum to get up and running, it is to build a solid foundation of knowledge and modern best practices that are used by highly skilled professionals today.

But there’s a problem…

There are two distinct ways that you can go about learning Angular: one easier and one harder.

The easier approach uses a more intuitive imperative style of programming, whilst the harder approach uses a reactive/declarative style of programming that can be harder to wrap your head around initially but pays off in a big way in terms of developer experience and code quality.

We can broadly think of the imperative approach as being easy and then hard, whereas the declarative approach is hard and then easy.

No idea what these terms mean? Imperative and declarative? Don’t worry, we’ll get to that later. I am just trying to make a point here as to why we are going to learn the “hard” way.

The easier approach is quicker and easier to learn for most people (naturally), but the harder approach is how — at least in my opinion — the best Angular developers today build their apps. I used the imperative approach for more than a decade before beginning to code the declarative way, and it has made me enjoy programming a lot more. I write better code, with less bugs, that is easier to understand and maintain.

To use a somewhat crude and not entirely accurate analogy (no analogy is perfect), consider setting up the cables for your computer/devices/network. The easiest and most obvious way to go about doing this would be to… just plug things in. Worrying about colour coding cables or using any fancy cable organisation gadgets might seem like a pointless over complication. This is somewhat like the “easier” imperative approach.

But… it doesn’t take long for the situation to become problematic. Even a basic computer set up can quickly become messy and confusing. You get to the point where the cables become a tangled mess, you’re not quite sure what is plugged in to what, if you try to unplug something you’re not entirely sure you won’t end up unpowering something you didn’t intend to, and adding something new to the mix is confusing, frustrating, and might end up causing uninteded issues.

Once you are in this mess, it can be hard to get out of it… it’s not as easy as just adding cable management “when you need it”. You already have a mess. You really need the cable management from the start.

The “harder” way, declarative code, solves this problem. It is like investing a bit of extra time into proper cable management from the beginning. Once you learn the concepts, it doesn’t even really take any extra time to set up and it will save you a ton of time throughout the life of your software.

The problem is that these two styles are so different, that it’s not a simple shift from one to the other. A lot of the time we can start the easy way and then build up to the harder way — but that’s not really the case here. Starting with the easier approach is going to lead you to learn quite a lot that you will need to unlearn later when switching to the other approach — it requires a completely different mental model.

It’s always going to be a bold claim to say that one approach is “better” than another. But, I do strongly believe that the approach we will be learning is the approach that is best for Angular applications. It is an approach that works with concepts that are deeply baked into Angular. Once you get the concepts down it becomes much easier to code this way, because in a sense you are using Angular the way it was designed to be used.

At least in my view, Angular developers will tend to move toward the “hard way” as their skills with the framework improve. But there is no reason why you can’t start down that path immediately.

What does the “best” approach look like?

Maybe you already have some Angular knowledge, or maybe you are a complete beginner. In any case, I don’t want to dive too deep straight away into what the difference between imperative and declarative is, or what coding reactively means, or what the benefits of RxJS and observables are, or how best to use observables with signals. We will build these concepts up over time and explain them as we go.

But, I don’t want to just leave you with this wishy-washy notion of the easy way and the hard way (which I am claiming is the “best” way) to create Angular applications.

This is a general outline of the concepts we will be using to create our applications, which you might not find in a more typical approach to building Angular applications at a beginner/intermediate level.

These are the concepts that make this the “hard” way:

• Reactive/Declarative style coding
• RxJS Operators Smart/Dumb component architecture Feature based project
• structure SOLID programming principles

Again, maybe you are already familiar with some of these concepts, maybe you’ve never heard of any of them. Either way, it doesn’t matter at this point. We are going to address all of these in detail throughout the course as we learn the standard Angular concepts like:

• Components
• Services
• Signals
• Templates
• Dependency Injection
• Forms
• Change Detection
• Decorators
• Routing
• Styling
• …and a lot more

A quick test!

What?! We haven’t even learned anything yet. Throughout this course, you will find little quizzes like this to help reinforce things we learn in particular lessons. Usually, these will be used to test your knowledge. However, for now, this is going to serve as a little check to make sure you have the prerequisite knowledge to complete this course.

If you answer No for any of these, it doesn’t mean that you can’t start the course. However, you may need to seek out additional resources as these are concepts that will not be explained in this course.