Angular is a big framework and there is a lot to cover when getting started. We have put together a short guide with links to resources which should help you.
Please read through this short getting started guide in its whole and then start opening the links on your journey to learn Angular 💪.
If you have a mentor guiding you through your learning process, you are encouraged to also discuss any topic with them.
1. Official documentation
There are two tutorial-style sections in the official docs.
This section covers all the steps you need to complete before you can start making your first app. It also covers the very basics of Angular's core features, including template syntax, component design, routing, dependency injection, working with forms and a simple deployment process.
This is a great resource for your first introduction to Angular and we recommend following all of the steps from this section. The tutorial provides a starting point on StackBlitz, an online integrated development environment. It is very important that you actually write code—do not just read or copy/paste it, write it.
After you cover the basics, you can start with the famous Tour of Heroes App. This tutorial introduces some concepts and best practices which we use in everyday development. This time you will not use StackBlitz (online IDE), you will develop everything on your local machine. Just like before, it is important that you follow the tutorial and write the code.
Tour of Heroes tutorial includes links to various other sections of the documentation; for example, the Dependency Injection guide. While these links are important resources, we recommend you do not open those links quite yet because a lot of those resources are large documents and they might distract or overwhelm you. First finish the tutorial and then come back to those links.
After you finish the tutorial you will no doubt be left with questions. These guides,alongside your mentor, can help you find those answers.
Here are some of the most important guides:
- Dependency Injection in Angular
- Routing & Navigation
- The RxJS library
Most of these are quite large documents. Nobody expects you to read through all of the content of all of these documents. But you should know they are there, so you can come back to them when you are unsure of how some things work. Even the most experienced developers use the documentation pages on a regular basis to remind themselves of some parts of the framework which they might not have used as extensively in a while so they need a refreshed.
The official docs are a great source of reference information, guides and tutorials. After you finish all the official tutorials, taking a look at our very own Angular Handbook. At first we recommend you skim-read it on a high-level, just to get to know which topics are covered. Of course feel free to read it completely if you have the time.
The Handbook covers some of the best practices and formatting preferences to which we try and adhere when possible. This includes:
- File organization
- Editor and editor extensions recommendations
- RxJS basics
- Ways to conceptually organize components
- Handling multiple deployment environments
- Formatting, naming and best practices in Angular templates and TypeScript
- Dependency injection links
- Angular universal links
- Two-way binding
- Working with forms
One of the topics which is usually not covered in detail in most online tutorials is testing. A large portion of the Handbook is about testing and this should come in very handy once you start working on an actual project where it will be required to write tests.
3. Various online resources
Completing Tour of Heroes and reading some of the guides from the official documentation should teach you enough to start working on a real project. To advance your knowledge from this point forward, there are many great websites, YouTube channels and blogs you can follow. As you bump into parts of the framework where it is not clear to you what is going on, there is a good chance that a quick web search will lead you to one of these sources:
- Angular University has tons of PDFs and video content
- Angular In Depth [Web, Medium] usually covers more advanced topics, so it is probably not a great first resource for beginners, but it will definitely be of great value when you have some very specific questions
- Subscription-based learning portals like egghead.io have courses covering a wide range of topics
- Academind covers Angular, TypeScript, NodeJS, vanilla JS, RxJS, React, Vue and various other topics. Some content is available on YouTube, and some on Udemy
Feel free to start a course or simply start following some blogs to keep on top of things.
4. Get to know RxJS
Writing good quality Angular applications both in terms of performance and code readability and reusability often requires having a good grasp of how RxJS works and how it can be utilized to create reactive data streams.
Luckily there are some good and free online tutorials available. We recommend watching Acedemind's Understanding RxJS YouTube playlist. There is also a cool website called RxJS Marbles where you can explore many different RxJS operators and see what they do in a visual way. Egghead.io has some great courses as well, for example RxJS Beyond the Basics: Operators in Depth and Build an Angular Instant Search Component.
We also recommend reading the official documentation pages related to Observables and RxJS:
- The RxJS library
- Observables in Angular
- Practical observable usage
- Observables compared to other techniques
When reading/watching online tutorials please note that there have been some breaking changes in RxJS version 6—some of the APIs have changed (mostly the way we use operators), and many tutorials that were created earlier are now using older versions of RxJS (v5 or older). That being said, not much has changed conceptually, just the way you write some RxJS functionalities, so those tutorials should still be worth checking out.