Angular에서 구성요소를 빌드하는 방법은 무엇입니까? 3가지 방법 도입

Angular에서 구성 요소를 빌드하는 방법은 무엇입니까? 이 기사에서는 프로젝트를 생성하는 Angular 방법과 Angular에서 구성 요소를 생성하는 세 가지 방법을 소개합니다.

1. Angle과 Anglejs의 차이점은 무엇인가요?

• 이름 변경으로 Angular2는 공식적으로 Angular2의 이름을 따서 Angular로 명명되며 2.0 이전 버전은 AngualrJS라고 합니다. [관련 튜토리얼 권장 사항: "angular Tutorial"]

• 1.x은 AngularJS js 파일을 웹 페이지에 도입하는 것입니다. 2.0 이후에는 둘의 차이점이 Java와 JavaScript와 완전히 다릅니다.

2. 프로젝트 생성

1. 전역 Angular CLI 명령줄 도구

npm install -g @angular/cli

2를 설치합니다.

ng new angular-tour-of-heroes

참고: 노드 버전은 12 이상이어야 합니다. " 'ng'는 내부 또는 외부 명령, 실행 가능한 프로그램 또는 배치 파일로 인식되지 않습니다. "

3. 프로젝트 실행

cd angular-tour-of-heroes
ng serve --open

3. 구성 요소를 만드는 첫 번째 방법:

1. src 파일 아래에 새 파일을 만들고 이름을 hello-world.comComponent.ts

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

@Component({
    selector: 'hello-world组件',
    // templateUrl: './app.component.html',
    // styleUrls: ["./app.component.scss"]
    template: `<h1>{{text}}</h1>`

})
export class HellowordComponent {
    constructor() {}
    text = "第一个模板";
}

2.app.comComponent.html 또는 app.comComponent.ts로 지정합니다. 컴포넌트 태그 추가

// 引入ng核心包和组件
import { Component } from '@angular/core';
@Component({
  selector: 'app-root',//当前组件的引用名称
  template:
    ` 
 <hello-world></hello-world>//x新增组件标签

    `  ,
  // templateUrl: &#39;./app.component.html&#39;,//组件模板
  styles: [&#39;h1 { color:red}&#39;]
  // styleUrls: [&#39;./app.component.scss&#39;]//组件的样式文件

})
export class AppComponent {//组件名称

}

3. app.module.ts에 컴포넌트를 추가하고 컴포넌트를 선언합니다.

넷째, 컴포넌트를 생성하는 두 번째 방법:

cli를 사용하여 컴포넌트 생성

Enter 명령:

ng generate component hello-world

5. 구성 요소를 만드는 세 번째 방법:

1. vscode

2에서 Angular 파일을 다운로드합니다. appear

3. 생성기 구성요소를 클릭합니다. 구성요소 이름을 입력하고 Enter를 누르세요

4. 구성요소 생성

을 방문하세요. 프로그래밍! !

위 내용은 Angular에서 구성요소를 빌드하는 방법은 무엇입니까? 3가지 방법 도입의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!