Diario del capitán, fecha estelar d350.y38/AB

Among all the MarsBased devs, we share useful Angular resources, questions, experiences, tools, guides and tutorials to keep this curated Angular reference post up-to-date. Enjoy it!

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.

Getting started

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:

• Fundamentals: https://angular.io/guide/architecture.
• Tutorial: https://angular.io/tutorial.
• Style Guide: https://angular.io/guide/styleguide.
• Angular CLI: https://cli.angular.io/.

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.

Important libraries

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:

• Official documentation: https://rxjs-dev.firebaseapp.com/
• Angular RxJS tutorial: https://angular.io/guide/rx-library

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/.

State Management

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:

• NgRx: One of the most popular options. Check the official NgRx documentation and this blog post talking about when you can use it.
• Akita: This library is perfect for small projects. You can read the Akita official documentation and another guide of how to use Akita in Angular projects for further details.
• NGXS: Easier to understand than NgRx since it is more Angular-ish and has a lot less boilerplate. Read the Official NGXS documentation and this guide to help you get started: https://alligator.io/angular/ngxs/.

Testing

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:

• Jest: For unit tests mainly. Similar to jasmine, but with a big set of matchers and tools. Try the snapshot feature and you will stop navigating in object properties to write your asserts. Check the Jest official documentation.
• Cypress: e2e tests. Fun and easy to use. This library mimics user interaction with the application. Check the Cypress official documentation.

Deeper guides and more advanced articles

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:

• Alligator: They have high-quality Angular guides and articles, not only for beginners but also for experienced developers. Furthermore, they post about Vue, React or JavaScript in general. Check the Alligator website.
• Angular in Depth: Excellent Angular articles covering architecture, patterns, and libraries. Find all of this in the Angular in Depth blog.

Bonus!

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:

• Reddit Angular 2+: You will find interesting threads and some advanced questions in the Reddit community about Angular 2+.
• Angular University: Although it's not updated anymore, they have great articles and tutorials still useful for most people. Browse them at Angular University.
• Angular cheatsheet: One of my favorites when starting out with Angular development. The ultimate Angular cheatsheet.
• Egghead: Top developers give insightful and interesting talks on this platform. Find out more about Egghead.
• Adventures in Angular: If you are into podcasts, this is one of the best. Join me in following the Adventures in Angular podcast!
• Angular Awesome: If you really really REALLY want to know all the things Angular, check out this incredible repository with dozens of resources: Angular Awesome.

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.