[Summary] 5 best tips for managing Angular projects

How to organize Angular projects? The following article summarizes 5 top tips for managing Angular projects. I hope it will be helpful to you!

With the release of new features, Web apps are getting bigger and bigger. This kind of release change happens every day in a company's DevOps process.

In such a high-speed release cycle, code can quickly become unwieldy. Especially projects developed based on JavaScript, such as NextJS or Angular.

Here are our 5 best practices for managing Angular projects for maximum readability, maintainability, and scalability.

1. Adhere to the Single Responsibility Principle

Many single application cores are code bases with bloated classes. By their nature, these bloated programs are difficult to maintain. They are fragile in the sense that changing one line of code can have catastrophic effects on the entire program. single responsibility principle can prevent these problems.

The single responsibility principle means that a component has one and only one function.

Building applications using this approach results in a modular framework in which the application is strung together through these blocks of code.

Using this method can make the program more readable and better maintainable. It can also easily locate specified functions in the application. [Related tutorial recommendations: angular tutorial, Programming teaching]

In order to ensure that your code can meet this requirement, you can ask yourself a question: What does this code do? If your answer contains the keywords and, then you need to refactor your code into single-responsibility code.

Building Angular applications and extending them is an ongoing exercise. Over time, organizing your projects using the single responsibility principle will make your applications clean, readable, and maintainable.

2. Bind the code to the module

in Angular modules are implementations of the single principle. In Angular, each module represents a separate and independent functionality.

Angular provides several type modules to specify how to logically group or organize them.

Core

Core The module is a NgModule, which is used to instantiate the application and load the core functions for global use.

So, any singleton service should be implemented in the core module. Header, footer or navigation bar are modules of this type.

All services (singleton services) that have one and only one instance per application should be implemented in the core module. For example, authentication service or user service.

Feature

Feature modules represent the code that builds application functionality. For example, in an online shopping application, we would have the function of adding items to the shopping cart and a separate module for payment.

Shared

Shared modules consist of modules that can be combined to create new functionality. For example, the search function can be used for multiple functions in the platform.

Structure your code this way makes things easier to locate and increases the chances of code reusability.

3. Organize SCSS files

Style files can quickly become disorganized if you don’t follow a common structure. The general best practice pattern 7-1 pattern, which uses 7 folders and 1 files, is as follows:

• App - The main folder of the project

• Abstract - The abstract part, containing all variables, mixins and similar components

• Core - Contains layout, reset and boilerplate code for the entire site

• Components - Contains the styles for all the components to be created for a website, such as buttons, tabs and modalities

• Layout - Contains the styles needed to define the site layout Files such as headers and footers

• Pages - Contains styles for each specific page

• Vendors - This optional folder is suitable for the bootstrap framework used by the project, such as bootstrap

to contain all the plugins for that specific folder in each Create a new all.scss file in the folder.

4. Put private services into components

Many services are designed to run globally. Then, in some cases, a component requires a service. Traditional coding component practices recommend the single responsibility principle.

In this approach, services and components are written as separate projects.

But what happens if you consider removing the components of these services? What you end up with is dead code, which only makes the warehouse more cluttered. In this case, the best practice is to put the service inside the component.

This way, it is easier to maintain components and services.

5. Angular Best Practices for Simplifying Imports

A nested file structure is inherently easier than a flat file system that puts all code files in one directory navigation.

However, as the project approaches, the project's file structure can become quite complex. While this makes locating the code easier, it presents challenges when writing import statements.

When a directory structure starts to grow beyond three or four levels, import statements can become very long and difficult to read.

To solve this problem, we can configure the alias of the path in the tsconfig.json file. In this file, there is an array named compilerOptions. This is the path alias you configure in your application.

When the code is compiled, the path aliases defined in this array will be replaced with the real path. The value of each path is a key-value object containing the actual path and alias.

Building Angular applications and extending them is an ongoing exercise.

This article is a translation, in the form of free translation. Original address: How to Organize Angular Project | TOP 5 tips

For more programming-related knowledge, please visit: Programming Video! !

The above is the detailed content of [Summary] 5 best tips for managing Angular projects. For more information, please follow other related articles on the PHP Chinese website!