Application Structuring and Best Practices in Angular

We have plenty of web applications with continuous releases and feature improvements. With such feature velocity, it would become a challenge for the team to accomplish things the best way. Angular, developed by Google as a rewrite of AngularJS, is the most powerful framework for building dynamic programming structures. The main building blocks of Angular are modules, components, metadata, templates, data binding, services, directives, and dependency injection.

Angular CLI

The Angular CLI is a command-line interface tool that is used to initialize, develop, scaffold, maintain, and even test and debug Angular applications.

● ng new – To create an application that already works, right out of the box.
● ng generate – To Generate components, routes, services and pipes with a simple command with test shells.
● ng serve – To test your app locally while developing.
● ng test – To run your unit tests or end-to-end tests
● ng lint – To make your code shine
● ng add @angular/pwa – To set up the Angular service worker

Module Structure

The modular structure of Angular arranges the code into different modules so all services and components are divided into separate groups when you construct them. 
In Angular coding, you can separate functionality into reusable pieces of code.

Files and Folders

Naming conventions are hugely important to maintainability and readability and help provide a consistent way to find the content at a single glance.

➔ File naming

The Angular official style guide is pretty straightforward in providing the best way to name the files that contain the building blocks of Angular.

● Components should be suffixed with .component.ts;
● Directives should be suffixed with .directive.ts;
● Pipes should be suffixed with .pipe.ts;
● Guards should be suffixed with .guard.ts;
● Interceptors should be suffixed with .interceptor.ts;
● Modules should be suffixed with .module.ts;

Routing Modules should be suffixed with -routing.module.ts;Other files should be named according to what they do, for example, a file containing utility filter functions should be stored in a file named filtering.ts inside a utils folder at the src level.

➔ Class Names

When we add names to classes, we should use the upper camel case style with the added suffix that represents the type of our file: DatepickerDirective, HomeComponent, AuthService

Angular Coding Practices

Coding standards are the ways of programming the software. In Angular applications, certain coding styles can be followed for the best user experience.
Here’s some set of rules that we need to follow to make our project comply with the standard Angular style guide:

● Per file, the code must not exceed 400 lines limit
● Per function, the code must not exceed 75 lines
● Utilize custom prefix to prevent element name collisions with components in other apps and with native HTML elements
● If the values of the variables are intact, declare it with const
● Names of properties and methods should 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
● We shouldn’t name our interfaces with the starting capital I letter as we do in some programming languages

If you want to build your own web shop or have questions relating to e-commerce development platforms or apps, read our blog posts for Shopify and Shopware. Our dedicated outsourcing team can be your collaborator in e-commerce.