Consider this article as a suggested roadmap for learning Angular, where the goal is to get familiar with the most important concepts in Angular, fast. For my first month working with Angular, I wrote down the resources I used. This article will save you the search for the right resources in an unknown landscape as I provide you some guidelines. That makes this article relevant:
- if you want to get started with Angular yourself,
- if you want a high-level overview of Angular concepts to compare it to React or to your view on Angular or
- if you simply want to supplement your current learning with additional resources.
Let's get started, hop on the Angular train!
 |
|---|
| Hop on the Angular train - pic @artlambi on unsplash.com |
Guided by a full stack Techspire developer with over ten years of experience, my introduction to Angular can be seen as a very effective one-month bootcamp. It works best for me to blend different kinds of resources and you will probably have your personal preference on how to balance these resources. Besides, it is useful to think about your learning style and how new information sticks best, before you dive in. Reflecting on this ahead of time will greatly improve your learning curve, is my experience.
Bear in mind that this is plenty for one full month. Try to realise that your learning process will be much more pleasant by accepting you will not understand most of what you see at first; give it some time. This is how I suggest you approached it:
- Read the Official Documentation: start by leafing through, read a bit, not a lot, as this in such technical language that, at first, it will probably not make a lot of sense. Now you know where to look up concepts once you dive in deeper.
- Be hands-on: start with a small course, e.g. teamtreehouse, and code along to get your hands dirty. This could just as well be done with some youtube videos. Meanwhile, have a peak at the TypeScript documentation
- Learn TypeScript if you don't know it yet: looking back, it would have been a good idea to deeply understand TypeScript before I started learning Angular. This Udemy course was great for that purpose. TypeScript is also a great introduction to some Object Oriented Programming principles. Without knowing what is TypeScript and what is Angular, it is hard to keep them apart..
- Start a personal project (see paragraph below), because building is better than just knowing.
- Pick up a more intense course to supplement your personal project, this one is great.
- Dive into important concepts for Angular with Wikipedia and Medium articles, explanation videos on youtube from various conferences and official documentation.
- Experiment with markup: Angular Bootstrap, SASS.
Find a balance that works for you, and divide your time between these resources. If you prefer hands-on, spend more time on your personal project than on a course, but keep an eye on course structures to see in which order to introduce new concepts.
As you progress, slowly but steadily the concepts you are exploring will start falling into place.
If you learn better from videos than from reading, spend more time on youtube and less time on reading documentation. If one resource stops making sense, switch to a different one - you get the point 🤓.
For learning Angular, it should not matter much what kind of Operating System and IDE you use. I currently work on a MacBook pro, writing code in VS Code. But let's not get into the details of that here, just set up your machine as you please. Check out this blog for my setup guide.
Simply put, Angular takes a lot more effort to get started with, than React. A comparison of Angular and React (or Svelte/Vue/Ember/etc.) is explicitly not the goal of this blog. Earlier projects I did were based on React, and it might be good to note here that Angular is a framework, whereas React is a library (see: framework vs library). It took me only a couple days to start building my confidence in React, whereas this took me a couple weeks in Angular. To me, this is part of the explanation for the popularity and industry opinion of Angular:
 |
|---|
| Chart from State of JS 2019 survey |
Once you have had a first glance of Angular and you know the basics of TypeScript, it makes sense to start a personal project. My project turned out to be a dashboard for monitoring the exchange rate of a bunch of crypto currencies. I had plenty of other ideas (such as building a fitness tracker), but as I discussed them with my mentor, it turned out my focus would partially shift towards writing backend code. And that is not the point for now, the goal is to stay focused on front-end development.
Pick any project you like of course, with elements you want to learn, then sketch a couple functionalities. Maybe as I do below, maybe on some pieces of paper. This way, you get an idea what to work on, rather than working away into a void. Focusing like this helped me speed up my learning.
My dashboard features various components, modules and services. This got me started with important Angular concepts. For this purpose, these are interesting functionalities:
- Multiple pages and navigation - Angular router,
- Getting crypto data from an external source - API calls, AsyncPipe, Observables, RxJS,
- Forms for user input - reactive forms and validation,
- Modular project structure - lazy loading and performance optimisation.
For all of these concepts, be sure to check out different resources, as I discussed earlier: Udemy courses, Medium articles, youtube videos, and so on. When you time some time left (I set my priorities elsewhere for the first month😉):
- Login screen, authentication, data persistence in local storage (or with a back end),
- chartJS for visualisation of how crypto value develops over time.
After setting up the project, I started working on these concepts one by one. Starting small, I went through different phases for every functionality, using a vertical slicing approach.
To begin, install the Angular CLI like this: npm i -g @angular/cli and then start a new project: ng new crypto-dashboard. When asked, add Angular routing and choose your prefered markup (I go with SCSS/SASS). cd into the project folder and test the project by starting a development server. Your terminal will probably look like this:
user:~/projects$
npm i -g @angular/cli
ng new crypto-dashboard // pick your project name
cd crytpo-dashboard/
ng serve --open // --open flag opens the project in the browser
Now create a new GitHub repository with your starter files, set up a Heroku account and integrate it with your GitHub account. To deploy your Angular application like this, you will need a simple Express server. Check out this boilerplate Express code in my GitHub account, readying you for Heroku deployment (tutorial 1, 2).
Learning something new at a high pace is always exciting and slightly confusing. Writing this article has helped me reflect on my first month with Angular, and it was a challenge not get into details here too much. My goal with this blog was to introduce you to the landscape and to offer some resources that have been particularly useful for me, while leaving you plenty of room for your own interpretation and learning style.
If you feel motivated, I could recommend looking some more into Functional Reactive Programming and the Observer <> Observable pattern (these are excellent: 1, 2, 3, 4), RxJS and project structure. For now, happy learning and best of luck!