Angular2のGetStartを試す
TypeScript？
基本的にはTypeScriptで書くような感じがいいらしい
JSの書き方だと可読性などやりにくい感じからかも…
実装
プロジェクト作成
IDEでもなんでもルートのディレクトリを作成する
package.jsonを準備
nodejsでパッケージを準備するのでpackage.jsonを作成
{ "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" } }
tsconfig.jsonを作成
tsconfig.json
{ "compilerOptions": { "target": "ES5", "module": "system", "moduleResolution": "node", "sourceMap": true, "emitDecoratorMetadata": true, "experimentalDecorators": true, "removeComments": false, "noImplicitAny": false }, "exclude": [ "node_modules" ] }
npmでインストール
npm install
※必要なパッケージを取り込む
※１回でインストールが成功しない場合がある場合は何回か試してみる
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 { }※簡単なコンポーネントを作成してexport定義する
app/boot.ts
import {bootstrap} from 'angular2/platform/browser'
import {AppComponent} from './app.component'
bootstrap(AppComponent);※基本こいつはbootstrapとなるので変更は不要な感じのものって気がする
index.htmlを作成
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>
実行
npm start
$ npm start > angular2-quickstart@1.0.0 start /Volumes/Transcend/samples/angular2-quickstart > concurrent "npm run tsc:w" "npm run lite" [0] [0] > angular2-quickstart@1.0.0 tsc:w /Volumes/Transcend/samples/angular2-quickstart [0] > tsc -w [0] [1] [1] > angular2-quickstart@1.0.0 lite /Volumes/Transcend/samples/angular2-quickstart [1] > lite-server [1] [1] [BS] Access URLs: [1] ------------------------------------- [1] Local: http://localhost:3000 [1] External: http://192.168.65.2:3000 [1] ------------------------------------- [1] UI: http://localhost:3001 [1] UI External: http://192.168.65.2:3001 [1] ------------------------------------- [1] [BS] Serving files from: ./ [1] [BS] Watching files... [1] 15.12.27 03:58:20 200 GET /./index.html (Unknown - 59ms) [0] 03:58:20 - Compilation complete. Watching for file changes. [1] 15.12.27 03:58:21 200 GET /node_modules/angular2/bundles/angular2-polyfills.js (Unknown - 201ms) [1] 15.12.27 03:58:21 200 GET /node_modules/systemjs/dist/system.src.js (Unknown - 437ms) [1] 15.12.27 03:58:21 200 GET /node_modules/rxjs/bundles/Rx.js (Unknown - 468ms) [1] 15.12.27 03:58:21 200 GET /node_modules/angular2/bundles/angular2.dev.js (Unknown - 886ms) [1] 15.12.27 03:58:21 200 GET /app/boot.js (Unknown - 78ms) [1] 15.12.27 03:58:22 200 GET /app/app.component.js (Unknown - 337ms) [1] 15.12.27 03:58:22 404 GET /favicon.ico (Unknown - 11ms)
↓
うーん寂しい
けどなんとか動いた
階層
. ├── app │ ├── app.component.js │ ├── app.component.js.map │ ├── app.component.ts │ ├── boot.js │ ├── boot.js.map │ └── boot.ts ├── index.html ├── node_modules │ ├── angular2 │ ├── concurrently │ ├── es6-promise │ ├── es6-shim │ ├── lite-server │ ├── reflect-metadata │ ├── rxjs │ ├── systemjs │ ├── typescript │ └── zone.js ├── package.json └── tsconfig.json
※ソースマップを使えばデバッグもできるはずなので大丈夫かと
所感
今回はちょっとした触り程度を試した。
nodejsをやり始めたのでなんとなくやり方もわかってきた感じ
TypeScriptでしかチュートリアルしかなかったけどjavascriptでの記法の場合は結構ややこしくなりそうなのでこちらの方が理解しやすいからかと思った。
チュートリアルのほうもちょっと見てみることにする
