Angular is everywhere.
There are two distinctive versions of Angular:
- AngularJS, this is v1, not getting any new features, and ends LTS support at the end of 2021
- Angular (or Angular 2+) which represents any version of Angular after 2.0 (which was a major rewrite).
This page is a set of rules and guidelines to get you up and running using Angular with the least pain possible.
Want to build an Angular application? Check SSW's Angular Consulting page.
A lot of these rules have originated from the Angular Superpowers Tour.
Angular and React have been the 2 dominant front-end technologies for the last few years. We have been running our Angular Superpowers course that entire time, and it is still amazing that every time we run the course, we sell out.
Of course, we update the course with every version, but it's still amazing because JavaScript frameworks have a reputation for being transitory. But these 2 frameworks have become entrenched in enterprises everywhere.
There are many frameworks available for building web applications, with developers often choosing their favorite tools. Some people like React, some prefer Vue, and many choose Angular.
Here are the best collection of resources for Angular.
If you want to get started with Angular, go to the Angular Setup guide.
The prerequisites are:
The best practice for creating an Angular project and components is to use the Angular CLI (command-line interface).
The Angular CLI is also used in the latest .NET Angular SPA template. Read Do you know that the ASP.NET Core SPA Template for Angular uses the Angular CLI?
When developing Angular or React, there are lots of choices for code editors. The best experience by far is to use Visual Studio Code.
Angular.io is a great place to get started learning Angular, and since the Angular CLI is now an official Angular project, these docs now include using the CLI from the beginning.
For .NET Developers only!
For many Angular solutions, a good practice is to keep your client-side and server-side code in separate projects.
- You get a clear separation of concerns
- You usually expect your server-side stack to outlive your client-side technologies
- You may plan to use your WebAPI with multiple user interfaces such as mobile or bots
- Easier to deploy your angular app to a CDN
Typescript is the best choice when writing Angular and React applications. Angular is even written in Typescript itself!
Before starting a software project and evaluating a new technology, it is important to know what the best practices are. The easiest way to get up and running is by looking at a sample application. Below is a list of sample applications that we’ve curated and given our seal of approval.
Building, bundling and compiling Angular applications can get complicated. You need great build tools.
The main contenders for the best UI framework for Angular are:
- Angular Material (Recommended) - https://material.angular.io/
- Bootstrap - https://getbootstrap.com
Making the choice of which to use will depend on several factors related to your project:
- The look and feel of the site that your client is seeking
- The range of components that will be required in the application
- The developers' familiarity with the framework
- The designers' familiarity with theming in the framework
- Do you know why Angular is great?
- Do you know the best learning resources for Angular?
- Tools - Do you know what Angular Tools to install for an Angular project?
- Tools - Do you know the best IDE for Angular and React?
- Do you know the right way to create your Angular project?
- Options - Do you know that the ASP.NET Core SPA Template for Angular uses the Angular CLI?
- Do you use Typescript?
- Do you know the best sample applications?
- Tools - Do you know the best Build Tool?
- Tools - Do you know the best UI framework for Angular?
- Tools - Do you know the best Packages and Modules to use with Angular?
- Practices - Do you use a Service to share reusable logic?
- Practices - Do you write small components?
- Practices - Do you use client-side routing?
- Practices - Do you generate strongly-typed interfaces for your DTOs?
- Practices - Do you avoid directly modifying the DOM from your components?
- Do you know when to use state management in Angular?
- Practices - Do you know to use NgRx on complex applications?
- Tools - Do you know the best tools to debug JavaScript?
- Practices - Do you know to separate your Angular components into container and presentational?
- Tools - Do you use Nx to manage your huge JavaScript solution?
- Do you use standalone components?
- Do you know how to handle errors in Angular?
- Do you properly separate concerns in components?
- Do you know when to use Reactive Forms vs Template-driven Forms in Angular?
- Do you know how to use Observables