Angular 독립형 구성 요소 — Angular의 미래

4074 단어 angulartutorialjavascriptwebdev
오늘은 Angular 의 미래, 즉 --standalone에 대해 논의할 것입니다. NgModule 와 독립적으로 사용할 수 있는 구성 요소, 지시문 또는 파이프를 나타냅니다.NgModule 없이 응용 프로그램을 만들어 봅시다.
먼저 angular-cli를 설치/업데이트한 다음 cli ng 버전을 통해 버전을 확인한 다음 NgModule 없이 첫 번째 프로젝트를 생성해야 합니다.
NgModule 부품 없이 아래 구성 요소를 생성할 수 있습니다.
독립형 구성 요소
독립형 지시문
독립형 파이프
지연 로드 독립형 구성 요소를 사용할 수도 있습니다.


독립형 구성요소란 무엇입니까?



Angular 14 이전에는 각 구성 요소가 모든 모듈 부분appModule 또는 다른 모듈에 선언되었지만 모듈을 생성하거나 다른 모듈에 선언하지 않으면 구성 요소를 사용할 수 없었습니다.
따라서 릴리스 v14 이후 이 버전에 새로운 기능이 추가되었습니다. 즉, 어떤 모듈에서도 선언하지 않고 구성 요소를 사용할 수 있으며, 이를 standalone 구성 요소라고 합니다.NgModule 부분에서와 같이 개발을 위한 게임 체인저가 포함된 구성 요소 기반 구조입니다.

독립형 구성요소 생성



새 프로젝트를 만든 후 cli 명령ng g c <componentName> –-standalone을 사용하여 새 독립형 구성 요소를 만들 수 있습니다. 이 명령을 실행하면 독립형 구성 요소가 프로젝트에 추가됩니다.
하나의 구성 요소ng g c home --standalone를 만들고 있습니다.

import { Component, OnInit } from '@angular/core';
 import { CommonModule } from '@angular/common';
@Component({
   selector: 'app-home',
   standalone: true,
   imports: [CommonModule],
   templateUrl: './home.component.html',
   styleUrls: ['./home.component.scss']
 })
 export class HomeComponent implements OnInit {
constructor() { }
}




요구 사항에 따라 다른 유용한 종속성 가져오기



구성 요소를 만든 후 파이프 또는 기타 지시문/모듈 및 사용과 같은 더 많은 것을 사용하고 추가할 수 있습니다.
마찬가지로 공유 모듈을 가져오고 이 구성 요소에서 헤더 구성 요소를 사용합니다.

import { SharedModule } from './../shared/shared.module';
 import { Component, OnInit } from '@angular/core';
 import { CommonModule } from '@angular/common';
@Component({
   selector: 'app-home',
   standalone: true,
   imports: [CommonModule, SharedModule],
   templateUrl: './home.component.html',
   styleUrls: ['./home.component.scss']
 })


독립 실행형 구성 요소 부트스트래핑



Angular 14 릴리스 후 해당 구성 요소를 부트스트래핑하여 독립 실행형 구성 요소로 전체 애플리케이션을 재생할 수 있습니다.
먼저 main.ts 파일로 이동해야 합니다.
독립 실행형 구성 요소를 다음과 같이 appModule로 교체하십시오.

platformBrowserDynamic().bootstrapModule(AppModule)
  .catch(err => console.error(err));


이 코드를 아래 코드로 교체

bootstrapApplication(HomeComponent).catch(err => console.error(err));

main.ts에서 변경한 후 이제 index.html 파일에서 변경해야 합니다.

<body>
   <app-root></app-root>
 </body>


이 코드를 아래 코드로 교체

<body>
   <app-home></app-home>  <!--your standalone component-->
 </body>


Github Source Code

그래서 마지막으로 독립 실행형 구성 요소에 대해 배우고 애플리케이션에서 어떻게 사용하고 부트스트랩할 수 있는지 알아봅니다.

그것에 대한 자세한 내용은 다음 블로그에서 배울 것입니다.

저와 함께 배우고 싶다면 소셜 계정에서 저를 팔로우하고 제 웹사이트를 방문하세요.

https://www.ankitkumarsharma.com/

또한 GitHub , , Medium 에서 저를 팔로우하고 코드 쿼리에 대한 자세한 기사 업데이트를 확인하십시오.

감사합니다. 행복한 코딩 라이프!
익스플로러가 흩어져 버린다? PowerShell로 정리할 수 있었습니다!
Gitpod x 블록체인

좋은 웹페이지 즐겨찾기

개발자 우수 사이트 수집

개발자가 알아야 할 필수 사이트 100선 추천 우리는 당신을 위해 100개의 자주 사용하는 개발자 학습 사이트를 정리했습니다
best100-homepage