1.angular.json 파일
project/angular.json에 angular.json 파일이 있음. 이 파일은 앵귤러 프로젝트를 위한 여러 property랑 configuration이 있음. 맨 처음에 이 파일을 참조해서 builder가 어떤게 main file인지 확인하기 위해서 모든 paht랑 configuration을 살펴봄.
build 부븐을 보면 option을 아래처럼 볼 수 있는데 여기에서 "main": "src/main.ts"로 builder한테main.ts에서 앱을 시작하라고 알려주는 reference가 되는 것임.
"build": {
"builder": "@angular-devkit/build-angular:browser",
"options": {
"outputPath": "dist/angular-tour-of-heroes",
"index": "src/index.html",
"main": "src/main.ts",
"polyfills": "src/polyfills.ts",
"tsConfig": "tsconfig.app.json",
"assets": [
"src/favicon.ico",
"src/assets"
],
"styles": [
"src/styles.css"
],2. main.ts
project/src/main.ts에 main.ts 파일이 있음.
이 파일이 앱의 entry 포인트로 작동함. 이 entry point는 앵귤러가 modular 기능을 지원하기 위한 webpack 안에 정의되어있음. 이 이 main.ts를 다른 파일로 바꿔도 되는데 얘를 바꿔주면 angular.json에서도 바꾼 파일로 바꿔줘야함. main.ts는 아래 코드로 앱이 돌아갈 브라우저 환경을 생성하는데 도움을 줌.
// project/src/main.ts
import { platformBrowserDynamic } from '@angular/platform-browser-dynamic';이 다음에 main.ts 파일은 빌더한테 앱을 bootstrap 하라고 해주는 bootstrapModule(AppModule) 함수를 호출함.
// project/src/main.ts
import { AppModule } from './app/app.module';
platformBrowserDynamic().bootstrapModule(AppModule)3. app.module
main.ts에서 앱을 AppModule로 앱을 bootstrap함을 볼 수 있었는데 AppModule은 project/src/app/app.module.ts에 있음.
이 모듈은 @NgModule 데코레이터를 가지고 있음. 이 데코레이터는 앱 안의 모든 컴포넌트에 대한 선언을 가지고 있어서 앵귤러가 컴포넌트들을 인식할 수 있도록 해줌.
// project/src/app/app.module.ts
import { NgModule } from '@angular/core';
import { BrowserModule } from '@angular/platform-browser';
import { FormsModule } from '@angular/forms'; // <-- NgModel lives here
import { AppRoutingModule } from './app-routing.module';
import { AppComponent } from './app.component';
import { HeroesComponent } from './heroes/heroes.component';
import { HeroDetailComponent } from './hero-detail/hero-detail.component';
@NgModule({
declarations: [
AppComponent,
HeroesComponent,
HeroDetailComponent
],
imports: [
BrowserModule,
AppRoutingModule,
FormsModule
],
providers: [],
bootstrap: [AppComponent]
})
export class AppModule { }4. app.component.ts
위의 app.module.ts에서 모듈이 AppComponent를 bootstrap 하는것을 볼 수 있음. AppComponent는 project/src/app/app.component.ts에 있음. 이 파일은 서빙할 페이지의 html과 데이터를 가지고 상호작용함. 이 컴포넌트는 @angular/core에서 import한 @Component로 만들어짐. 이 컴포넌트는 커스텀 html tag처럼 동작하는 selecotr를 가지고 있어서 이 selector로 해당 컴포넌트를 부를 수 있음. 또한 컴포넌트는 보여줄 html 페이지를 가진template이나 templateUrl를 가지고 있음. 추가로 stlyeUrls 배열에 해당 컴포넌트에 적용되는 스타일시트를 가지고 있음.
// project/src/app/app.component.ts
import { Component } from '@angular/core';
@Component({
selector: 'app-root',
templateUrl: './app.component.html',
styleUrls: ['./app.component.css']
})
export class AppComponent {
title = 'Tour of Heroes';
}여기까지 오면 컴파일러가 앱의 컴포넌트들에 대한 모든 정보를 가지고 있어서 컴포넌트들이 사용가능해짐.
// 질문 : index.html은 누가 불러오는거임? ng serve하면
여기서 부터 시작함?
5. index.html
이제 앵귤러가 페이지를 보여주기 위한 모듈, 컴포넌트, 스타일 등에 대한 정보를 가지고 있음.
여기서 이제 index.html이 호출됨. 컴파일러가 동적으로 이 파일의 맨 끝에 모든 자바스크립트 파일을 추가해줌. 모든 컴포넌트가 이제 앵귤러에 알려졌으니 index.html은 root 컴포넌트인 <app-root>을 부름. app-root는 AppComponent의 selector임. root component는 app.component.ts에 정의되어있고 app.component.html을 target함.
<!--
project/src/index.html
-->
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>AngularTourOfHeroes</title>
<base href="/">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="icon" type="image/x-icon" href="favicon.ico">
</head>
<body>
<app-root></app-root>
</body>
</html>앵귤러 앱이 브라우저에서 열려서 서빙될때 컴파일러가 한 스크립트 인젝션은 아래처럼보임.
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>AngularTourOfHeroes</title>
<base href="/">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="icon" type="image/x-icon" href="favicon.ico">
<link rel="stylesheet" href="styles.css"></head>
<body>
<app-root></app-root>
<script src="runtime.js" type="module"></script>
<script src="polyfills.js" type="module">
</script><script src="styles.js" defer>
</script><script src="vendor.js" type="module">
</script><script src="main.js" type="module"></script></body>
</html>
6. app.component.html
<app-root></app-root>로 project/src/app/app.component.html이 불러와짐.
