Application de routeur de notes d'étude angulaire 5.x

Cet article présente principalement l'application Router des notes d'étude Angular 5.x. L'éditeur pense qu'elle est plutôt bonne. Maintenant, je vais la partager avec vous et la donner comme référence. Suivons l'éditeur et jetons un coup d'œil.

Préface :

Le saut entre les vues de l'application angulaire dépend du routeur (routage). Routeur

Explication avec exemples

Les résultats d'exécution sont les suivants. Trois barres de navigation sont configurées : Accueil, À propos et Tableau de bord. Cliquez sur différentes barres de navigation pour accéder à la page correspondante :

Créer 3 composants

1. ng g c home

2. ng g c à propos

3. ng g c tableau de bord

Routage et configuration

(1) **Présentez le routeur angulaire **

Lors de l'utilisation du routeur angulaire, vous devez introduire le module RouterModule, comme suit :

// app.module.ts
import { RouterModule } from '@angular/router';
imports: [
 BrowserModule, RouterModule
],

(2) Configuration du routage

Rappelez-vous qui gère le composant Oui, il est géré par le module. Par conséquent, introduisez le composant nouvellement créé dans app.moudle. Comme suit :

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

import { appRoutes } from './routerConfig';

import { AppComponent } from './app.component';
import { AboutComponent } from './components/about/about.component';
import { HomeComponent } from './components/home/home.component';
import { DashboardComponent } from './components/dashboard/dashboard.component';

Astuce : Faites attention au chemin du composant Pour faciliter la gestion, nous avons déplacé le composant nouvellement créé vers le dossier des composants. .

Créer le fichier de configuration du routeur

Dans le répertoire de l'application, créez le fichier routerConfig.ts. Le code est le suivant :

import { Routes } from '@angular/router';
import { HomeComponent } from './components/home/home.component';
import { AboutComponent } from './components/about/about.component';
import { DashboardComponent } from './components/dashboard/dashboard.component';

export const appRoutes: Routes = [
 { path: 'home', 
 component: HomeComponent 
 },
 {
 path: 'about',
 component: AboutComponent
 },
 { path: 'dashboard',
 component: DashboardComponent
 }
];

Remarque : Angular 2.X ou supérieur commence à utiliser TypeScript pour écrire du code au lieu de JavaScript, donc le suffixe de le fichier C'est : ts au lieu de js

Ce fichier routerConfigue, comment l'appeler ? Il doit être chargé dans app.module.ts car app.moudle.ts est l'entrée de l'ensemble de l'application Angular.

// app.module.ts
import { appRoutes } from './routerConfig';
imports: [
 BrowserModule,
 RouterModule.forRoot(appRoutes)
],

Déclarer la prise du routeur

Dans le fichier app.component.html, ajoutez le code :

<p style="text-align:center">
 <h1>
  {{title}}!!
 </h1>
 <nav>
  <a routerLink="home" routerLinkActive="active">Home</a>
  <a routerLink="about">About</a>
  <a routerLink="dashboard">Dashboard</a>
 </nav>
 <router-outlet></router-outlet>
 </p>

Exécuter

Entrez le chemin où se trouve le projet et exécutez

ng serve --open

Une fois le webpack compilé avec succès, dans la barre d'adresse du navigateur, saisissez : http://localhost:4200

pour voir cet article Démarrage résultats.

Concernant Router, changez la méthode d'écriture :

Dans le fichier app.moudle.ts, le code est le suivant :

 imports: [
  BrowserModule,
  RouterModule.forRoot(
  [
   { path: 'home', 
   component: HomeComponent 
   },
   {
   path: 'about',
   component: AboutComponent
   },
   {
   path: 'dashboard',
   component: DashboardComponent
   }
  ]
  )
 ],

De cette façon, il n'est pas nécessaire de créer un fichier routerConfigure.ts séparé.

Résumé

Depuis l'introduction de l'orientation composant (composant), la gestion du routage est devenue beaucoup plus pratique qu'AngularJS (1.X).

Autre optimisation :

Peut-être avez-vous remarqué que lors de l'accès à http://localhost:4200, son chemin devrait être "/", et nous devrions définir ce chemin par défaut.

{
   path: '',
   redirectTo:'/home',
   pathMatch: 'full'
   },

Ce qui précède est ce que j'ai compilé pour vous. J'espère qu'il vous sera utile à l'avenir.

Articles connexes :

Framework AJAX pour apprendre AJAX à partir de zéro

Apprendre AJAX à partir de zéro et créer un formulaire de vérification automatique

Ajax obtient une solution de traitement du cache des demandes

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!