Bootstrap, Material 테마 설치 후 Angular CLI 이용해 빠르게 개발을 시작해 본다.
별도의 API서버가 없는 상태에서 프로토타입을 개발하는 방법을 확인해 본다.

Angular 8 + Bootstrap 4.3 + Material 8.0

Angular CLI 설치

Angular CLI 란?

The Angular CLI is a command-line interface tool that you use to initialize, develop, scaffold, and maintain Angular applications

1
❯ npm install -g @angular/cli

Angular CLI 설치가 정상적으로 안될 경우 Node.js 와 npm package manager가 설치되어 있는지 확인해야 함.

자주쓰는 CLI 명령

WebStorm 과 같은 IDE를 사용하면 직접 커맨드 명령을 사용할 일이 드물지만 알고있으면 좋다.

1
2
❯ ng help
❯ ng g --help

주로 클래스, 컴포넌트, 서비스, 모듈 등을 생성해주거나 빌드할 때 사용한다.

1
2
3
4
5
6
❯ ng g class <클래스명>
❯ ng g component <컴포넌트명>
❯ ng g service <서비스명>
❯ ng g module <모듈명>
...
❯ ng build

Angular CLI 를 이용해서 generate된 경우 네이밍이나 디렉토리 구조 등 일관되게 가져갈 수 있기 때문에 사용하는 것이 좋다.

프로젝트 생성

angular-dash라는 프로젝트를 만들고 port 4300 으로 서버 실행

1
2
❯ ng new angular-dash
❯ ng serve --port 4300

Angular Material 설치

1
2
3
4
❯ npm install --save @angular/material @angular/cdk @angular/animations

# Some components (mat-slide-toggle, mat-slider, matTooltip) 를 위해 설치.
❯ npm install --save hammerjs

angular.json 파일에 사용하고자 하는 테마의 css 파일 경로 추가.
material-module.ts 파일을 생성 후 사용하고자하는 material 모듈을 import 시켜 두었다.
그리고 MaterialModule 을 app.module.ts 에 import 하는 과정이 있었음.

Bootstrap 설치

1
❯ npm install bootstrap

angular.json 파일에 bootstrap.min.css 파일 경로 추가.

Mock 데이터 활용 템플릿에 랜더링 하기

별도의 API서버가 없는 상태에서 프로토타입을 개발할 때 유용하다.

끝.

https://github.com/borakim-b/angular-dash