Top 10 Angular Best Practices

Angular JS is an open-source front-end Javascript programming language built by Google to develop applications. It was launched initially in the year 2010 whereas its subsequent versions were numbered Angular 2 and onwards. This framework successfully gained support from the community of developers as Angular can make your static HTML pages more interactive. This has given immediate popularity to the angular development framework. 

However, with the launch of new development frameworks, the limitations of the angular were highlighted the most. It made Google completely rewrite the framework and launch it again. This time it uses Typescript as the new language which solves all the issues regarding the previous version. 

The decision of Google to shift from Javascript to Typescript paid off. This not only became helpful in avoiding all the setbacks of javascript but it also introduces some on-demand features for web developers. As a result, nowadays, approximately 40% of front-end developers use Angular.

Angular best practices and security tips 

Given the very wide popularity of the angular framework, I decided to do some research and come up with Angular development best practices for the framework that can help the community of the developers. 

1. Use Angular CLI

One of the most powerful accessibility tools available for app development is Angular CLI. You can initialize, develop, scaffold, maintain, test, and debug your angular apps with this command-line interface tool of the angular framework. You can also build new components, directives, modules, services, and pipes using Angular CLI instead of creating all the files and folders manually. 

# Install Angular CLI

npm install -g @angular/cli

# Check Angular CLI version

ng version

2. Make Use of trackBy 

The built-in angular directive -ngFor is used to create various templates as needed for each item in the collection. 

< ul > 

    < li *ngFor=”let item of items;”>{{item.id}}< /li > 

< /ul >

But the real problem with ngFor is that we need to change the iterative data as per the requirements. The problem will happen as the angular framework doesn’t keep any record of the iterated data. Even if the data is removed or added, the framework is oblivious to that too. 

If you want to implement this then you need to release all the DOM elements related to the collection and add them again to the angular framework. While you are dealing with the massive collection of data, DOM manipulations can be very expensive. And that’s where trackBy comes in. It helps you avoid costly DOM manipulation. It can also provide a process that can avoid DOM altogether in which a  unique identifier is given to each item of the collections. And this makes the use of trackBy one of the best angular practices for web app development. 

@Component({

  selector: ‘demo-app’,

  template: `

    < ul >

      < li *ngFor=”let item of items;trackBy: trackByFunc”>{{item.id}}< /li >

    < /ul >

< button (click)=”getAllItems()”>Click to Refresh< /button >

  `,

})

export class DemoApp {

  constructor() {

    this.items = [{id: 10}, {id: 20}, {id: 30}];

  }

  getAllItems() {

    this.items = this.getAllItemsFromServer();

  }

  getAllItemsFromServer() {

    return [{id: 10}, {id: 20}, {id: 30}, {id: 40}];

  }

  trackByFunc(i, item) {

    return item.id;  // or i

  }

}

Original Article Link to read more

Article source: https://article-realm.com/article/Health-Fitness/26273-Top-10-Angular-Best-Practices.html