Rules to Better AngularJS

It is a good idea to upgrade your AngularJS application to the latest version of Angular (currently Angular 14 as of December 2022).

Following this rule will ensure the right NuGet packages and Visual Studio Extensions are included in your projects to help speed up your development, follow best practices and have the team using the same processes.

Angular 1.x directives are awesome and they help you reuse your code base by being able to drop directives (aka reuasable HTML elements) into several pages without having to duplicate your code base.

Angular uses parameter names to determine which dependencies to inject. When you minify your angular code, the parameter names are changed, so you must name your dependencies to ensure they work correctly.

Search Engine Optimisation (SEO) with a Single Page Application (SPA) needs consideration like any other Framework to ensure it is SEO friendly. Because AngularJS manages your routing and URLs it is important to be aware of the differences in making an AngularJS SPA SEO friendly.

To keep a good separation of concerns between your AngularJS controllers and your data service layers you should always call an AngularJS service or factory from your Kendo datasource logic.

Many demonstrations show a hard coded string in your Angular controllers calling your API but this means you will be making data API calls from your controllers, which is bad for several reasons:

1. You will end up with many API data calls from different controllers versus all being in your one location
2. Your controllers will be harder to unit test
3. If you want to call the same API endpoint somewhere else in your application you now have two place with this hard coded string, that might need to change in the future
4. If you keep all your data calls in one place your code will be easier to read and you can share business logic for making the API calls within your Angular service or factory, like a common error handling message for failed API calls
5. Finally you can perform actions while the promise is being resolved, like show a spinner animation or log out a message to the user

Here are the best collection of resources for AngularJS.

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 working with Node.js, choosing the right package manager can significantly impact your project's performance, consistency, and ease of use. While npm is the default, developers often seek alternatives like Yarn, Bun, or pnpm for various advantages. But which one should you use?