Angular> 기본 작동 방식

작동방식

실행되면 가장 보여지는 페이지 index.html

app-root 태그가 있는데

ts 파일에서 selector에 있다.

html에서 selector를 태그로 쓰면 

url의 html이 보여진다. 

 

 

---

컴포넌트와 테이블을 만들어 보자. 

 

 

1. 새로운 프로젝트를 만들고 이동

ng new [프로젝트]

: 프로젝트를 위한 앵귤러 스타터 파일들을 모두 만든다. 

cd [프로젝트]

ng serve

 

프로젝트를 만들고 경로를 불러오고 경로에 가서 ng serve한다.

그런다음 localhost:4200으로 접속

 

 

2. update main template page

src/app/app.component.html 파일 틀고 안에 있는 기본 내용은 싹 다 지운다. 

 

 

3. generate new component

ng generate component [이름] 

[프로젝트]/[이름].component.ts : the component class 

[프로젝트]/[이름].component.html : the component template HTML

[프로젝트]/[이름].component.css : the component private CSS 

[프로젝트]/[이름].component.spec.ts : the unit test specifications

 

app.module.ts : main application module에 컴포넌트 추가

ng generate component 명령어로 자동으로 새로운 컴포넌트는 main application module에 추가된다.

 

 

4. Add new component selector to app template page

sales-person-list 컴포넌트를 만들었고

sales-person-llist.component.html에서 sales-person-llist.component.ts에 적혀있고 

sales-person-llist.component.ts에서 selector는 app.component.html에서 씌여지고

app.component.html은 app.component.ts에 적혀있고

app.component.ts에서 selector는 index.html 의 body에 씌여진다. 

 

5. Generate SalesPerson class 

ng generate class sales-person-list/SalesPerson

 

Angular에서는 클래스에서 보통 public properties를 사용한다. 

 

6. SalesPersonListComponent 에서 데이터 생성

7. sales-person-list template file에서 HTML 테이블에서 loop를 통해 데이터를 표현