각도 학습 1일 차: 구성 요소

목표: 이 기사에서는 구성 요소를 알게 됩니다.

전제 조건 이 문서를 완료하기 전에 Visual Studio Code, NPM(노드 패키지 관리자), Node, Angular CLI를 포함한 모든 전제 조건 도구를 이미 설치해야 합니다.

요소

구성 요소 생성

모듈에 등록

HTML 마크업에 요소 추가

1단계: 프로젝트 생성 후 VS Code Editor 터미널을 열고 실행ng serve
2단계: 새 구성 요소 Courses.component.ts를 만듭니다. 이것은 각도 건물 응용 프로그램에 사용되는 규칙입니다. 구성 요소에 여러 단어가 있는 경우 단어를 구분합니다course-form.component.ts. 이제 일반 클래스 만들기

class CoursesComponent {

}

명명 규칙을 다시 한 번 살펴보십시오. 여기에서 모든 단어의 첫 글자는 대문자여야 하며 관례에 따라 클래스 이름에 접미사 Component를 사용합니다.

지금까지 이것은 일반 클래스입니다. 구성 요소가 아닙니다. 이제 컴포넌트로 변환합니다. 각도가 이해할 수 있는 일부 메타데이터를 추가해야 합니다. 우리는 데코레이터를 사용합니다. 먼저 상단에 데코레이터가 필요합니다.

그래서 가져오기 -
import { Component } from @angular/core
이것은 Angular의 핵심 라이브러리입니다. 구성 요소 데코레이터를 가져옵니다. 그리고 신청해야 합니다.

이제 구문을 살펴보십시오.

@Component()

함수처럼. 이것을 데코레이터 함수라고 합니다.

@Component({

})

개체를 전달합니다. 하나 이상의 속성이 각도가 작동하는 방식을 각도에 알려줍니다. 전:

@Component({
  selector: 'app-courses',
  templateUrl: './courses.component.html',
  styleUrls: ['./courses.component.scss']
})

이 구성 요소에 대한 내 선택기app-courses . 이것은 Angular의 기본 구성 요소입니다. 첫 번째 단계가 완료되었습니다.

두 번째 단계는 이 구성 요소를 모듈에 등록하는 것입니다.

현재 애플리케이션에는 하나의 모듈 app.moudle만 있습니다.

app.module.ts 파일

import { BrowserModule } from '@angular/platform-browser';
import { NgModule } from '@angular/core';

import { AppComponent } from './app.component';
import { CoursesComponent } from './courses/courses.component';

@NgModule({
  declarations: [   
    AppComponent,
      CoursesComponent
   ],
  imports: [
    BrowserModule
  ],
  providers: [],
  bootstrap: [AppComponent]
})
export class AppModule { }

다시 한 번 세 개의 가져오기 파일이 있습니다. 특별한 것은 없습니다.
하단에는 TypeScript 클래스가 있습니다. export class AppModule { } 기본 AppModule

이것이 @NgModule이라는 또 다른 데코레이터 함수인 데코레이터 함수임을 알아두십시오.

@NgModule({
  declarations: [   
    AppComponent,
    CoursesComponent
   ],
  imports: [
    BrowserModule
  ],
  providers: [],
  bootstrap: [AppComponent]
})

그리고 이 클래스는 또 다른 데코레이터 함수 @NgModule로 장식되어 있습니다. Plan typescript 클래스 AppModule은 Module Angular Point of View로 변환됩니다.

선언 가져오기 공급자 부트스트랩과 같은 모든 속성에 대해 걱정하지 마십시오.

선언에 집중하세요. 여기에 이 ​​모듈의 모든 구성 요소 부분을 추가합니다.

기본적으로 응용 프로그램을 생성할 때 AppComponent라는 하나의 구성 요소가 있습니다.

이제 CoursesComponent를 추가하고 해당 파일에서 top을 가져올 수 있습니다.
import { CoursesComponent } from './courses/courses.component';

Don't have .ts . No need.

여기서 두 번째 단계가 완료됩니다.

이제 세 번째 단계입니다.

@Component({
  selector: 'app-courses',
  templateUrl: './courses.component.html',
  styleUrls: ['./courses.component.scss']
})

이는 이 구성요소의 선택기입니다. 즉, 앱 코스 각도와 같은 요소가 있는 모든 곳에서 이 요소(앱 코스) 안에 템플릿 Courses.component.html을 렌더링합니다. 이것은 appComponent의 외부 템플릿입니다. 한번 봅시다.

app.component.html 파일

<h2>Angular Demo</h2>
<app-courses></app-courses>

따라서 각도가 요소를 볼 때 코스 구성 요소의 템플릿을 렌더링할 것입니다.

산출


이것이 각도 응용 프로그램이 작동하는 방식입니다.

참고: 터미널에서 각도 구성 요소를 생성하기 위한 짧은 명령ng g c courses
참조
Create New Project