Angular is an open-source front-end framework developed by Google for creating dynamic, modern web applications. Introduced in 2009, Angular’s popularity is based on its eliminating unnecessary code and ensuring lighter and faster apps. Having rapidly evolved from AngularJS in 2010, more than 40% of software engineers today use the front-end framework for creating user interfaces.
Angular helps build interactive and dynamic single-page applications (SPAs) with its compelling features including templating, two-way binding, modularization, RESTful API handling, dependency injection, and AJAX handling. Designers can use HTML as a template language and even extend HTML syntax to easily convey the components of the application. You also don’t need to rely on third-party libraries to build dynamic applications with Angular. Using this framework in your projects, you can reap multiple benefits.
While Angular Documentation is the right place to get to know best practices, this document focuses on other good practices that are not covered in the framework’s documentation.
Use Angular CLI
Angular CLI is one of the most powerful accessibility tools available when developing apps with Angular. Angular CLI makes it easy to create an application and follows all the best practices! Angular CLI is a command-line interface tool that is used to initialize, develop, scaffold, maintain and even test and debug Angular applications. So instead of creating the files and folders manually, use Angular CLI to generate new components, directives, modules, services, and pipes
//Installing angular cli npm install -g @angular/cli //Check the version of angular ng --version
Maintain proper folder structure
Creating a folder structure is an important factor we should consider before initiating our project. Our folder structure will easily adapt to the new changes during development
-- app |-- modules |-- home |-- [+] components |-- [+] pages |-- home-routing.module.ts |-- home.module.ts |-- core |-- [+] authentication |-- [+] footer |-- [+] guards |-- [+] http |-- [+] interceptors |-- [+] mocks |-- [+] services |-- [+] header |-- core.module.ts |-- ensureModuleLoadedOnceGuard.ts |-- logger.service.ts | |-- shared |-- [+] components |-- [+] directives |-- [+] pipes |-- [+] models | |-- [+] configs |-- assets |-- scss |-- [+] partials |-- _base.scss |-- styles.scss
- Follow consistent Angular coding styles
Here are some sets of rules we need to follow to make our
project with the proper coding standard.
- Limit files to 400 Lines of code.
- Define small functions and limit them to no more than 75 lines.
- Have consistent names for all symbols. The recommended pattern is feature.type.ts.
If the values of the variables are intact, then declare it with ‘const’.
- Use dashes to separate words in the descriptive name and use dots to separate the descriptive name from the type.
- Names of properties and methods should always be in lower camel case.
- Always leave one empty line between imports and modules; such as third-party and application imports and third-party modules and custom modules.
Use ES6 Features
ECMAScript is constantly updated with new features and functionalities. Currently, we have ES6 which has lots of new features and functionalities which could also be utilized in Angular.
Here are a few ES6 Features:
Let and Const
Use trackBy along with ngFor
When using ngFor to loop over an array in templates, use it with a trackBy function which will return a unique identifier for each DOM item. When an array changes, Angular re-renders the whole DOM tree. But when you use trackBy, Angular will know which element has changed and will only make DOM changes only for that element
- Break down into small reusable components
This might be an extension of the Single responsibility principle. Large components are very difficult to debug, manage and test. If the component becomes large, break it down into more reusable smaller components to reduce duplication of the code, so that we can easily manage, maintain and debug with less effort.
Use Lazy Loading
Try to lazy load the modules in an Angular application whenever possible. Lazy loading will load something only when it is used. This will reduce the size of the application load initial time and improve the application boot time by not loading the unused modules.