何はともあれ、ささっとAngular2を動かしてみたい!というときのためのYEOMANジェネレータを使ってAngular2を動かしてみる。このエントリーは「AngularJS Advent Calendar 2015」12月5日の記事です。
node.jsのインストール
もうフロントエンド開発では常識ですね。マシン買ったら何も考えずにnodebrew
使ってnode.js
入れましょう。ちなみにWindowsの場合ですが若干面倒なこともありますのでこちらは必読です:
generator-angular2のインストールと実行
今のところYEOMANジェネレータでAngular2は4つ。まだアルファ版ですからそんなもんです、先走りすぎても仕事じゃね。
$ npm i -g generator-angular2
さていつものようにディレクトリ作ってyo
します。
$ yo angular2
これが終わったらアプリケーションを起動します。
$ npm start
起動する画面は文字列を表示しているだけです。
中身
まず起動されるブートストラップはindex.js
でそこからディレクティブangular-2.js
を呼び出しています:
(index.js) import {Component, View, bootstrap} from 'angular2/angular2'; import {Angular2} from 'angular-2'; @Component({ selector: 'main' }) @View({ directives: [Angular2], template: ` <angular-2></angular-2> ` }) class Main { } bootstrap(Main);
(angular-2.js) import {ComponentMetadata as Component, ViewMetadata as View} from 'angular2/angular2'; @Component({ selector: 'angular-2' }) @View({ templateUrl: 'angular-2.html' }) export class Angular2 { constructor() { console.info('Angular2 Component Mounted Successfully'); } }
最後に
このくらいのソースだとAngular1で慣れてる人は直感的に何がどうなってるかすぐに理解出来ると思います。まだアルファ版なのでゆっくりゆっくりで。