>  기사  >  웹 프론트엔드  >  Angular의 루트 템플릿 및 속성 템플릿에 대한 자세한 설명

Angular의 루트 템플릿 및 속성 템플릿에 대한 자세한 설명

青灯夜游
青灯夜游앞으로
2021-06-01 11:19:381969검색

이 글에서는 Angular10의 루트 템플릿과 기능 템플릿을 소개합니다. 도움이 필요한 친구들이 모두 참고할 수 있기를 바랍니다.

Angular의 루트 템플릿 및 속성 템플릿에 대한 자세한 설명

다음 파일 생성의 대부분은 cliAngular 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中注册的组件,不然会导致组件中部分指定无法使用

  • ng g component 说明
  • ng g component article/article-list -m=article ,在article文件夹下生成article-list文件夹组件
  • ng g component article/article-create -m=article ,在article文件夹下生成article-create文件夹组件

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,因此下面的路由都只用直接设置即可,访问时带上根路由设置的路由前缀。

  • 例如,根路由设置的是article,这里设置的是list,访问地址需要使用article/list
  • Angular의 루트 템플릿 및 속성 템플릿에 대한 자세한 설명
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

  • article/listAngular의 루트 템플릿 및 속성 템플릿에 대한 자세한 설명
  • 或者article/create에서 제공하는 지침에 따라 달라집니다. blockquote >


    Angular

    Angular의 루트 템플릿 및 속성 템플릿에 대한 자세한 설명
  • 에서 기능 템플릿과 루트 템플릿(AppModule)의 차이점은 기능 템플릿이 애플리케이션을 분할할 수 있다는 점입니다. 구성 요소화

1 및 기능 템플릿 생성 ng g 모듈 문서와 유사한 지침을 이해합니다. 여기서는 ng g 모듈 문서 --routing을 사용합니다. article-routing.module.ts 라우팅 파일을 생성할 수 있습니다. [관련 튜토리얼 추천: "angular tutorial"]

🎜2. 이때 CLIapp 아래에 또 다른 article 폴더를 생성합니다. 폴더 코드>, article 폴더에는 article.module.tsarticle-routing.module.ts🎜🎜라는 두 개의 파일이 포함되어 있습니다. code>ng g 구성 요소는 두 개의 구성 요소를 생성합니다. 지정된 템플릿은 article.modules.ts로 자동으로 가져오고 등록됩니다. 🎜참고: 선언에 등록된 구성요소를 삭제하지 마세요. 그렇지 않으면 구성요소의 일부 사양을 사용할 수 없게 됩니다🎜

위 내용은 Angular의 루트 템플릿 및 속성 템플릿에 대한 자세한 설명의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!

성명:
이 기사는 csdn.net에서 복제됩니다. 침해가 있는 경우 admin@php.cn으로 문의하시기 바랍니다. 삭제