Angular2 를 준비하기

Angular 2 와 Angular 1.x 차이

JavaScript를 기반으로하는 스크립트 언어.

Angular 1.x에 대한 지식이 필요하지 않지만 JavaScript, Node.js 및 npm에 대한 지식이 필요합니다.

Angular 2 는 TypeScriptECMA6 를 포함하고 있습니다.

기존에는 Angular 1.x 를 공부하면 됐지만, 이제는 typescript에 대해서 공부를 해야합니다. 또다른 자바스크립트를 공부하는 느낌입니다.
자나깨나 여러가지 언어를 혼합해서 사용하고 있는데, 이제는 점점 더 정리가 안되고 있습니다.

TypeScript는 JavaScript 확장을 돕기 위해 마이크로소프트에서 개발한 무료 오픈 소스 언어입니다. 고급 자동완성, 탐색 및 리팩터링을 제공합니다. 자세한 내용은 https://www.typescriptlang.org/ 에서 확인 할수 있습니다.

ECMA6는 클래스 및 모듈을 사용할 수있게 해주는 JavaScript 의 표준입니다. http://es6-features.org/ 를 참조하면 됩니다.

개발툴

Microsoft 의 Visual Studio Code 을 추천합니다.

기본적으로 마소에서 만들었기 때문에 TypeScript 언어를 잘 지원하고 있습니다. 개인적으로 Atom.io보다 최적화가 잘되어 있다고 생각합니다.
Atom 은 참여하는 사람들이 많아서 다양한 기능들을 찾을 수 있지만, 어수선합니다. 처음에는 Atom 으로 시작을 했지만, 지금은 Visual Code 에 정착해서 사용하고 있습니다.

폴더세팅

응용 프로그램을 시작하고 실행하기 위한 준비가 되었습니다.

package

package.json을 만들어서 npm 세팅을 하면 되지만, 다음과 같이 하면 기본세팅으로 자동설정이 됩니다.

# npm init --yes

그리고 아래 들어있는 내용은 아래와 같은 내용입니다.

{
  "name": "ng2-helloworld",
  "version": "1.0.0",
  "description": "",
  "main": "index.js",
  "scripts": {
    "test": "echo \"Error: no test specified\" && exit 1"
  },
  "keywords": [],
  "author": "",
  "license": "ISC"
}

새로운 파일 tsconfig.json을 만듭니다.

# touch tsconfig.json

안에 내용을 다른과 같이 작성합니다.

{
  "compilerOptions": {
    "target": "es5",
    "module": "system",
    "moduleResolution": "node",
    "sourceMap": true,
    "emitDecoratorMetadata": true,
    "experimentalDecorators": true,
    "removeComments": false,
    "noImplicitAny": false
  },
  "exclude": [
    "node_modules",
    "typings/main",
    "typings/main.d.ts"
  ]
}

이 파일 대부분은 TypeScript 응용 프로그램의 기본 구성입니다. tsconfig.json파일을 처리하는 방법에 대해서 컴파일러에 알져주는 역할을 합니다.
noImplicitAny 변수는 컴파일러에게 변수 선언을 처리하는 방법을 알려줍니다. false로 설정을하면 기본 유형을 any로 설정할 수 있으므로 Angular 2 를 좀 더 쉽게 학습할 수 있습니다.

tsconfig.json에 대한 문서

새로운 파일 typings.json을 만들고 다음 내용을 추가 합니다.

{
  "ambientDependencies": {
    "es6-shim": "github:DefinitelyTyped/DefinitelyTyped/es6-shim/es6-shim.d.ts#7de6c3dd94feaeb21f20054b9f30d5dabc5efabd",
    "jasmine": "github:DefinitelyTyped/DefinitelyTyped/jasmine/jasmine.d.ts#7de6c3dd94feaeb21f20054b9f30d5dabc5efabd"
  }
}

새로운 파일 package.json파일을 만들고 아래 내용을 추가합니다.

