Hello World 띄우기

Hello World 띄우기

P.S Angular를 처음 해보는 지라 잘못된 정보가 있을 수도 있습니다. 차차 수정해 나가겠습니다.

-------------------------------------------------------------------------------------------------------------------------

앵귤러 설치

앵귤러 설치 전에는 node가 설치되어 있어야한다.

npm install -g @angular/cli

앵귤러 cli 설치

-------------------------------------------------------------------------------------------------------------------------

프로젝트 생성

ng new 프로젝트평

Y 누르고 CSS에 엔터.

완성이 되면 src 폴더에 app폴더를 보자.

app.module.ts 파일은 사용할 컴포넌트나 모듈을 등록한다.

@ngModule() 데코레이트 안에 declarations에 사용할 컴포넌트를 적으면 등록하고 사용할 수 있게 된다.

Imports: 사용할 모듈을 적으면, 등록하고 사용할 수 있다.

-------------------------------------------------------------------------------------------------------------------------

컴포넌트 생성

프로젝트로 이동 cd ./프로젝트명

ng g c 컴포넌트명

g는 generate c는 component다. 명령어로 컴포넌트를 생성하면 자동으로 app.moduel에 등록된다.

-------------------------------------------------------------------------------------------------------------------------

HelloWorld 띄우기

컴포넌트는 하나당 파일이 하나다. 컴포넌트는 2가지로 구성되어있다.

표현을 하는 계층인 ‘데코레이트’ 와 동작하는 계층인 ‘클래스’가 있다.

@Component({})는 표현을 담당한다.

Selector은 app.componen.ts의 태그이름(셀렉토)으로 사용된다.

templateUrl에는 내용이 들어간다. 현재는 프로젝트명.html의 주소가 적혀있는데, 거기에 내용을 적으면 된다.

styleUrls은 style이 들어있다.

밑에는 로직이 작동하는 HelloworldComponent 클래스가 있다. 지금은 사용하지 않지만, 나중에 사용된다.

app.moodule.ts 에 가서 컴포넌트가 추가 됐는지 확인한다.

helloWorld.component.html에 Hello World라고 적어보자.

app.component.html로 가서 내용을 전부 지우고

컴포넌트명.component.ts에 selector로 등록한 태그이름으로 확인한 후 app.component.html의 내용을 지우고 컴포넌트를 불러온다.

프론트 서버를 실행한다.

ng serve

localhost:4200 으로 가면 확인할 수 있다.

from http://ljwoon94.tistory.com/43 by ccl(A) rewrite - 2021-05-22 17:26:28