Angular from Pothole to Pothole – Introduction to modules

Overview

In chapter 7, we introduce modules in Angular, understand usage scenarios, and learn how to organize our Angular applications with feature modules

Corresponding official document address:

• NgModule profile
• NgModules
• JavaScript modules vs. ngModules
• Start the application using the root module
• Commonly used modules
• Feature module

Contents

1. Angular from pit to pit – Getting Started with Angular usage
2. Angular From Pothole to Pothole – Component eating Guide
3. Angular From pothole to Pothole – Form controls overview
4. Angular From Pit to Pit – HTTP request Overview
5. Angular uses the entry point north for routing from pit to pit
6. Angular goes from pit to pit – Route guard watches
7. Angular from Pothole to Pothole – Introduction to modules

Knowledge Graph

Step by Step

Front-end modularization

Front-end modularization refers to organizing a group of related functions in the program together according to certain rules. The data and function realization inside the whole module are private, and some interfaces (methods) are exposed through export to communicate with other modules in the system

NgModule profile

In An Angular application, there is at least one NgModule, the application’s root AppModule, that you boot to start the project

Angular built-in libraries such as FormsModule and HttpClientModule are ngModules that focus on specific modules of the system by aggregating components, directives, pipes, services, or other code files into cohesive chunks

Common NgModule modules

JavaScript modules and NgModules

In JavaScript, each JS file is a module, and all objects defined in the file are subordinate to that module. With the export keyword, a module can declare some of these objects as public so that other JavaScript modules can access them using import statements

In the example code below, other javascript modules can directly use the exposed getRoles and getUserInfo methods by importing this JS file

function getRoles() {
    // ...
}

function getUserInfo() {
    // ...
}

export {
    getRoles,
    getUserInfo
}
Copy the code

An NgModule is a class with an @NgModule decorator that describes the module through function arguments, such as the CrisisModule created in the previous note, which defines the components we create in the feature module and any other modules we need to use

When using the @NgModule decorator, the following attributes are usually used to define a module

• Declarations: Components, directives, pipes in the current module

• Imports: Other NgModule modules required by the current module

• Exports: Other modules can use objects that the current module can declare

• Providers: Services exposed by the current module to other application modules in the current application

• Bootstrap: The root component that defines the entire application. It hosts all other views in the application and only exists in the root module

The root module of the application

The root module is the module that launches the Angular application and is conventionally named AppModule

After creating a new application using the Angular CLI, the default root module code is as follows: Decorates the AppModule class with the @NgModule decorator, defining the module’s attributes that tell Angular how to compile and launch the application

import { BrowserModule } from '@angular/platform-browser';
import { NgModule } from '@angular/core';

import { AppRoutingModule } from './app-routing.module';
import { AppComponent } from './app.component';

@NgModule({
  declarations: [
    AppComponent
  ],
  imports: [
    BrowserModule,
    AppRoutingModule
  ],
  providers: [],
  bootstrap: [AppComponent]
})
export class AppModule { }
Copy the code

declarations

The declarations array tells Angular which components belong to the current module. When new components are created, they need to be added to the declarations array. Each component can only be declared in one NgModule class, and Angular will report an error if you use an undeclared component

Similarly, custom directives and custom pipes used by the current module need to be declared in the declarations array

imports

The imports array indicates which modules need to be imported for the current module to work properly, such as BrowserModule used here, AppRoutingModule, or FormsModule used with two-way data binding, which represents a dependency of the current module

providers

The providers array defines services that the current module can provide to other modules in the current application. For example, a user module provides a service to obtain information about the current logged-in user. Since invocation is possible elsewhere in the application, it can be added to the providers array to provide access to other modules

bootstrap

Angular apps start by bootstrapping the root module. Since it involves building a tree of components to form the actual DOM, you need to add the root component to the bootstrap array as the root of the tree

Feature module

Feature modules are used to separate specific functions or code with related features from other code to focus on specific application requirements. A feature module works with the root module and other modules through the services it provides and the components, directives, and pipes it shares

In the previous chapter, a CrisisModule was defined to contain crisis-related function modules, which can be created using the Angular CLI command line

Create a feature module named XXX ng new Component XXXCopy the code

import { NgModule } from '@angular/core';
import { CommonModule } from '@angular/common';

import { CrisisRoutingModule } from './crisis-routing.module';

import { FormsModule } from '@angular/forms';

import { CrisisListComponent } from './crisis-list/crisis-list.component';
import { CrisisDetailComponent } from './crisis-detail/crisis-detail.component';


@NgModule({
  declarations: [
    CrisisListComponent,
    CrisisDetailComponent
  ],
  imports: [
    CommonModule,
    FormsModule,
    CrisisRoutingModule
  ]
})
export class CrisisModule { }
Copy the code

When created, to include the feature module in the application, imports need to be introduced in the root module, just as BrowserModule and AppRoutingModule do

By default, ngModules are acutely loaded, meaning that they are loaded as soon as the application loads, and this is true for all modules, whether or not they need to be used immediately. For large applications with many routes, consider using the lazy-loaded pattern. Lazy loading reduces the size of the initial package, thus reducing the program’s first load time

import { BrowserModule } from '@angular/platform-browser';
import { NgModule } from '@angular/core';

import { FormsModule } from '@angular/forms';

import { AppRoutingModule } from './app-routing.module';
import { AppComponent } from './app.component';

// Add a custom module
import { CrisisModule } from './crisis/crisis.module';

@NgModule({
  declarations: [
    AppComponent
  ],
  imports: [
    BrowserModule,
    FormsModule,
    CrisisModule, // Introduce custom modules
    AppRoutingModule
  ],
  providers: [],
  bootstrap: [AppComponent]
})
export class AppModule { }
Copy the code

Of the pit

Personal Profile: Born in 1996, born in a fourth-tier city in Anhui province, graduated from Top 10 million universities. .NET programmer, gunslinger, cat. It will begin in December 2016. NET programmer career, Microsoft. NET technology stalwart, aspired to be the cloud cat kid programming for Google the best. NET programmer. Personal blog: yuiter.com blog garden blog: www.cnblogs.com/danvic712