Angular 시작하기

개요

Angular CLI 를 사용하여 Angular 어플리케이션 작성을 위한 프로젝트를 생성합니다.

앞서 작성한 글에서 설명한 개발환경에서 이어서 진행하도록 합니다.

새로운 프로젝트 생성하기

• 윈도우의 cmd 를 열도록 합니다. PC 의 임의의 폴더로 이동하여 Angular 라는 이름의 폴더를 하나 생성한 후, 폴더 안으로 이동합니다. (이후 이 폴더를 작업 폴더라고 부르도록 하겠습니다.)

> mkdir Angular
> cd Angular

• 내부에 my-app 라는 이름의 어플리케이션을 만들기 위해서 아래의 명령을 입력합니다.

> ng new my-app

• 이 명령의 결과로 my-app 폴더가 Angular 폴더 안에 생성되고 해당 폴더안에 기본적인 application 이 추가됩니다.
• my-app 폴더 (이하 프로젝트 폴더라고 부르도록 하겠습니다.)로 이동합니다.

> cd my-app

• 아래의 명령을 입력합니다.

> npm install
> ng serve --open

• 이 명령은 프로젝트를 컴파일 하고, 기본 브라우저에 http://localhost:4200 페이지를 화면에 표시합니다.

• 이것으로 완료되었습니다.

• 프로젝트 관리를 위하여 아래의 명령어를 입력하여 프로젝트 폴더를 git 로 초기화 하도록 합니다.

> git init
> git add .
> git commit -m "Initial Setup"

결론

간단히 Angular CLI 의 명령어를 이용하여 Angular 프로젝트를 생성(ng new)하고, 동작을 확인(ng serve)하였습니다. 이후로 바로 Angular 어플리케이션을 작성할 수 있지만 좀 더 빠른 완성을 위하여 아래의 글을 참고하여 서버측의 기능 사용을 위한 ① Firebase 설정, 어플리케이션의 화면의 디자인을 적용한 표시를 위한 ② Angular Material 그리고 마지막으로 반응형 웹 디자인을 위한 ③ FlexLayout 등의 환경 설정을 진행 하도록 합니다. 각 각의 내용은 아래의 포스트를 참고하도록 합니다.

• Firebase 프로젝트 설정 @ Angular
• Angular Material 설치 및 설정
• FlexLayout 설치 및 설정

참고

• angular 가이드