Angular 프로젝트 시작점
Angular CLI를 통해 Angular 프로젝트를 생성하는 것까지 진행했습니다.
그럼 이제 Angular 첫 페이지가 어떻게 만들어 지는가에 대해 알아보겠습니다.
자동으로 생성되는 많은 파일들이 있습니다.
그 중 지금 우리가 집중해서 볼 것은 3개의 파일과 1개의 Set입니다.
1. main.ts
2. app.module.ts
3. index.html
4. app.component. files (Set)
1. main.ts
Angular는 스크립트 언어인 JavaScript로 작성이 되지만, Compile되어 사용됩니다.
설정에 따라 JIT(Just-In-Time), 또는 AOT(Ahead-Of-Time) Compiler를 사용할 수 있습니다.
Compiler에 대해서는 자세히 다루지 않구요. (자세히 모르기도 합니다.)
이러한 빌드 작업의 시작점이 main.ts입니다.
마치 C의 main.c, C++의 main.cpp와 같은 느낌이죠?
main.ts는 Application의 진입점으로 사용할 시작 Module을 설정(AppModule)해줍니다.
main.ts
앞으로 수정할 일은 거의 없어보여요.
2. app.module.ts
가장 중요한 파일이라고 볼 수 있는데요.
main.ts에서 시작 Module로 설정한 그 Module입니다.
Angular Application을 어떻게 조립할지 결정하는 파일입니다.
어떤 Component들이 들어가고 어떤 Module들을 참조할지에 대한 정보를 담고 있어요.
app.module.ts
3. index.html
이 파일이 브라우저로 접속했을 때 보이는 화면입니다.
화면에서 봤던 것 만큼 많은 코드가 들어있지 않죠?
사실 <app-root></app-root>라는 자리에 Component가 들어가서 보여지기 때문입니다.
index.html
이 파일 또한 직접 편집할 일은 거의 없습니다.
Angular가 빌드시 필요한 js와 css파일들을 알아서 추가해주기 때문입니다.
필요한 js와 css파일들은 사실 Component에 담겨져 있습니다.
4. app.component.{ ts, html, css, spec.ts }
우리가 만들어 갈 Application의 root(뿌리)가 되는 Component입니다.
Application이 개발되어가면서 많은 Component들이 추가됩니다.
이 Component들을 사용하여 Application을 구성하는 Main Component라고 보시면 됩니다.
app.component.ts
전체 적으로 요약하면 아래와 같은 구조입니다.
전체 소스 구조
'IT Tech > Angular' 카테고리의 다른 글
Angular 새로 Component 만들기 (0) | 2017.12.11 |
---|---|
Angular Component를 좀 더 들여다보자 (0) | 2017.12.08 |
Angular 훑어보기 (0) | 2017.11.23 |
Angular CLI로 개발 환경 만들기 (0) | 2017.11.21 |
Angular를 시작하며... (0) | 2017.11.17 |