SystemJS 로 Angular2 로컬 개발 환경 만들기

소스 보기

개요

  • 꼭 필요한 최소한의 라이브러리만 이용합니다.
  • SystemJS 를 사용하였습니다.
  • angular-cli 를 사용하지 않았습니다.
  • jspm 을 사용하지 않았습니다.
  • 브라우저에서 미리 TypeScript 를 트랜스파일한 형태의 JS 파일만을 이용합니다.
  • SystemJS 에서는 트랜스파일하지 않습니다.
  • 테스트용 로컬 서버는 http-server 를 이용하였습니다.

angular2 가 의존하는 라이브이러리 설명 (2.4.2 기준)

  • core-js
    • 자바스크립트를 위한 표준 모듈 라이브러리입니다.
    • 상위 버전의 자바스크립트 스펙 사용을 위한 폴리필의 역할을 합니다.
    • reflect-metadatacore-js 에 포함되어 있기 때문에 따로 추가할 필요가 없습니다.
      • reflect-metadata 는 Decorator Metadata 를 위한 ES7 Reflection API 를 사용할 수 있게 해주는 라이브러리 입니다.
  • zone.js
    • Change Detection 의 역할을 합니다.
    • 모델의 변경을 감지하기 위해 angular 가 제공하던 방식이 아닌 범용 디텍션 라이브러리 입니다.
  • rxjs
    • The ReactiveX library for JavaScript 입니다.
    • 말이 필요없네요. Go
    • angular2 에서 기본 탑재한 패키지입니다.

그래서 최종 설치한 패키지 리스트

  • SystemJS 패키지
    • “systemjs”: “^0.19.41”
  • angular2 최소 패키지
    • “@angular/common”: “^2.4.2”
    • “@angular/compiler”: “^2.4.2”
    • “@angular/core”: “^2.4.2”
    • “@angular/platform-browser”: “^2.4.2”
    • “@angular/platform-browser-dynamic”: “^2.4.2”
  • core-js 패키지
    • “core-js”: “^2.4.1”
  • zone.js 패키지
    • “zone.js”: “^0.7.4”
  • rxjs 패키지
    • “rxjs”: “^5.0.3”
  • TypeScript 패키지 (트랜스파일하기 위한)
    • “typescript”: “^2.1.4”
  • http-server 패키지 (테스트용 로컬 서버를 띄우기 위한)
    • “http-server”: “^0.9.0”

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