Angular의 ngModule이 무엇인지에 대한 간략한 분석

ngModule이 무엇인가요? 이번 글은 angular 구문에 대한 간략한 이해를 제공하고 Angular의 ngModule을 소개하는 글이 될 것입니다.

Angular10 튜토리얼로서 제가 이해한 바에 따르면 VUE에 비해 각도는 모듈화되어 코드 구조가 더 명확해 보입니다. 그래서 이번 섹션에서는 ngModule에 대한 Angle 문법과 이해를 간략하게 소개하겠습니다. [관련 튜토리얼 추천 : "angular tutorial"]

먼저 Angular 모듈(ngModule)이란 무엇인가요?

제가 이해한 바는 사실 @NgModule이 장식한 평범한 클래스이며 특별한 것은 없습니다.

그럼 질문은 @NgModule이 무엇인가요?

먼저 src/app/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(元数据)
@NgModule({
  declarations: [
    AppComponent
  ],
  imports: [
    BrowserModule,
    AppRoutingModule
  ],
  providers: [],
  bootstrap: [AppComponent]
})
export class AppModule { } // 模块名AppModule

@NgModule은 Angular에 이 애플리케이션을 컴파일하고 시작하는 방법을 알려주는 메타데이터 개체를 가져옵니다. (메타데이터는 위의 구성 항목보다 많지만 먼저 이에 대해 이야기하겠습니다.)

선언 배열

단어 자체는 "공지, 선언"을 의미하며 여기서는 이 모듈의 종속성입니다. 모듈이 의존할 수 있는 일부 구성요소, 지시문 및 파이프라인을 포함합니다. 가져오기 규칙:

• 사용하려면 먼저 가져와야 합니다.
• 구성 요소, 명령어 또는 파이프는 하나의 모듈에서만 가져오거나 선언할 수 있습니다.
• 선언의 구성 요소는 기본적으로 현재 모듈에서만 사용할 수 있습니다. 다른 모듈에서 사용하려면 내보내야 합니다.

imports array

imports 배열은 @NgModule 데코레이터에만 표시됩니다. 모듈이 제대로 작동하려면 자체 종속성(선언) 외에도 다른 모듈에서 내보낸 종속성이 필요할 수도 있습니다. 각도 모듈인 한, 사용자 정의 모듈(예: AppRoutingModule)과 같은 가져오기 배열로 가져올 수 있으며, 타사 또는 ng 내장(@angular/**)이 일련의 서비스를 제공할 수 있습니다

providers array

bootstrap array

어레이의 각 comComponent는 구성 요소 트리(루트 구성 요소)의 루트로 사용됩니다. 시작 프로세스 중에 내부 구성 요소가 하나씩 구문 분석됩니다. 브라우저의 DOM 중간에 삽입됩니다.

하지만 일반적으로 내부에는 AppComponent 하나만 있습니다.

Angular 구성요소는 어떻습니까?

먼저 앱 컴포넌트를 보면 src/app/app.comComponent.ts의 기본 코드: src/app/app.component.ts的默认代码：

import { Component } from '@angular/core';

@Component({
  selector: 'app-root',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.scss']
})
export class AppComponent {// 组件名AppComponent
  title = 'hero';
}

可以看出，还是常规操作：引入–>配置–>导出

selector：

顾名思义，就是个选择器，一个能通过原生JS选中的选择器而已（必填配置）。

templateUrl：

Angular 组件模板文件的 URL。如果提供了它，就不要再用 template来提供内联模板了（templateUrl和template

import { Component } from '@angular/core';
@Component({
  selector: 'app-root',
  template: `
    <h1>{{title}}</h1>
    <h2>My favorite hero is: {{myHero}}</h2>
    `,
  styles: [`h1 { color: red }`]
})
export class AppComponent { // 组件名AppComponent
  title = &#39;Tour of Heroes&#39;;
  myHero = &#39;Windstorm&#39;;
}

아직 정상적인 동작임을 알 수 있습니다:

소개– >Configuration

–> ;

Export

selector:이름에서 알 수 있듯이 그냥 선택기, 네이티브 JS를 통해 선택할 수 있는 선택기(필수 구성)입니다.

templateUrl:

Angular 구성 요소 템플릿 파일의 URL입니다. 제공된 경우 인라인 템플릿을 제공하기 위해 template을 사용하지 마세요(templateUrl 및 template 옵션 중 하나 선택, 필수 구성).

styleUrls:

보기 어렵지 않습니다. 스타일 경로의 하나 이상의 구성을 소개하는 것입니다(선택적 구성)

구성 요소가 비교적 간단한 경우 추출할 필요가 없습니다. @Component 구성 항목은 인라인 형식으로 직접 사용할 수 있습니다.

🎜rrreee🎜 지금까지 내부의 app-routing.module.ts 파일에 대해 간략하게 설명하겠습니다. 나중에 만나면 다시 말해보세요. 🎜🎜🎜Angular 애플리케이션의 일반적인 아이디어는 다음과 같아야 합니다. 🎜🎜🎜🎜🎜🎜예를 들어, Angle 애플리케이션이 회사라면 AppModule은 회사입니다. AppComponent는 이 회사의 공장이며, 회사는 여러 개의 공장을 가질 수 있습니다. 신고 배열의 요소는 생산 작업장, 인사 관리 시스템 등과 같은 공장의 일부입니다. 수입 배열은 공장에서 초청하는 외국 원조와 같으며 비교적 전문적입니다. 공급자 배열은 다양한 서비스를 제공하는 물류 부서와 같습니다. 🎜🎜🎜🎜🎜더 많은 프로그래밍 관련 지식을 보려면 🎜프로그래밍 소개🎜를 방문하세요! ! 🎜

위 내용은 Angular의 ngModule이 무엇인지에 대한 간략한 분석의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!