[Angular] Angular 시작하기(local ver.) - (1)

프로젝트 설정

1. 새 프로젝트 생성

 

프로젝트 생성 명령어

ng new 프로젝트 이름

- Would you like to add Angular routing? y

(찾아보니 Y를 누르면 Angular의 라우터가 자동으로 프로젝트에 라우팅을 해준다고 함)

- Which stylesheet format would you like to use? CSS

(잘 모르겠어서 그냥 가장 익숙한 CSS로)

설치 완료

 

~작업 영역 확인~

 

2. 프로젝트 구동

 

우선 명령어를 통해 프로젝트로 접근

cd 프로젝트명

나의 경우 프로젝트 이름이 my-store이기 때문에 'cd my-store' 입력

 

디렉토리가 프로젝트로 변경되었다면 명령어로 프로젝트 구동

ng serve 프로젝트명

만약 구동과 동시에 화면을 보고 싶다면 

ng serve my-store --open

✔️Compiled successfully.

후 창이 자동으로 열림

 

만약 --open을 쓰지 않아 창이 자동으로 열리지 않는다면

localhost:4200으로 접근 가능

---

여기서 src 폴더를 앵귤러에서 제공해주는 src로 변경하여 진행

src는 Stackblitz에서 받으면 되는데 혹시 몰라 첨부

yrpvlmjmgoq.angular.zip

0.02MB

---

제대로 잘 바꾸면

이렇게 바뀐다.

---

글 이렇게 두 개 썼는데 (1)은 StackBlitz와 동일하게 진행하면 됨

문제는 (2) 여기에서 조금 다르게 터미널과 명령어를 이용해보려 한다.

 

https://angular.io/start

Angular

영어 문서 참고

---

자식 컴포넌트로 데이터 전달하기

 

1. 새로운 컴포넌트를 만들기 위한 새 터미널 열기

 

VS CODE 터민널 우측 상단의 '+' 클릭

 

2. 터미널에서 명령어로 'product-alerts'라는 새 컴포넌트를 생성

ng generate component product-alerts

※ 만약 'The generate command requires to be run in an Angular project, but a project definition could not be found.' 이런 에러가 발생한다면 디렉토리가 프로젝트로 되어 있는지 확인할 것

컴포넌트가 잘 생성되었다면

 

src > app 아래에 'product-alerts'라는 폴더가 생성되고 이 안에 총 4개의 파일이 생성

• product-alerts.component.css
• product-alerts.component.html
• product-alerts.component.spect.ts (이 파일은 뭔지 아직 잘 모르겠음)
  
• product-alerts.component.ts

 

2. product-alerts.components.ts에 코드 추가

 

상품 데이터를 받기 위해 Input 심볼 로드 ▼

 

 

부모 컴포넌트에서 해당 프로퍼티의 값을 받아오겠다는 @Input( ) 데코레이터 지정 ▼

(이 경우 부모 컴포넌트는 ProductListComponent)

 

 

~코드 중간 확인~

 

StackBlitz와 다르게 터미널 명령어를 통해 컴포넌트를 생성하면 app.module.ts에 자동으로 이런 코드가 생김

 

 

~화면 확인~

---

나머지 부분은 Stackblitz로 하는 것과 동일해서 뺐음

이 다음부턴 Stackblitz 말고 로컬에서 할 예정