Angular CLI

Angular CLI 설치

• npm install -g @angular/cli

프로젝트 생성

• ng new [프로젝트 이름]
  • 일반적으로 만드는 명령어
  • 컴포넌트, html, css등 다 나누어서 만들어줌
  • app.component.spec.ts -> test 파일
  • app.component.ts -> root component : 모든 컴포넌트에 아버지
  • app.module.ts -> root module : 모든 모듈에 아버지
  • -t : inline style의 약자 -> 다먹는다. 모든 컴포넌트를 생성해도
  • -s : inline template의 약자 -> 다먹는다. 모든 컴포넌트를 생성해도
  • -S : .component.spec.ts 파일을 안만들겠다는 것 -> 다먹는다. 모든 컴포넌트를 생성해도

프로젝트 실행

• ng serve
  • angular 서버가 내장하고 있는 개발용 서버로 브라우저에서 확인가능
  • -o 옵션으로 브라우져를 바로 띄울수 있다.

프로젝트 빌드

• ng build
  • build해서 dist파일에 넣어주는 명령어
  • 나중에 서버에 올릴때는 .map파일은 다 지우고 올려야함
    • .map파일은 디버깅 용이다. webpack에서 만들어줌

프로젝트 구성 요소

• 컴포넌트
  • 명령어
    • ng generate component component-name
  • 축약형
    • ng g c component-name
  • -s : inline style의 약자
  • -t : inline template의 약자
  • --skip-tests : .component.spec.ts 파일을 안만들겠다는 것(-S 안먹음)
  • --flat : 폴더를 안만든다.
  • 4개의 파일을 컴포넌트 이름으로 된 폴더안에 넣어서 app 폴더 안에 넣어줌
• 디렉티브
  • 명령어
    • ng generate directive directive-name
  • 축약형
    • ng g d directive-name
• 파이프
  • 명령어
    • ng generate pipe pipe-name
  • 축약형
    • ng g p pipe-name
• 서비스
  • 명령어
    • ng generate service service-name
  • 축약형
    • ng g s service-name
• 모듈
  • 명령어
    • ng generate module module-name
  • 축약형
    • ng g m module-name
• 가드
  • 명령어
    • ng generate guard guard-name
  • 축약형
    • ng g g guard-name
• 클래스
  • 명령어
    • ng generate class class-name
  • 축약형
    • ng g cl class-name
• 인터페이스
  • 명령어
    • ng generate interface interface-name
  • 축약형
    • ng g i interface-name
• Enum
  • 명령어
    • ng generate enum enum-name
  • 축약형
    • ng g e enum-name