[Angular]앵귤러 처음 시작하기
Angular CLI 설치하기
설치하기
npm install -g @angular/cli
확인하기
ng version
프로젝트 생성하기
ng new 프로젝트명
프로젝트 구조
index.html -> main.ts -> app.module.ts -> app.component.ts
index.html
앵귤러는 싱글페이지 어플리케이션으로 고객에게 전송하는 페이지는 index.html 하나이다.
main.ts
앵귤러 프로젝트를 실행할 때 가장 먼저 실행되는 ts 파일(js 파일로 트렌스파일 하게된다)
AppModule을 실행시켜 준다.
app.module.ts
@ngModule
: 클래스를 모듈로 만들어주는 데코레이터.
declarations
: 컴포넌트
imports
: 다른 모듈들
providers
: 서비스 컴포넌트
bootstrap
: 처음 실행할 컴포넌트
app.component.ts
@Component
: 컴포넌트로 만들어주는 데코레이터.
selecter
: 컴포넌트의 태그 이름
templateUrl
: 탬플릿 파일
styleUrl
: scss 파일
프로젝트 실행하기
angular devkit 설치하기
npm i @angular-devkit/build-angular
앵귤러 프로젝트 실행하기
ng serve
컴포넌트 생성하기
ng generate component <컴포넌트-이름>
<컴포넌트-이름>.component.ts
: 컴포넌트 파일
<컴포넌트-이름>.component.html
: 템플릿 파일
<컴포넌트-이름>.component.css CSS
: 스타일 파일
<컴포넌트-이름>.component.spec.ts
: 테스트 파일
직접 파일을 생성할 수도 있지만 위 명령어를 사용하면 component의 기본구성이 되는 파일을 자동 생성해 줍니다.