Contenuti del Corso
Introduction to Angular
Introduction to Angular
Modular Architecture in Angular
This chapter introduces the modular architecture of Angular and compares it to the standalone components approach. The goal is to clarify how traditional Angular applications are structured, with each feature encapsulated in its own module.
To safely experiment with modules, a copy of the existing project should be created. These changes are for practice only and will not affect the original project. In later chapters, the focus will return to building applications using standalone components.
Creating a Module for the TaskComponent
This step involves creating a module for the TaskComponent. The module will declare the component, a related directive, and a pipe.
To generate a module in Angular, there's a dedicated CLI command:
Now that the file task.module.ts has been created inside the task folder, we can implement it
task-module
@NgModule({ declarations: [ TaskComponent, HighlightOnCompleteDirective, FormatTitlePipe ], imports: [CommonModule], exports: [ TaskComponent ] }) export class TaskModule {}
The exports array in @NgModule specifies which components, directives, or pipes should be available to other modules that import this module. In this case, TaskComponent can be used outside of the TaskModule.
This module declares the TaskComponent, its associated directive, and a custom pipe. It imports CommonModule to enable structural directives like *ngIf and *ngFor. The TaskComponent is exported so it can be reused in other modules.
Creating a Module for the TaskListComponent
In this step, a module will be created for the TaskListComponent. Create a new module in the task-list folder:
Now that the file task-list.module.ts has been created inside the task-list folder, we can implement it
task-list
@NgModule({ declarations: [TaskListComponent], imports: [CommonModule, TaskModule, FormsModule], exports: [TaskListComponent] }) export class TaskListModule {}
This module declares TaskListComponent, responsible for rendering a list of tasks. It imports TaskModule to access the task component and FormsModule for features like task creation forms. The component is exported so it can be used in other modules.
Creating the Root Module
In this step, we will define the main module that acts as the starting point of the entire application.
Every Angular application needs a root module that tells Angular how to launch the app. This module brings together all the necessary pieces: built-in Angular features, our custom modules, and the root component.
Create a new module in the app folder:
The --flat flag tells Angular CLI to create the module file without generating a separate folder.
app-module
@NgModule({ declarations: [AppComponent], imports: [ BrowserModule, TaskListModule ], bootstrap: [AppComponent] }) export class AppModule {}
This module serves as the entry point of the app. It imports BrowserModule, which is necessary for running Angular in the browser, and the TaskListModule, which contains the main functionality for managing tasks. The AppComponent is set as the root component to bootstrap the application.
Configuring the Entry Point
This step updates the app's entry point to launch using the root module instead of a standalone component.
Open main.ts and replace its content with the following:
main
platformBrowserDynamic().bootstrapModule(AppModule) .catch(err => console.error(err));
This code boots the app using AppModule. This setup illustrates the modular architecture: the application is split into modules, each encapsulating its components, directives, pipes, services, and more.
Modular architecture in Angular helps organize the application into logical blocks, making the code scalable, well-structured, and reusable.
Grazie per i tuoi commenti!
