Rules to Better Angular

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.

Figure: Download (link below) the Little Book of Angular

If you want to get started with Angular, go to the Angular Setup guide.

The prerequisites are:

1. Node.js and NPM (installed with Node.Js by default)
2. Angular CLI

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:

1. The look and feel of the site that your client is seeking
2. The range of components that will be required in the application
3. The developers' familiarity with the framework
4. The designers' familiarity with theming in the framework

You can improve your Angular development experience by using some of these recommended packages and modules.

We recommend you use NPM to include them.

A Service is a singleton object with a lifetime scope of the application. It is instantiated only once during the lifetime of an application. When combined with Angular’s Dependency Injection, a service can be injected into any component in an application via Constructor Injection. This makes a Service perfect for sharing reusable functionality throughout an application.

The Single Responsibility Principle is a well understood, and well-accepted tenet of good code design. It states that a class should do one thing, and do it well - The same applies to Components used with Frameworks such as Angular, React, Vue and Blazor.

When designing components, keep them small, modular and reusable. For example, if you have a menu, put it into a menu component, don’t put it in your app component.

Single page applications (SPAs) are getting more and more popular, and for good reason – a better and faster user experience, reduced server load and encourages good API separation.

But have you ever visited a website, thought “I’ll refresh that” and then got taken back to the home screen? Or tried to copy or bookmark the URL, only to find it’s just “/Home”? This happens when client-side routing hasn’t been implemented properly and is a big hit to a site’s usability.

Inevitably any well-engineered Angular application will need to send and receive data from a service of some sort – usually a Web API. A common mistake people make when doing this is using typescript’s built in any type for these services, which offers no type safety whatsoever.

Using DOM is fine, but manipulating DOM directly in your component is not. With the introduction of Angular, there has been a big push in ensuring the DOM stays out of your JavaScript code. It is designed in such a way that an existing Angular application can be ported to another target by simply replacing the template and template loader. Projects such as Angular React Native Renderer leverages this to allow native mobile app development in Angular.

State management in Angular can quickly become unmaintainable if done incorrectly. It is important to fully understand why you are implementing state management and then decide how you are going to do it.

Heads Up: For new teams creating their first SPA using Angular, it is recommend to limit the initial focus to learning Angular, TypeScript, and RxJs. Avoid including advanced state management patterns such as NgRx, unless someone on the team has prior experience. Start with a simple approach to state management and evolve your design once the team has mastered the basics. When your team is ready, be sure to investigate the multitude of patterns, supporting libraries, and best practices available for advanced state management. If you are developing an application that absolutely requires advanced state management then be sure to invest in some training and / or enlist the help of another developer with the right skillset.

NGRX is a powerful state management library for Angular applications. By implementing the Redux pattern, it provides a predictable and centralized approach to managing application state.

On large applications, it becomes very difficult to maintain state. The redux pattern helps resolve this issue.

NgRx is the redux pattern implemented for Angular. View on GitHub.

Debugging JavaScript application can be difficult. Having to console.log results can make for a slow and cumbersome development experience. There are five ways you can debug a JavaScript application without leaning on console.log() as your main tool.

There are 2 general types of components according its complexity: presentational and smart components. Presentational component is a component that is purely driven by its input data. Smart component on the other hand, is more complex - it can have business logic, dependencies, and also store its own state.