[angular] 컴포넌트의 구성

[angular] 컴포넌트의 구성

컴포넌트는 뷰와 로직으로 구성되있음

3~7 : 데코레이터

8~15 : class

4 selector: 선택자 #이나 .을 써 id와 class를 지정할 수 있다.

5 templateUrl : 뷰를 담당하는 url을 나타내줌 데이터바인딩이나 다른 컴포넌트를 작성할 수 있음

6. styleUrls : 스타일이 작성된 파일, 배열로 관리한다.

templateUrl에 적힌 html내용

브라우저에 컴파일된 최종 코드

컴포넌트 생성

vscode코드에서 angular-cli 다운로드

angular cli명령어를 쉽게 쓸 수 있다.

1. 생성할 폴더(todos)에서 우클릭 하면 이미지처럼 생김

2. new compnnet 클릭

3. 명령어를 적어주면 그폴더에서 바로 cli가 실행된다.

파일명 옵션

아래처럼 폴더가 생성된다.

옵션의 종류

--inline : 컴포넌트안에 template(html)과 style(css)을 작성한다는 뜻으로 todo.component.ts안에 작성된다는 뜻

즉, todo안에 html과 css파일은 생성을 안함

5번째를 보면 templateUrl이 아닌 내용을 직접 입력하게 되있다.

` : 멀티라인의 문자열을 표현할수 있음(es6에서 말하는 템플릿 리터럴)

from http://mongzs.tistory.com/25 by ccl(A) rewrite - 2021-02-25 23:00:45