웹 프론트엔드 JS 튜토리얼 Angular 루트 모듈 및 기능 모듈에 대한 자세한 설명

Angular 루트 모듈 및 기능 모듈에 대한 자세한 설명

Mar 24, 2021 am 11:19 AM
angular

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

Angular 루트 모듈 및 기능 모듈에 대한 자세한 설명

Angular cli가 설치되어 있다는 것이 전제입니다. 다음 파일 생성의 대부분은 cliAngular cli,以下的大部分文件创建都是依赖于cli提供的指令

<span style="font-size: 20px;">Angular</span>中的特性模板和根模板(<span style="font-size: 20px;">AppModule</span>)

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

1、特性模板创建的指令ng g module article ,这里使用的是ng g module article --routing,可以生成一个article-routing.module.ts路由文件

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 &#39;@angular/core&#39;;
import { CommonModule } from &#39;@angular/common&#39;;

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


@NgModule({
  declarations: [ArticleListComponent, ArticleCreateComponent],
  imports: [
    CommonModule,
    ArticleRoutingModule
  ]
})
export class ArticleModule { }
로그인 후 복사

相关推荐:《angular教程

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

  • 例如,根路由设置的是article,这里设置的是list,访问地址需要使用article/listAngular 루트 모듈 및 기능 모듈에 대한 자세한 설명
import { NgModule } from &#39;@angular/core&#39;
import { Routes, RouterModule } from &#39;@angular/router&#39;

import { ArticleListComponent } from &#39;./article-list/article-list.component&#39;
import { ArticleCreateComponent } from &#39;./article-create/article-create.component&#39;
const routes: Routes = [
    {
        path: &#39;&#39;,
        children: [
            {
                path: &#39;&#39;,
                pathMatch:&#39;full&#39;,
                redirectTo: &#39;/article/list&#39;
            },
            {
                path: &#39;list&#39;,
                component: ArticleListComponent
            },
            {
                path: &#39;create&#39;,
                component: ArticleCreateComponent
            }
        ]
    }
]
@NgModule({
    imports: [RouterModule.forChild(routes)],
    exports: [RouterModule]
})
export class ArticleRoutingModule {}
로그인 후 복사

6、根模块app.mudles.ts,导入app-routing.module文件,可以配置全局的路由

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

