5 practical tips for managing Angular projects (summary sharing)

How to organize Angular projects? The following article compiles and shares 5 practical tips for managing Angular projects. I hope it will be helpful to everyone!

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. [Related tutorial recommendations: "angular tutorial"]

In such a high-speed release cycle, the code will 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.

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

modules in Angular is a single implementation of principles. 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 styles for all components to be created for a website, such as buttons, tabs, and modals

• Layout - Contains the files needed to define the site layout , such as header and footer

• Pages - Contains each specific page style

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

Create a new all.scss file in each folder that contains all assignments for that particular 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

Nested file structures are inherently better than placing all code files in one directory The flat file system is easier to navigate.

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: https://www.adservio.fr/post/how-to-organize-angular-project-top-5-tips

More programming related knowledge , please visit: programming video! !

The above is the detailed content of 5 practical tips for managing Angular projects (summary sharing). For more information, please follow other related articles on the PHP Chinese website!