처음 시작하는 Angular (2021.05.27)

처음 시작하는 Angular (2021.05.27)

인프런에 있는 Angular 기본과 간단한 To-Do 애플리케이션 만들기 강의를 들으면서 학습을 진행하였습니다.

Component

컴포넌트는 사용자 인터페이스나 UI를 재사용하기 위해 정의한 단위입니다.

component의. ts파일을 확인해 보면 @Component 데코레이터와 class로 구성된 것을 확인할 수 있습니다.

@Component 안에는 컴포넌트의 특성을 정의하는 메타데이터를 함께 전달할 수 있습니다.

$ ng generate component todos

@Component({

selector : 'app-todos',

templateUrl : './todos.component.html',

styleUrls: ['./todos.component.css'],

})

위와 같은 기본 구성을 확인할 수 있습니다. 여기서 selector는 컴포넌트 인스턴스가 DOM트리의 어떤 자리에 위치할지 CSS셀렉터로 지정합니다. 를 이용해서 todos 컴포넌트를 위치시킬 수 있습니다.

templateUrl은 컴포넌트의 HTML 템플릿을 외부 파일에 정의할 때 사용합니다. template : 를 입력하면 `` 을 사용해서 외부의 HTML을 지정하지 않고도 사용할 수 있습니다. styleUrls 도 마찬가지로 외부의 CSS를 입력할 수 있습니다. 보면 배열로 돼있어서 여러 개의 css를 적용시킬 수 있습니다. providers 에서는 컴포넌트가 생성될 때 의존성으로 주입되는 서비스의 provider를 지정합니다.

from http://one-dev.tistory.com/7 by ccl(A) rewrite - 2021-05-27 22:26:21