Modules
Angular uses modules to organize code. They should not be confused with Typescript/JavaScript modules (see Typescript topic). Angular modules are a collection of components, directives and pipes. It also uses import and export elements to specify which modules should be included in this module and what interfaces (exports) are provided to other modules.
Every Angular application has at least one module called the root module. It specifies the components that should be launched using the bootstrap element when the application starts. For example, here is the root module (found in app.module.ts) for the simple application we discussed above.
Modules in Angular are a mechanism for organizing and managing application code. Modules help encapsulate related functionality and code into a reusable unit that can be shared and used across different parts of the application.
There are two types of modules in Angular: Root Module and Feature Module.
1. Root Module: The root module is the entry point of the Angular application. It is usually a class decorated with the @NgModule decorator, which accepts a metadata object for configuring the module's properties and dependencies. The root module is responsible for bootstrapping the application, declaring the components, directives, pipes, and services the application requires.
2. Feature Module: Feature module is used to organize and manage application functions. A feature module typically contains a set of related components, directives, pipes, services, and other classes that work together to implement a specific functionality. Feature modules can be imported by other modules and share functionality by exporting their classes.
In a module, you can use the @NgModule decorator to define the module's metadata. This decorator accepts a metadata object that is used to configure the module's properties and dependencies. A module's metadata object can contain the following properties:
- declarations: declare components, instructions and pipes in this module.
- imports: A list of other modules to import in order to use the functions they provide in this module.
- exports: Export components, instructions and pipes in this module so that other modules can use them.
- providers: service providers registered in this module.
- bootstrap: used to define the root component of the root module.
In addition to the above properties, modules can also contain other configuration items to define the behavior and characteristics of the module.
By using modules, application code can be decomposed into multiple functional modules, improving the maintainability and reusability of the code. Each module can be developed, tested, and maintained independently, and can be easily added or removed when needed. At the same time, modules can also help development teams conduct collaborative development and improve development efficiency.
import { NgModule } from '@angular/core';
import { BrowserModule } from '@angular/platform-browser';
import { AppComponent } from './app.component';
@NgModule({
imports: [ BrowserModule ],
declarations: [ AppComponent ],
bootstrap: [ AppComponent ]
})
export class AppModule { }
There are a few things to note about this statement:
- Latest versions of Angular ng commands automatically add most system imports, so your code may differ. The following points apply to the basic code above.
- There are two different types of imports. The first three lines specify Typescript import statements to import Typescript code to allow the module to be declared. The imports element in the JavaScript object is an Angular module import. In this case it only imports the code of the BrowserModule imported using the above Typescript import.
- The @NgModule decorator is used to add metadata to the subsequent AppModule class declaration. These are Angular's "modules".
- The declarations element of the JavaScript object specifies the components declared in this module. In Angular, these components are called views. Components are a type of view. We will see other types later, such as pipes and directives. In this case it is the AppComponent component described in the Components section above.
- The bootstrap element indicates that AppComponent is the component that should be initialized when the application first loads. Most applications will only have a bootstrap component.
- In this example, the AppModule class is empty, but in a more complex case it would contain variables. The coding convention is to name the component xxxModule and place its definition in a file called xxx.module.ts, where xxx is the name of the module.
Please note the above explanation. Components and modules are not the same concept. Components are Angular modules that manage an area on the screen. Components always have selectors and template elements, as we discussed in the previous section. This means that a component is a special type of module. We will encounter other types of modules later.
The other two elements given to the @NgModule decorator by JavaScript objects are insertable. We can specify exports and services. There are no exports in the above example because the application has no other modules that need to import this module. There are also no services in this application. We will see examples of both of these later.
In the previous activity, we intentionally did not implement markup because it required importing the Angular forms module. The code below shows how to import the Angular form module in our app.module.ts file to allow us to use Angular code in markup. Other Angular modules also need to be imported in exactly the same way.
import { NgModule } from '@angular/core';
import { BrowserModule } from '@angular/platform-browser';
import { FormsModule } from '@angular/forms';
import { AppComponent } from './app.component';
@NgModule({
imports: [ BrowserModule, FormsModule ],
declarations: [ AppComponent ],
bootstrap: [ AppComponent ]
})
export class AppModule { }
Note again that we have to specify the imported module in two places. The first is the Typescript import, then the Angular import, both in bold.
