[angular] 컴포넌트의 구성

출처 : Angular 기본과 간단한 To-Do 어플리케이션 만들기https://www.inflearn.com/course/angular-%EA%B0%95%EC%A2%8C-%EA%B8%B0%EB%B3%B8/dashboard

[무료] Angular 기본과 간단한 To-Do 어플리케이션 만들기 - 인프런 | 강의

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

3~7 : 데코레이터

8~15 : class

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

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

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

---

templateUrl에 적힌 html내용

 

---

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

---

컴포넌트 생성(class 생성없음)

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에서 말하는 템플릿 리터럴)

 

---

Angular Files

위의 플러그인보다 많은 generate 제공

이걸로 component 추가하면 xx.module.ts에 자동으로 세팅이안된다. ㅡㅅ ㅡ