Angular脚手架系列：三、使用Angular CLI生成路由

最新推荐文章于 2024-08-11 16:18:11 发布

lxhjh

最新推荐文章于 2024-08-11 16:18:11 发布

阅读量1.5k

点赞数

分类专栏：学习资料 Angular 文章标签： angular

本文链接：https://blog.csdn.net/lxhjh/article/details/96467803

版权

本文详细介绍了如何使用Angular CLI生成和管理路由，包括为应用生成路由、处理多模块路由情况以及创建Guard。通过实例演示了生成module、组件、路由配置及引入模块的过程，并解释了相关步骤和文件的作用。

摘要由CSDN通过智能技术生成

一、为应用生成路由

二、针对一个应用里面有多个module的情况

1、再生成一个module, 并且带着路由module

2、在admin module里面, 再创建三个component:

3、修改app.module.ts，引入AdminModule

三、生成Gurad

我们知道使用 ng g module admin 将会生成admin module.
而使用 ng g m sales --routing 则将会生成sales和 sales-routing 两个module.
sales-routing里面就是路由的信息, 并且它被import到了sales module 里面.

一、为应用生成路由

先创建一个项目:

ng new my-app1 --style scss --skip-install --routing

可以看到生成了两个module.

看一下app-routing.module.ts:

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


const routes: Routes = [];

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

再看一下app.module.ts:

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 { }

已经把AppRoutingModule import了进来.
再看一下app.component.html:

<!--The content below is only a placeholder and can be replaced.-->
<div style="text-align:center">
  <h1>
    Welcome to {
  { title }}!
  </h1>
  <img width="300" alt="Angular Logo" src="data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHZpZXdCb3g9IjAgMCAyNTAgMjUwIj4KICAgIDxwYXRoIGZpbGw9IiNERDAwMzEiIGQ9Ik0xMjUgMzBMMzEuOSA2My4ybDE0LjIgMTIzLjFMMTI1IDIzMGw3OC45LTQzLjcgMTQuMi0xMjMuMXoiIC8+CiAgICA8cGF0aCBmaWxsPSIjQzMwMDJGIiBkPSJNMTI1IDMwdjIyLjItLjFWMjMwbDc4LjktNDMuNyAxNC4yLTEyMy4xTDEyNSAzMHoiIC8+CiAgICA8cGF0aCAgZmlsbD0