Our curated Angular reference guide
Captain's log, stardate d350.y38/AB
Most of the frontend projects we have developed until now have used Angular. As a result, we accumulate (and share) a lot of Angular knowledge inside the company. Most recently, we've blogged about Comparing the Three Angular View Encapsulation Methods and Changing Detection Strategy in Angular, and we've even sent out a dedicated MarsBased newsletter about Angular.
First off, let's kick this off with some very basic guides and documentation to help you set you up with Angular.
The most important resource, and best so far, it is the official documentation: https://angular.io/docs.
In the official Angular documentation you can find:
Additionally, I recommend a course that doesn't require previous experience, and it includes TypeScript lessons: The Complete Guide to Angular 2. You probably will know the author, Maximilian Schwarzmüller, as he has more frontend courses.
We've got to say, though, that you will find some of these lessons to be irrelevant if you are an experienced developer, but the course covers the important concepts and adds some extra interesting lessons.
Ultimate Courses has a good collection of beginner/advanced courses. They are not free but the range of lessons and contents you can access is very broad: https://ultimatecourses.com/courses/angular.
In this section, I'd also like to recommend a book that is a great resource to start learning: the Rangle.io Angular book. https://angular-2-training-book.rangle.io/.
And how about the tools? Visual Studio Code is our favorite IDE. Its integration with Angular and TypeScript is awesome and the list of available plugins is nearly endless. Moreover, it has a great community and the development experience is gratifying. Go get it in the Visual Studio Code Official Website.
TypeScript will become your companion in this journey, so make sure you master it. In the resources listed in the previous section, you can have a good introduction to TypeScript but check the TypeScript official documentation. TypeScript shouldn't be underestimated, for it is an impressive language that will ease your way into Angular development.
Related to TypeScript, there is the TSLint tool, which is a must. TSLint helps you to write consistent and uniform code across the entire application.
We have created our own configuration based on our past experience, which we use it for every Angular project, the @marsbased/marstyle-angular library.
One of the most powerful and essential libraries you need to know is the RxJS library. RxJS enables you to use reactive programming: an asynchronous paradigm to handle events and data flow in Angular applications.
Some resources about reactive programming:
RxJS is a powerful tool, but it comes with a set of drawbacks, too. Don't forget to take a look to our blog post about Dealing with Memory Leaks in ReactiveX to dig deeper into more advanced notions.
Angular Material is another helpful library. It has a big catalog of components you can reuse in your projects, so you can create new Angular styled projects in little to no time. Check it out: https://material.angular.io/.
The Redux pattern had an impact in Angular too and, thus, some libraries have been created to implement it. Depending on the size and needs of the project you can choose between the following options:
Frontend testing is not an easy task, but there are several useful resources and libraries this process less painful (and, as some say, more enjoyable!). These are the tools we recommend:
Once you know the basics, you'll want to dig deeper into the advanced Angular patterns and resources. For this, there are a couple of pages we highly recommend:
Check out some other great Angular resources we have cherrypicked for you. They all review Angular key concepts and we've learnt a lot from them:
Are you missing any resource or interesting article on this list? Feel free to suggest any or create a PR in our equivalent repository The MarsBased Curated Angular Reference Guide on Github.
One annoying thing about RxJS is its memory leaks because of Observables and Subscriptions. Here's what we do to deal with them.
Read full article
How to change the detection strategy in Angular to improve performance and to adapt it to your project requirements.
Read full article
Since we started the company, we have been using Angular for most of our frontend development projects. In this blog post, we share how we encapsulate the views in Angular projects.
Read full article