私の使用している環境は
OSX Yosemite10.10
AngularJS2を使用するのに↓のリンクを使ってもいいのですが、
https://code.angularjs.org/tools/system.js
https://code.angularjs.org/tools/typescript.js
https://code.angularjs.org/2.0.0-alpha.44/angular2.dev.js
自分の環境だけで完結するシステムを作りたい場合は、AngularJS2自体を自分の環境に持ってきます。
まずはNode.jsをこちらからインストールする必要があります。
|
1 2 |
$ node -v v4.2.1 |
コマンドラインで上の用にコマンドしてNode.jsのバージョンが表示されたらインストール成功。
|
1 2 3 |
npm init -y npm i angular2@2.0.0-alpha.44 systemjs@0.19.2 --save --save-exact npm i typescript live-server --save-dev |
上のコマンドでアプリ内にpackage.jsonというファイルができます。
このファイルの”scripts”というメソッドができているので、これを下の様に書き換えます。
|
1 2 3 4 |
"scripts": { "tsc": "tsc -p src -w", "start": "live-server --open=src" } |
angular2-quickstart
└── src
├── app
│ └── app.ts
└── index.html
っという構造でapp.stとindex.htmlを作成する。
index.htmlは以下のようにする。
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 |
<html> <head> <title>Angular 2 QuickStart</title> <script src="../node_modules/systemjs/dist/system.src.js"></script> <script src="../node_modules/angular2/bundles/angular2.dev.js"></script> <script> System.config({ packages: {'app': {defaultExtension: 'js'}} }); System.import('app/app'); </script> </head> <body> <my-app>Loading...</my-app> </body> </html> |
app.tsは以下のようにする。
|
1 2 3 4 5 6 7 |
import {Component, bootstrap} from 'angular2/angular2'; @Component({ selector: 'my-app', template: '<h1>My First Angular 2 App</h1>' }) class AppComponent { } bootstrap(AppComponent); |
ターミナルウィンドウを開いて、アプリのルートで
|
1 |
npm run tsc |
を実行します。
そうすると
angular2-quickstart
└── src
├── app
│├──app.js (※これが追加されている)
│├──app.js.map (※これ追加されている)
│ └── app.ts
└── index.html
となります。
localhostのブラウザで確認して、↓が表示されたらOKです。
”
My First Angular 2 App
”