[AngularJs2] AngularJs2 설치

AngularJs2 설치

1. npm설치

- 기본적으로 npm을 이용하여 AngularJs2를 설치한다

- npm을 이용하면 모듈 의존성 관리를 통해 모듈간의 충돌을 막는다

- package.json이라는 파일로 의존성 관리를 한다

2. Angular 개발서버 실행

1)  package.json 

- npm init

-  위 명령어로 기본 package.json 생성

- 기본 설정으로 만들경우 : npm init --yes

{ "name": "angular", "version": "1.0.0", "description": "", "main": "index.js", "scripts": { "test": "echo \"Error: no test specified\" && exit 1" }, "author": "", "license": "ISC" }

3.  타입스크립트 설치

- Angular2 는 기본적으로 타입스크립트를 주력 언어로 사용

$npm install -g typescript

$tsc -v : 버전확인

$tsc app.ts -t ES5 : 타입스크립트를 브라우저에 적용할 때 일반 스크립트 언어로 컴파일

4. Angular 프로젝트구성

1) package.json

{ "name": "angular-quickstart", "version": "1.0.0", "scripts": { "start": "tsc && concurrently \"tsc -w\" \"lite-server\" ", "lite": "lite-server", "postinstall": "typings install", "tsc": "tsc", "tsc:w": "tsc -w", "typings": "typings" }, "licenses": [ { "type": "MIT", "url": "https://github.com/angular/angular.io/blob/master/LICENSE" } ], "dependencies": { "@angular/common": "~2.0.2", "@angular/compiler": "~2.0.2", "@angular/core": "~2.0.2", "@angular/forms": "~2.0.2", "@angular/http": "~2.0.2", "@angular/platform-browser": "~2.0.2", "@angular/platform-browser-dynamic": "~2.0.2", "@angular/router": "~3.0.2", "@angular/upgrade": "~2.0.2", "angular-in-memory-web-api": "~0.1.5", "bootstrap": "^3.3.7", "core-js": "^2.4.1", "reflect-metadata": "^0.1.8", "rxjs": "5.0.0-beta.12", "systemjs": "0.19.39", "zone.js": "^0.6.25" }, "devDependencies": { "concurrently": "^3.0.0", "lite-server": "^2.2.2", "typescript": "^2.0.3", "typings":"^1.4.0" } }

-  dependencies : 앵귤러 실행과 관련된 직접적인 의존성 패키지 추가

- devDependencies : 개발 과정에 필요한 의존성 패키지 추가

2) npm install 

-  현재 디렉토리를 기준으로 node_modules 디렉토리에 의존 모듈이 설치됩니다

3) npm start  

- Angular 개발 서버 실행