SPAの強い味方Angularから2がリリースされました。

てことで試してみます。

環境は

windows 7

visual studio code

npm 4.1.1

node 6.9.2

とりあえず動くか確認

https://angular.io/docs/ts/latest/guide/learning-angular.html

1
2
3

c:\usr\src>git clone https://github.com/angular/quickstart.git ng2quickstart
c:\usr\src>cd ng2quickstart
c:\usr\src\ng2quickstart>code .

こっからはvisual studio code の統合ターミナル(Ctrl+@)で作業してみる。

1
2

C:\usr\src\ng2quickstart>npm install
C:\usr\src\ng2quickstart>npm start    #開発中は実行しっぱなしにしとく

でた

Visual Studio Codeの設定

app以下の*.tsファイルを開くと

“ワークスペース フォルダーには TypeScript バージョン 2.0.10 があります。バンドルされたバージョン 2.1.4 ではな…”的なメッセージが表示されます。

こちらを参考にユーザー設定ファイルに

1
2

"typescript.check.workspaceVersion": false,
        "typescript.check.tscVersion": false

を追加しときます。

typescript(*.ts)から生成されたjavascript(*.js)が若干うざいのでこちらにあるとおりにして表示しないようにします。

1
2
3
4
5
6
7

"files.exclude": {
        "**/.git": true,
        "**/.svn": true,
        "**/.hg": true,
        "**/.DS_Store": true,
        "**/*.js": { "when": "$(basename).ts"}
    },

チュートリアルをやってみる

結構しっかりしたチュートリアルが用意されているのでやってみます。

つまづきポイントをメモ。

THE HERO EDITOR

  • export class Hero は@Componentより前に書く。

Visual Studio Codeでデバッグ

こちらによるとAngular2 + Typescript + Visual Studio Codeでデバックするには。

“Debugger for Chrome“というのが要るらしい。

Ctrl+Shift+p => “Extentions: Install” => “Debugger for Chrome” => インストール

インストールが終わったら、

Ctrl+Shift+Dでデバッグを開いて、歯車アイコンをクリック。環境はnode.jsを選択。すると、.vscode\launch.jsonが作られます。

stackoverflowの構成ではうまく動きませんでした。いろいろ試してこんな感じになりました。

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11

{
            "name": "Launch",
            "type": "chrome",
            "request": "launch",
            "url": "http://127.0.0.1:3000",
            "port": 9222,
            "sourceMaps": true,
            "diagnosticLogging": true,
            "webRoot": "${workspaceRoot}",
            "userDataDir": "temp"
        },

で

angular1とは似て非なるものになっています。aspとaspxみたいなもん？

typescriptベースになったので、環境準備が若干面倒ですが、すっきりかけるようになりました。

まだチュートリアル途中です。コツコツやっていきます。