[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의 기본구성이 되는 파일을 자동 생성해 줍니다.
