• 技术文章 >web前端 >js教程

    详解Angular中的根模板和特性模板

    青灯夜游青灯夜游2021-06-04 11:28:07转载148
    本篇文章给大家介绍一下Angular10中的根模板和特性模板。有一定的参考价值,有需要的朋友可以参考一下,希望对大家有所帮助。

    前提是安装了 Angular cli,以下的大部分文件创建都是依赖于cli提供的指令

    Angular中的特性模板和根模板(AppModule)

    区别在于特性模板可以把应用划分,个人理解类似于组件化

    1、特性模板创建的指令ng g module article ,这里使用的是ng g module article --routing,可以生成一个article-routing.module.ts路由文件。【相关教程推荐:《angular教程》】

    2、此时CLI会在app文件夹下再创建一个文件夹articlearticle文件夹下包含两个文件article.module.tsarticle-routing.module.ts

    3、使用ng g component 生成两个组件,指定模板为article,指定的模板会自动导入到article.modules.ts中,并且注册到declarations数组,注意:不要删除declarations中注册的组件,不然会导致组件中部分指定无法使用

    4、article.module.ts 在 CLI 生成的特性模块中,在文件顶部有两个 JavaScript 的导入语句:第一个导入了 NgModule,它像根模块中一样让你能使用 @NgModule 装饰器;第二个导入了 CommonModule,它提供了很多像 ngIfngFor 这样的常用指令。 特性模块导入 CommonModule,而不是 BrowserModule,后者只应该在根模块中导入一次。 CommonModule 只包含常用指令的信息,比如 ngIfngFor,它们在大多数模板中都要用到,而 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 { }

    5、article-routing.module.ts路由地址嵌套配置,这里的地址设置是因为在app-routing.module根路由模块中已经设置了当前模块的路由前缀为article,因此下面的路由都只用直接设置即可,访问时带上根路由设置的路由前缀。

    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、根模块app.mudles.ts,导入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、根模块的路由app-routing.module.ts loadChildren是使用了惰性加载特性模块 默认情况下,NgModule都是急性加载的,也就是说它会在应用加载时尽快加载,所有模块都是如此,无论是否立即要用。对于带有很多路由的大型应用,考虑使用惰性加载 —— 一种按需加载 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、最后如果想要访问article下面的listcreate路由在浏览器输入地址article/list

    更多编程相关知识,请访问:编程教学!!

    以上就是详解Angular中的根模板和特性模板的详细内容,更多请关注php中文网其它相关文章!

    声明:本文转载于:csdn,如有侵犯,请联系admin@php.cn删除
    上一篇:聊聊Nodejs中的模块化和事件循环 下一篇:Math.max()不带参数会返回什么?为什么?
    第16期线上培训班

    相关文章推荐

    • 浅谈Angular中导入本地JSON文件的方法• 浅谈angular中控制器、服务和指令的关系• 浅谈angular控制器通信的4种方式• 详解angular中为HTML元素添加css类的几种方式• 浅谈angular指令中的4种设计模式

    全部评论我要评论

  • 取消发布评论发送
  • 1/1

    PHP中文网