Subscribed unsubscribe Subscribe Subscribe

AngularJS2 5MIN QUICKSTARTしてみる

angular.io

github.com

1.Set up our development environment

  • プロジェクトディレクトリの作成
mkdir {{プロジェクトディレクトリ}}
cd {{プロジェクトディレクトリ}}
{
  "name": "angular2-quickstart",
  "version": "1.0.0",
  "scripts": {
    "tsc": "tsc",
    "tsc:w": "tsc -w",
    "lite": "lite-server",
    "start": "concurrent \"npm run tsc:w\" \"npm run lite\" "
  },
  "license": "ISC",
  "dependencies": {
    "angular2": "2.0.0-beta.0",
    "systemjs": "0.19.6",
    "es6-promise": "^3.0.2",
    "es6-shim": "^0.33.3",
    "reflect-metadata": "0.1.2",
    "rxjs": "5.0.0-beta.0",
    "zone.js": "0.5.10"
  },
  "devDependencies": {
    "concurrently": "^1.0.0",
    "lite-server": "^1.3.1",
    "typescript": "^1.7.3"
  }
}
npm install
{
  "compilerOptions": {
    "target": "ES5",
    "module": "system",
    "moduleResolution": "node",
    "sourceMap": true,
    "emitDecoratorMetadata": true,
    "experimentalDecorators": true,
    "removeComments": false,
    "noImplicitAny": false
  },
  "exclude": [
    "node_modules"
  ]
}

tsconfig.json · Microsoft/TypeScript Wiki · GitHub

2.Write the Angular root component for our app

  • create app dir
mkdir app
cd app
  • app/app.component.ts
import {Component} from 'angular2/core';

@Component({
    selector: 'my-app',
    template: '<h1>My First Angular 2 App</h1>'
})
export class AppComponent { }
package.jsonのreflect-metadataを使用して、Angularにmetadataを@Componentで提供することで
クラスがAngularのコンポーネントになることができます。  

※SystemJSの設定のdefaultExtensionがimportする際のファイルの拡張子として使用されます。    
※import {Component} from 'angular2/core';していることが前提です    

@Component tells Angular that this class is an Angular component.     
The configuration object passed to the @Component method has two fields, a selector and a template.    

つまり、selectorを見つけたら、templateに変換せよということを指定しています  

exportするクラス名はファイル名の単語の先頭を大文字にして.をなくしたものにします。  

3.Bootstrap it to take control of the main web page

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

bootstrap(AppComponent);
※なぜ、angular2/coreではなく、angular2/platform/browserか  
↓  
coreはすべてのプラットフォーム共通のもの。  
今回はブラウザがターゲットのため。  
その他のターゲットはCordova等を想定している。  

Write the main page (index.html)

<html>

  <head>
    <title>Angular 2 QuickStart</title>

    <!-- 1. Load libraries -->
    <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>

    <!-- 2. Configure SystemJS -->
    <script>
      System.config({
        packages: {        
          app: {
            format: 'register',
            defaultExtension: 'js'
          }
        }
      });
      System.import('app/boot')
            .then(null, console.error.bind(console));
    </script>

  </head>

  <!-- 3. Display the application -->
  <body>
    <my-app>Loading...</my-app>
  </body>

</html>
  • 留意点1.AngularJS2の依存ファイル
    <script src="node_modules/angular2/bundles/angular2-polyfills.js"></script>
    <script src="node_modules/rxjs/bundles/Rx.js"></script>
  • 留意点2.Systemにapp/bootをimportするように指定
    <script src="node_modules/systemjs/dist/system.src.js"></script>
    .....
    <script>
      System.config({
        packages: {        
          app: {
            format: 'register',
            defaultExtension: 'js'
          }
        }
      });
      System.import('app/boot')
            .then(null, console.error.bind(console));
    </script>

systemjs/config-api.md at master · systemjs/systemjs · GitHub

  • 留意点3.AngularComponentのselectorの配置位置
bodyタグ内

起動

  • コマンド
npm start
  • 何が実行されているか
  "scripts": {
    "tsc": "tsc",
    "tsc:w": "tsc -w",
    "lite": "lite-server",
    "start": "concurrent \"npm run tsc:w\" \"npm run lite\" "
  }

※変更がある度に再コンパイルされ、ブラウザに反映されます。

ES6対応

  • 読み込み
    <script src="node_modules/es6-shim/es6-shim.js"></script>

※jsでは一番先頭で読み込みます

  • 前提
  "dependencies": {
    .....
    "es6-shim": "^0.33.3",
    .....
  }

※package.json

noImplicitAny

true → TypeScript compilerは型を推測できない
※IndexErrorを抑制したい場合→"suppressImplicitAnyIndexErrors":true

false → 型はanyになる

SystemJSについて

    <!-- 2. Configure SystemJS -->
    <script>
      System.config({
        packages: {
          app: {
            format: 'register',
            defaultExtension: 'js'
          }
        }
      });
      System.import('app/boot')
            .then(null, console.error.bind(console));
    </script>
  • 大まかな流れ
SystemJSのbootの設定
AngularJS2はSystemJSのbootを元にアプリケーションを起動する

※defaultExtensionはimportの際の拡張子として使用されます

Next Step

Tutorial: Tour of Heroes - ts