Explication détaillée du module racine angulaire et du module de fonctionnalités

Cet article vous présentera les modèles de fonctionnalités et les modèles racine dans Angular. Il a une certaine valeur de référence. Les amis dans le besoin peuvent s'y référer. J'espère qu'il sera utile à tout le monde.

Le principe est que Angular cli est installé. La plupart des créations de fichiers suivantes dépendent des instructions fournies par cli

<.> Modèles de fonctionnalités et modèles racine dans

<span style="font-size: 20px;">Angular</span> (AppModule<span style="font-size: 20px;">AppModule</span>)

La différence est que les modèles de fonctionnalités peuvent diviser les applications. Ma compréhension personnelle est similaire à la composantisation

1 Instructions pour créer des modèles de fonctionnalités ng g module article, ici ng g module article --routing est utilisé, qui peut. générer un article-routing.module.tsFichier de routage

2. À ce moment, CLI créera un autre dossier app sous le dossier article Le dossier article contient deux fichiers article.module.ts et article-routing.module.ts

3. Utilisez

pour générer deux composants, spécifiez le modèle comme ng g component, le modèle spécifié sera automatiquement importé dans article et enregistré dans le tableau article.modules.ts, declarations note. : Ne supprimez pas les composants enregistrés dans , sinon certains des composants spécifiés dans le composant deviendront inutilisables declarations

ng g description du composant
• , dans ng g component article/article-list -m=article Générer article composant de dossier article-list

• sous le dossier, générer ng g component article/article-create -m=article composant de dossier articlearticle-create

4 sous le

dossier ,

Dans le module de fonctionnalités généré par la CLI, il y a deux instructions d'importation JavaScript en haut du fichier : la première importations article.module.ts, qui permet d'utiliser le décorateur NgModule comme dans le module racine ; le second @NgModule est importé, qui fournit de nombreuses commandes courantes comme CommonModule et ngIf. Les modules de fonctionnalités importent ngFor, pas CommonModule, qui ne doit être importé qu'une seule fois dans le module racine. BrowserModule ne contient que des informations sur les directives couramment utilisées, telles que CommonModule et ngIf, qui sont utilisées dans la plupart des modèles, tandis que ngFor n'est utilisée qu'une seule fois pour la configuration de l'application effectuée par le navigateur. BrowserModule

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

import { ArticleRoutingModule } from './article-routing.module';
import { ArticleListComponent } from './article-list/article-list.component';
import { ArticleCreateComponent } from './article-create/article-create.component';


@NgModule({
  declarations: [ArticleListComponent, ArticleCreateComponent],
  imports: [
    CommonModule,
    ArticleRoutingModule
  ]
})
export class ArticleModule { }

Recommandations associées : "

tutoriel angulaire"

5,

, configuration imbriquée de l'adresse de routage, le paramètre d'adresse ici est dû au fait que dans la article-routing.module.ts route racine Le préfixe de routage du module actuel a été défini sur app-routing.module dans le module, de sorte que les routes suivantes ne peuvent être définies que directement lors de l'accès, apportez le préfixe de routage défini par la route racine. article

Par exemple, la route racine est définie sur
• , et le paramètre ici est article L'adresse d'accès doit être listarticle/list

import { NgModule } from '@angular/core'
import { Routes, RouterModule } from '@angular/router'

import { ArticleListComponent } from './article-list/article-list.component'
import { ArticleCreateComponent } from './article-create/article-create.component'
const routes: Routes = [
    {
        path: '',
        children: [
            {
                path: '',
                pathMatch:'full',
                redirectTo: '/article/list'
            },
            {
                path: 'list',
                component: ArticleListComponent
            },
            {
                path: 'create',
                component: ArticleCreateComponent
            }
        ]
    }
]
@NgModule({
    imports: [RouterModule.forChild(routes)],
    exports: [RouterModule]
})
export class ArticleRoutingModule {}

.

6. Module racine

, importez le fichier app.mudles.ts, vous pouvez configurer le routage global app-routing.module

import { HttpClientModule } from '@angular/common/http';
import { NgModule } from '@angular/core';
import { FormsModule } from '@angular/forms';
import { BrowserModule } from '@angular/platform-browser';
import { AppRoutingModule } from './app-routing.module'

import { AppComponent } from './app.component';
@NgModule({
  declarations: [
    AppComponent
  ],
  imports: [
    BrowserModule,
    FormsModule,
    HttpClientModule,
    AppRoutingModule
  ],
  providers: [],
  bootstrap: [AppComponent]
})
export class AppModule { }

7. Le routage du module racine

app-routing.module.ts utilise le module de fonctionnalité de chargement paresseux par défaut, loadChildren Ils sont tous chargés avec impatience, ce qui signifie qu'ils sont chargés dès le chargement de l'application. Cela est vrai pour tous les modules, qu'ils soient nécessaires immédiatement ou non. Pour les applications plus volumineuses comportant de nombreux itinéraires, envisagez d'utiliser le chargement différé, un modèle de chargement à la demande NgModule. Le chargement différé réduit la taille initiale du bundle et donc le temps de chargement. NgModule

import { NgModule } from '@angular/core'
import { Routes, RouterModule } from '@angular/router'
import { LoginComponent } from './login/login.component'
const routes: Routes = [
    { path: 'login', component: LoginComponent },
    {
        path: 'article',
        loadChildren: () => import('./article/article.module').then((m) => m.ArticleModule)
    }
]

@NgModule({
    imports: [RouterModule.forRoot(routes)],
    exports: [RouterModule]
})
export class AppRoutingModule {}

8. Enfin, si vous souhaitez accéder aux itinéraires

et article ci-dessous list, saisissez l'adresse dans le navigateur createarticle/list

• article/list

  

ou

• article/create

  

Plus d'informations sur la programmation Pour en savoir plus, veuillez visiter :

Vidéos de programmation

 ! !

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!