import { AppComponent } from &#39;./app.component&#39;;
@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 &#39;@angular/core&#39;
import { Routes, RouterModule } from &#39;@angular/router&#39;
import { LoginComponent } from &#39;./login/login.component&#39;
const routes: Routes = [
    { path: &#39;login&#39;, component: LoginComponent },
    {
        path: &#39;article&#39;,
        loadChildren: () => import(&#39;./article/article.module&#39;).then((m) => m.ArticleModule)
    }
]

@NgModule({
    imports: [RouterModule.forRoot(routes)],
    exports: [RouterModule]
})
export class AppRoutingModule {}
로그인 후 복사

8、最后如果想要访问article下面的listcreate路由在浏览器输入地址article/list

  • article/list

    Angular 루트 모듈 및 기능 모듈에 대한 자세한 설명

  • 或者article/create

    에서 제공하는 지침에 의존합니다. code ><span style="font-size: 20px;">Angular</span>속성 템플릿 및 루트 템플릿( <span style="font-size: 20px;">AppModule</span>)Angular 루트 모듈 및 기능 모듈에 대한 자세한 설명

  • 차이점은 기능 템플릿은 애플리케이션을 나눌 수 있습니다. 제 개인적인 이해는 구성 요소화와 유사합니다

1. 기능 템플릿을 만드는 방법은 ng g 모듈 기사입니다. -routing을 사용하면 article-routing.module.ts 라우팅 파일2을 생성할 수 있습니다. 이때 CLIapp 폴더 아래에 article 폴더를 하나 더 만듭니다. article 폴더에는 article.module.ts 두 파일이 포함되어 있습니다. Article- Routing.module.ts

🎜3. ng g 컴포넌트를 사용하여 두 개의 컴포넌트를 생성하고 템플릿을 article로 지정하면 지정된 템플릿이 됩니다. 자동으로 article.modules.ts로 가져와 선언 배열에 등록합니다. 🎜참고: 선언에 등록된 구성 요소를 삭제하지 마세요. 그렇지 않으면 구성 요소에서 부분 지정이 발생합니다. Unable to use🎜

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

본 웹사이트의 성명
본 글의 내용은 네티즌들의 자발적인 기여로 작성되었으며, 저작권은 원저작자에게 있습니다. 본 사이트는 이에 상응하는 법적 책임을 지지 않습니다. 표절이나 침해가 의심되는 콘텐츠를 발견한 경우 admin@php.cn으로 문의하세요.

뜨거운 기사 태그

메모장++7.3.1

메모장++7.3.1

사용하기 쉬운 무료 코드 편집기

SublimeText3 중국어 버전

SublimeText3 중국어 버전

중국어 버전, 사용하기 매우 쉽습니다.

스튜디오 13.0.1 보내기

스튜디오 13.0.1 보내기

강력한 PHP 통합 개발 환경

드림위버 CS6

드림위버 CS6

시각적 웹 개발 도구

SublimeText3 Mac 버전

SublimeText3 Mac 버전

신 수준의 코드 편집 소프트웨어(SublimeText3)

Angular의 메타데이터와 데코레이터에 대해 이야기해 보겠습니다. Angular의 메타데이터와 데코레이터에 대해 이야기해 보겠습니다. Feb 28, 2022 am 11:10 AM

Angular의 메타데이터와 데코레이터에 대해 이야기해 보겠습니다.

Ubuntu 24.04에 Angular를 설치하는 방법 Ubuntu 24.04에 Angular를 설치하는 방법 Mar 23, 2024 pm 12:20 PM

Ubuntu 24.04에 Angular를 설치하는 방법

각도 학습 상태 관리자 NgRx에 대한 자세한 설명 각도 학습 상태 관리자 NgRx에 대한 자세한 설명 May 25, 2022 am 11:01 AM

각도 학습 상태 관리자 NgRx에 대한 자세한 설명

각도에서 monaco-editor를 사용하는 방법에 대한 간략한 분석 각도에서 monaco-editor를 사용하는 방법에 대한 간략한 분석 Oct 17, 2022 pm 08:04 PM

각도에서 monaco-editor를 사용하는 방법에 대한 간략한 분석

Angular의 서버 측 렌더링(SSR)을 탐색하는 기사 Angular의 서버 측 렌더링(SSR)을 탐색하는 기사 Dec 27, 2022 pm 07:24 PM

Angular의 서버 측 렌더링(SSR)을 탐색하는 기사

프로젝트가 너무 크면 어떻게 해야 하나요? Angular 프로젝트를 합리적으로 분할하는 방법은 무엇입니까? 프로젝트가 너무 크면 어떻게 해야 하나요? Angular 프로젝트를 합리적으로 분할하는 방법은 무엇입니까? Jul 26, 2022 pm 07:18 PM

프로젝트가 너무 크면 어떻게 해야 하나요? Angular 프로젝트를 합리적으로 분할하는 방법은 무엇입니까?

각도-날짜/시간 선택기 형식을 사용자 정의하는 방법에 대해 이야기해 보겠습니다. 각도-날짜/시간 선택기 형식을 사용자 정의하는 방법에 대해 이야기해 보겠습니다. Sep 08, 2022 pm 08:29 PM

각도-날짜/시간 선택기 형식을 사용자 정의하는 방법에 대해 이야기해 보겠습니다.

Angular + NG-ZORRO로 백엔드 시스템을 빠르게 개발 Angular + NG-ZORRO로 백엔드 시스템을 빠르게 개발 Apr 21, 2022 am 10:45 AM

Angular + NG-ZORRO로 백엔드 시스템을 빠르게 개발

See all articles