개발/Web
웹 프로젝트의 흐름
Juyeon Ji
2020. 3. 6. 15:25
-
index.html
- angualr에서 5가지 파일을 추가(runtime.js, polyfills.js, styles.js, vendor.js, main.js)\
- main.js -> main.ts -
main.ts
: bootstrapModule함수가 실행될 때 AppModule(app.module.ts)을 인자로 넘겨줌 -
app.module.ts
-
Angular 프로젝트에서 Component를 관리해줌
-
@NgModule함수에는 4개의 Key:Value값 사용
-
declarations(직접 만든 Class를 다른 파일에서 사용할 수 있도록 선언)
-
imports(Angular 모듈에서 사용되는 클래스를 다른 파일에서 사용할 수 잇도록 선언)
-
providers
-
bootstrap(가장 처음실행되는 모듈)
-
-
-
Module(생성방법: 터미널에 'ng g c 모듈명' 입력)
-
app.component.css
-
app.component.html: index.html의 app-root 태그 안에 들어감
-
app.component.spec.ts
-
app.component.ts
-
export된 AppComponent를 app.module.ts에 등록하면 다른 파일에서 컴포넌트를 사용할 수 있음
-
import한 후 declarations 배열에 추가를 하면 프로젝트 내에서 <app-root> 태그를 사용하여 app.component.html의 내요을 담을 수 있음
-
-
- index.html
- <body> 태그안에 <app-root> 태그를 선언하여 Component가 담긴 하나의 View를 보여줌