Angular CLI는 AngularJS를 사용함에 있어, 편리하게 project 구성, component 생성 등을 도와주는 interface입니다. Angular CLI 사용법에 대해 간단히 알아보겠습니다. 

#1 설치

$ npm install -g angular-cli

지난 포스팅에 알아본, angular cli 설치 command이다. cmd창에 입력하면된다. 

#2 프로젝트 시작 (ng new)

$ ng new 프로젝트명

Angular project를 생성해주는 command이다. dir 구조 및 필요한 파일들을 자동 생성 및 구성해준다. 

#3 컴포넌트, 디렉티브, 파이프 생성 (ng generate)

Angular CLI를 이용하면, 컴포넌트, 디렉티브, 파이프 등을 쉽게 생성할 수 있다. Command들은 다음과 같다. 

 Scaffold

Usage 

Componet

$ ng g componet 컴포넌트명 

Directive 

$ ng g directive 디렉티브명 

Pipe

$ ng g pipe 파이프명 

Service

$ ng g service 서비스명 

Class 

$ ng g class 클래스명 

Interface

$ ng g interface 인터페이스명 

Enum 

$ ng g enum 이넘명 

Module

$ ng g module 모듈명 







'IT & 개발 > angularJS' 카테고리의 다른 글

Angular 시작하기 (개발환경 세팅)  (0) 2017.11.07


오늘은 간단하게 명령어 중심으로 window 10 개발환경 세팅하는 법을 알아보자. 


#1 nodeJS 및 npm  환경 설정

npm을 이용하여 angular환경을 구축해야 하기 때문에, 먼저 nodeJS를 다운받아야 한다. 


nodeJS는 다음 링크에서 다운로드 받는다. 

https://nodejs.org/ko/download/




각자 OS에 맞게 다운로드 받으면 된다.


다운로드가 완료되었다면, cmd창을 열어서 다음 명령어를 입력해보자. 


$ node -v

$ npm -v


v6.7.0 과 같이 버전 정보가 출력된다면, 정상적으로 다운로드가 이루어진 것이다 .

다음으로 넘어가기 전에, npm 업데이트를 하고 넘어가자. 

cmd창에 다음 명령어를 입력하면 된다. 


$ npm install -g npm@latest   // npm 최신 버전으로 업데이트


#2 Angular 다운로드

AngularJS를 사용하기 위해선 package.json 파일 등 여러 파일 구조가 필요하다. 
하지만 이를 직접 코드를 작성하는 것은 꽤나 골아픈 짓이다. 
(물론 Angular를 이해하는데는 도움이 된다.)

이에 Angular CLI를 이용하여 간단히 개발환경을 구축해보자

$ npm install -g angular-cli

정상적으로 처리되었다면, angular를 개발하기 위한 준비가 완료된 것이다. 

#3 Project 생성

이제 마지막 단계인 프로젝트를 생성해보자. 
먼저 여러분이 소스파일을 저장하고 싶은 directory로 이동한다. 

(리눅스를 사용해본 경험이 없는 분들은.. 'cd directory주소'를 입력해주면 된다.  ex:  cd C:\Users\USER\OneDrive\개발\portfolio\portfolio )

이동 후 다음 명령어를 입력한다. 

$ ng new 프로젝트명

윈도우 참색창에서 해당디렉토리로 이동해보면, 프로젝트가 생성된 것을 확인할 수 있다. 

마지막으로 잘되었는지 확인해보기 위해. 

$ cd 프로젝트명
$ ng serve   // angular 서버를 실행하는 코드 


브라우저에서 'http://localhost:4200/'에 접속했을 때, 다음과 같은 창이 뜬다면..

여러분은 angular를 이용해 개발할 준비가 완료된 것이다. 



'IT & 개발 > angularJS' 카테고리의 다른 글

Angluar CLI 사용법  (0) 2018.02.16

+ Recent posts

티스토리툴바