Angular js 구조, 구성 요소 생성 방법

Angular를 초기 제작하면 기본적으로 만들어지는 모듈과 컴포넌트가 있다.

---

모듈

• app-routing.module.ts (이것은 프레임워크로 app 생성 시, y/n 문구가 나오는데 routing은 요즘 웹페이지에 기본 요소이므로 y를 누름)
• app.module.ts (전역으로 사용할 모듈을 모두 정의하는곳)

컴포넌트

• app.component.html (SPA를 제공하는 키 페이지중 하나. Index.html에 <app-root/>로 선언 가능하며,(물론 이름 바꿀 수 있음) 이후 만들어지는 모든 컴포넌트들을 app.component.html에서 관리하여 보여줌)
• app.component.css or scss (큰 의미있는 파일은 아님. 매 컴포넌트를 생성할 때마다 css or scss 파일이 컴포넌트 폴더에 존재하는데, 이녀석은 app.component.html에서 사용되는 최외각 css라고 칭할 수 있겠음)
• app.component.ts (app.component.html과 바인딩 혹은 데이터 관리 부분을 나누어 깔끔하게 이용할 수 있게끔 함)
• app.component.spec.ts(나도 잘은 모르는데 있는덴 이유가 있음 굳이 건들지 말자)

---

구성 요소 생성 방법

---

Angular는 프레임워크 이므로, 자율적으로 폴더를 생성하고 이용을 하기보단, ng 명령어를 이용하여 필요한 컴포넌트나 서비스등을 생성한다. 이는, Angular의 큰 장점중 하나이며, 그만큼 폴더구조가 깔끔해 진다는 장점이 있음!

 

Component 생성 명령어

ng generate component<컴포넌트 이름>

Directive 생성 명령어

ng generate directive<디렉티브 이름>

Service 생성 명령어

ng generate service<서비스 이름>

모듈 생성 명령어

ng gererate module<모듈 이름>