Angular2のQuickStartをやってみた

Angular

Angular2のRC5がリリースされました。
そろそろ次ぐらいが安定版のリリースになる気がします。
Angular2からTypeScriptベースに変更されています。
Angular1系と比べかなり変わっているので、移行はかなり厳しそうです。
Angular2のQuickStartをやってみました。
angular.io
それとGulpやWebPackも一緒設定してみました。

基本構成

Angular2の基本的なディレクトリ構成は下記の構成です。

angular2-quickstart
 |-app
 |-gulpfile.js
 |-index.html
 |-package.json
 |-style.css
 |-tsconfig.json
 |-typings.json
 |-webpack.config.js
パッケージ管理の設定

利用するパッケージ管理する為にnode.jsのnpmを利用します。
npmでは利用するパッケージ管理用の設定ファイル（package.json）を作成します。

{
  "name": "angular2-quickstart",
  "version": "1.0.0",
  "scripts": {
    "start": "/usr/local/bin/gulp && /usr/local/bin/gulp connect ",
    "postinstall": "typings install",
    "typings": "typings"
  },
  "license": "MIT",
  "dependencies": {
    "@angular/common": "2.0.0-rc.5",
    "@angular/compiler": "2.0.0-rc.5",
    "@angular/core": "2.0.0-rc.5",
    "@angular/forms": "0.3.0",
    "@angular/http": "2.0.0-rc.5",
    "@angular/platform-browser": "2.0.0-rc.5",
    "@angular/platform-browser-dynamic": "2.0.0-rc.5",
    "@angular/router": "3.0.0-rc.1",
    "@angular/router-deprecated": "2.0.0-rc.2",
    "@angular/upgrade": "2.0.0-rc.5",
    "systemjs": "0.19.27",
    "core-js": "^2.4.0",
    "reflect-metadata": "^0.1.3",
    "rxjs": "5.0.0-beta.6",
    "zone.js": "^0.6.12",
    "angular2-in-memory-web-api": "0.0.15",
    "bootstrap": "^3.3.6"
  },
  "devDependencies": {
    "browser-sync": "^2.14.0",
    "concurrently": "^2.0.0",
    "connect-history-api-fallback": "^1.3.0",
    "gulp": "^3.9.1",
    "gulp-connect": "^5.0.0",
    "gulp-webpack": "^1.5.0",
    "lite-server": "^2.2.0",
    "proxy-middleware": "^0.15.0",
    "ts-loader": "^0.8.2",
    "typescript": "^1.8.10",
    "typings": "^1.0.4",
    "url": "^0.11.0"
  }
}
コンパイル設定

TypeScriptコードはコンパイルが必要です。
そのコンパイル時にコンパイルオプション及びコンパイル対象のTypeScriptコードの指定などの
設定をまとめた設定ファイル（tsconfig.json）を作成します。

{
	"compilerOptions": {
		"target": "es5",
		"module": "commonjs",
		"moduleResolution": "node",
		"sourceMap": true,
		"emitDecoratorMetadata": true,
		"experimentalDecorators": true,
		"removeComments": false,
		"noImplicitAny": false
	}
}
Typingsの設定

TypeScriptには型定義というものがあります。
その型が記述されているものが型定義ファイル（〜.d.ts）です。
一般的な型定義ファイルは下記のGitHubのリポジトリにあります。
https://github.com/DefinitelyTyped/DefinitelyTyped
利用する型定義ファイルを管理するものがTypingsです。
Typingsは利用する型定義ファイルをまとめた設定ファイル（typings.json)を作成します。

{
	"globalDependencies": {
		"core-js": "registry:dt/core-js#0.0.0+20160602141332",
		"jasmine": "registry:dt/jasmine#2.2.0+20160621224255",
		"node": "registry:dt/node#6.0.0+20160807145350"
	}
}
WebPackの設定

WebPackとはアプリケーションに必要なJavaScriptやCSSなどのリソースの依存関係を解決して
配布できる形にしてくるビルドツールです。
WebPackのビルド定義を行うビルド設定ファイル（webpack.config.js）を作成します。

module.exports = {
	entry : './app/main.ts',
	output : {
		filename : './bundle.js'
	},
	resolve : {
		root : [ './node_modules' ],
		extensions : [ '', '.webpack.js', 'web.js', '.js', '.ts' ]
	},
	module : {
		loaders : [ {
			test : /\.ts$/,
			loader : 'ts-loader'
		} ]
	}
}
Gulpの設定

Gulpとはサーバー設定やProxy設定及びリソースの圧縮などのタスクが定義できます。
Gulpのタスク定義は設定ファイル(gulpfile.js）を作成します。

var gulp = require('gulp');
var connect = require('gulp-connect');
var proxy = require('proxy-middleware');
var url = require('url');
var webpack = require('gulp-webpack');
var webpackConfig = require('./webpack.config.js');
gulp.task('ts', function() {
	return gulp.src([ './*.ts' ])
			.pipe(webpack(webpackConfig))
			.pipe(gulp.dest('./dist'));
});
gulp.task('index', function() {
	return gulp.src([ './index.html' ])
			.pipe(gulp.dest('./dist'));
});
gulp.task('css', function() {
	return gulp.src([ './styles.css' ])
			.pipe(gulp.dest('./dist'));
});
gulp.task('connect', function() {
  connect.server({
    root: ['dist'],
    port: 9000,
    livereload: true,
    middleware: function(connect, o) {
        return [ (function() {
            var options = url.parse('http://localhost:8080/service');
            options.route = '/service';
            return proxy(options);
        })() ];
    }
  });
});
gulp.task('default', [ 'ts', 'index', 'css']);
コンポーネント作成

Angular2はコンポーネント指向のJSフレームワークです。
そのコンポーネントは定義方法は下記のコードになります。

import {Component} from '@angular/core';
@Component({
	selector: 'my-app',
	template: '<h1>My First Angular 2 App</h1>'
})
export class AppComponent { }
モジュール定義作成

NgModuleは、コンポーネント、ディレクティブ、パイプ、サービスなどを一箇所にまとめて定義
してモジュールを宣言するものです。
基本的にこのモジュール宣言をアプリケーションには１つ定義する必要がありますが、
現状、宣言しなくとも書き方によってはアプリケーションは動きます。

import { NgModule } from '@angular/core';
import { BrowserModule } from '@angular/platform-browser';
import { FormsModule } from '@angular/forms';
import { HttpModule, JsonpModule } from '@angular/http';
import { AppComponent } from './app.component';
@NgModule({
	imports: [
		BrowserModule,
		FormsModule,
		HttpModule,
		JsonpModule
	],
	declarations: [
		AppComponent
	],
	bootstrap: [
		AppComponent
	]
})
export class AppModule { }
エントリーポイント作成

アプリケーションを起動する為のエントリーポイントを作成する必要があります。

import "core-js";
import "rxjs/Rx";
import "zone.js/dist/zone";

import { platformBrowserDynamic } from '@angular/platform-browser-dynamic';
import { AppModule } from './app.module';
platformBrowserDynamic().bootstrapModule(AppModule);
index.html作成

最後にindex.htmlを作成します。

<html>
<head>
<title>angular2-quickstart</title>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="styles.css">
</head>
<body>
	<my-app>Loading...</my-app>
</body>
<script src="./bundle.js"></script>
</html>
起動方法
cd angular2-quickstart
npm install
npm start