Hello guys!

I'm new in Angular and one of the confusion to me is to understand the better way to program. I usually work in the back-end, and I'm not sure if the best practice in the back is also the best to the front.

Because of that, I listed some usual points regarding the best practice using Angular which helped me to start this new development track. The detail about how to use each one of them you can access the links.

List of Some Best Practices

Angular Guide

  • Put the logic in the ts file. Use the HTML only for the presentation. [Ref]
  • Add complex logic in a service [Ref]
  • Separate template and CSS in different files and reference them in '\*.ts' [Ref]
  • Small methods are more legible and easier for maintenance. Who much speak get in conflict by themselves. [Ref]
  • Reuse what is possible [Ref]
  • If the file names have more then one word, then it should be separated by dash (-)[Ref]
  • Create the structure based on the feature [Ref]
  • Use 'Shared Module' if you have many components, directives or pipes used in many parts of the project. [Ref]
  • Choice lazy load to make your application lighter [Ref]
  • Use the Single Responsibility principle to everything in Angular [Ref]
  • Use @Input and @Output decorators instead of @Directives and @Component properties [Ref]
  • Use @Injectable() decorator instead of the @Inject parameter decorator [Ref]
  • Use directives to standardized a behaviour [Ref]

Code Structure [1] [2] [3] [4] [5][6] [7]

  • Use trackBy instead ngFor - Update the DOM only to the element related
  • Use const instead of  let if the value will not change
  • Use Pipeable operators when you are using RxJs
  • Use types to the declarations and avoid the use of 'any'. It makes the results more predictable.
  • Choice chaining operators instead of a subscription inside other
  • Create small components reusable, avoiding internal logic.
  • If a string has a limited value, specify that.
  • Use AngularCLI to be more productive
  • The Class name should you camel-case style
  • Copy arrays or objects using the immutability
  • Use index.js 
  • Write a limit of 400 lines by file
  • A function must have a limit of 75 lines
  • Use Interface
  • Add one empty line between imports and module such as third party and application imports and third-party module and custom module

Conclusion

This list of best practices gives us a good idea about the way to follow in the development. More detail about the item you need to use go to the links and see the examples.

Good coding!!!