Hello Angular2 with angular-cli

angular cli 를 이용해서 빠르게 Hello 부터 찍어보겠습니다.
공식 사이트인 https://cli.angular.io 에서 사용법을 쉽게 확인할 수 있습니다.

https://cli.angular.io

커맨드 라인 인터페이스를 이용해서 angular2 웹페이지를 띄우기가 이렇게도 쉽습니다.

angular2-cli

npm 을 이용해서 커맨드 라인 인터페이스를 설치합니다.

npm i amgular-cli -g

cli 가 성공적으로 설치 되었으면, ‘ng new [프로젝트명]’ 이라는 명령어를 사용하여 프로젝트를 새로 만듭니다.

ng new hello-angular2

프로젝트가 성공적으로 만들어진 후, 해당 프로젝트 폴더로 이동합니다.

cd hello-angular2

‘ng serve’ 라는 명령어로 서버를 실행합니다.

ng serve

ng-serve

사이트를 바로 볼 수 있습니다.

ng-serve-site

angular-cli 를 통한 디렉토리 구조를 잠시만 살펴보고,

angular-cli-structure

브라우저에 찍힌 ‘app works!’ 부분을 고쳐보도록 하겠습니다.

hello-angular2/src/app/app.component.ts 파일에 적힌
‘app works!’ 부분을
‘Hello Angular2!’ 로 바꾸고 저장을 합니다.
저장만 해도 브라우저에 적힌 글귀가 자동으로 바뀝니다.

app.component.ts

일단은 브라우저에 Hello 를 빠르게 찍어 보았습니다. 다음 포스팅에는 디렉토리 구조에 대해 자세히 알아보겠습니다.

hello-angular2-site

답글 남기기

아래 항목을 채우거나 오른쪽 아이콘 중 하나를 클릭하여 로그 인 하세요:

WordPress.com 로고

WordPress.com의 계정을 사용하여 댓글을 남깁니다. 로그아웃 / 변경 )

Twitter 사진

Twitter의 계정을 사용하여 댓글을 남깁니다. 로그아웃 / 변경 )

Facebook 사진

Facebook의 계정을 사용하여 댓글을 남깁니다. 로그아웃 / 변경 )

Google+ photo

Google+의 계정을 사용하여 댓글을 남깁니다. 로그아웃 / 변경 )

%s에 연결하는 중