{
  "name": "ng2-helloworld",
  "version": "1.0.0",
  "scripts": {
    "start": "tsc && concurrently \"npm run tsc:w\" \"npm run lite\" ",
    "tsc": "tsc",
    "tsc:w": "tsc -w",
    "lite": "lite-server",
    "typings": "typings",
    "postinstall": "typings install"
  },
  "license": "ISC",
  "dependencies": {
    "angular2": "2.0.0-beta.14",
    "systemjs": "0.19.25",
    "es6-shim": "^0.35.0",
    "reflect-metadata": "0.1.2",
    "rxjs": "5.0.0-beta.2",
    "zone.js": "0.6.6"
  },
  "devDependencies": {
    "concurrently": "^2.0.0",
    "lite-server": "^2.2.0",
    "typescript": "^1.8.9",
    "typings":"^0.7.12"
  }
}

tsc : 타입스크립트 컴파일러
lite : 실시간으로 파일변경을 감지해서 브라우저에 반영. 앵귤러 앱을 시작하기 위한 위한 파일 서버
typings : typings 툴을 시작
postinstall : npm 설치후에 타이핑 설치 method 실행

여기서 npm install 명령을 실행하셔야 문제가 없습니다.

 # npm install

npm manager 는 진리입니다. 그런데, 최근에는 비슷한 소스 이름으로 올려서 개인정보를 훔쳐가는 일이 발생했다고 하는데, npm install명령을 사용할때 소스 이름을 잘 파악해서 사용해야 되겠습니다.

이제 /app라는 하위폴더를 만들고 다음을 실행합니다.

 # mkdir app
 # cd app

컴포넌트(component) 파일 app.component.ts파일을 생성하고, 아래와 같은 내용을 입력합니다.

import {Component} from 'angular2/core';

@Component({
    selector: 'my-app',
    template: '<h1>Hello World !</h1>'
})
export class AppComponent { }

이파일은 컴포넌트의 루트 컴포넌트(root component) 파일입니다.
이 파일 안에는 angular2/core 모듈을 가져오는 import와 메타 데이터 객체를 가져오는 @Component데코레이터가 있습니다.
export class Appcomponent{}은 메인 어플리케이션을 가져오기 위해서 사용하는 빈 클래스 입니다.

이제 Angular가 방금 생성 한 구성 요소 파일을 로드 할 수 있도록 파일을 만들어야 합니다.

main.ts라는 파일을 만들고, 파일이 /app폴더에 있는 것을 확인하고 다음 코드들을 입력합니다.

import {bootstrap} from 'angular2/platform/browser'
import {AppComponent} from './app.component'

bootstrap(AppComponent)

bootstrap : 사용하기로 결정한 플랫폼을 기반으로해서 컴포넌트 로딩을 처리합니다.

다시 package.json 이 있는 폴더로 돌아옵니다.

index.html파일을 만들고 다음 코드를 입력합니다.

<html>
  <head>
    <title>Angular 2 Hello World</title>
    <meta name="viewport" content="width=device-width, initial-scale=1">

    <script src="node_modules/es6-shim/es6-shim.min.js"></script>
    <script src="node_modules/systemjs/dist/system-polyfills.js"></script>
    <script src="node_modules/angular2/es6/dev/src/testing/shims_for_IE.js"></script>

    <script src="node_modules/angular2/bundles/angular2-polyfills.js"></script>
    <script src="node_modules/systemjs/dist/system.src.js"></script>
    <script src="node_modules/rxjs/bundles/Rx.js"></script>
    <script src="node_modules/angular2/bundles/angular2.dev.js"></script>

    <script>
      System.config({
        packages: {        
          app: {
            format: 'register',
            defaultExtension: 'js'
          }
        }
      });
      System.import('app/main')
            .then(null, console.error.bind(console));
    </script>
  </head>

  <body>
    <my-app>Loading...</my-app>
  </body>
</html>

지금까지 아래와 같은 폴더 구성을 갖고 있을겁니다.

Imgur

다음을 실행해서 제대로 되었는지 확인해 봅닌다.
문제가 없다면 다음과 같은 화면이 나오는 것을 확인 할 수 있습니다.

Imgur

반응형

+ Recent posts