Angular 2 시작하기: Release Update!

<!DOCTYPE html>
<html>
  <head>
    <title>Angular 2 예제</title>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">

    <!-- 1. 필요한 라이브러리 로드 -->
    <!-- 구형 브라우저 지원을 위한 라이브러리 -->
    <script src="https://unpkg.com/core-js/client/shim.min.js"></script>

    <script src="https://unpkg.com/zone.js@0.6.25?main=browser"></script>
    <script src="https://unpkg.com/reflect-metadata@0.1.3"></script>
    <script src="https://unpkg.com/systemjs@0.19.27/dist/system.src.js"></script>

    <!-- 2단계: SystemJS 설정 -->
    <script>
        // map 변수는 SystemJS 로더가 어디를 찾아야 할 지 매핑해줌
        var map = {
          'app': 'app',
          '@angular': 'https://unpkg.com/@angular',
          '@angular/router': 'https://unpkg.com/@angular/router',
          'rxjs': 'https://unpkg.com/rxjs@5.0.0-beta.6',
          'ts': 'https://unpkg.com/plugin-typescript@4.0.10/lib/plugin.js',
          'typescript':  'https://unpkg.com/typescript@1.9.0-dev.20160409/lib/typescript.js',
       };
      
        // packages 변수는 SystemJS 로더에게 파일을 로드하는 방법을 알려주도록 함.
        var packages = {
          'app': { main: 'main.ts',  defaultExtension: 'ts' },
          'rxjs': { defaultExtension: 'js' },
          '@angular/core': { main: 'bundles/core.umd.js', defaultExtension: 'js'},
          '@angular/common': { main: 'bundles/common.umd.js', defaultExtension: 'js'},
          '@angular/compiler': { main: 'bundles/compiler.umd.js', defaultExtension: 'js'},
          '@angular/http': { main: 'bundles/http.umd.js', defaultExtension: 'js'},
          '@angular/platform-browser': { main: 'bundles/platform-browser.umd.js', defaultExtension: 'js'},
          '@angular/platform-browser-dynamic': { main: 'bundles/platform-browser-dynamic.umd.js', defaultExtension: 'js'},
        };
      
        var config = {
        // 브라우저에서 TypeScript 를 JavaScript로 트랜스파일 시켜주도록 설정
          transpiler: 'ts',
          typescriptOptions: {
            tsconfig: true
          },
          meta: {
            'typescript': {
              "exports": "ts"
            }
          },
          map: map,
          packages: packages
        };
      
        System.config(config);
    </script>
    <script>
        System.import('app').catch(function(err){ console.error(err); });
    </script>
  </head>

  <!-- 3. 어플리케이션 로드 -->
  <body>
    <app>Loading...</app>
  </body>
</html>

import { platformBrowserDynamic } from '@angular/platform-browser-dynamic';
import { AppModule } from './app.module';

// 어플리케이션 부팅
platformBrowserDynamic().bootstrapModule(AppModule);

import { NgModule }      from '@angular/core';
import { BrowserModule } from '@angular/platform-browser';

import { AppComponent }  from './app.component';

@NgModule({
  imports:      [ BrowserModule ],
  declarations: [ AppComponent ],
  bootstrap:    [ AppComponent ]
})
export class AppModule { }

import { Component } from '@angular/core';

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

{
  "compilerOptions": {
    "target": "es5",
    "module": "commonjs",
    "moduleResolution": "node",
    "sourceMap": true,
    "emitDecoratorMetadata": true,
    "experimentalDecorators": true,
    "removeComments": false,
    "noImplicitAny": true,
    "suppressImplicitAnyIndexErrors": true
  }
}