Angular 2 のサイトが公開されています。Angularのロゴも微妙に変わったようで縁のグレーっぽいところがなくなりスマートなデザインになっています。そしてサイトのはじめに「Angularは、モバイルとデスクトップのWebアプリケーションを構築するための開発プラットフォームです」と書いてますので、心意気というかそういったものが伝わってきます。
この内容は、鹿児島でAngularハンズオンが行わたときに味見した Angular 2 メモです。今回も多くの方に集まって頂き感謝しております。
AngularJSハンズオン@鹿児島 - AngularJS Japan User Group | Doorkeeper
味見
5 min quickstart
「5 min quickstart」というサイトがありますのでかなり荒い感じですが大枠を把握することができます。ちなみに「Angular 2 for Dart」というのもありますので Dart 好きな人はどうぞどうぞ。
完成すると次のような画面が表示されます：
コードはこちら。
angular2_quickstart |- quickstart |- app.es6 |- index.html
index.html:
<html> <head> <title>Angular 2 Quickstart</title> <script src="/quickstart/dist/es6-shim.js"></script> </head> <body> <my-app></my-app> <script> System.paths = { 'angular2/*':'/quickstart/angular2/*.js', 'rtts_assert/*': '/quickstart/rtts_assert/*.js', 'app': 'app.es6' }; System.import('app'); </script> </body> </html>
app.es6:
import {Component, Template, bootstrap} from 'angular2/angular2'; // Annotation section @Component({ selector: 'my-app' }) @Template({ inline: '<h1>Hello {{ name }}</h1>' }) // Component controller class MyAppComponent { constructor() { this.name = 'Alice'; } } bootstrap(MyAppComponent);
参考までにテンプレート部分は次のように別ファイルとして定義することができます：
@Template({ url: 'app.html' })
Angular 2はWeb Components化されているようです。コンポーネントがShadow DOMになっているのが分かります：
ng2do
Angular 2 で作られている「ng2do」というTodoアプリがあります。
ようつべ解説もあります。ようつべを聞きつつソースコードを確認できるので良い学びになります。
An Angular2 Todo App: First look at App Development in Angular2 - YouTube
このアプリケーションでは Firebase というライブラリが使われています。Firebase はサーバ管理不要で、高速・スケーラブル・リアルタイムなバックエンドを提供するサービスです。
Firebase - Build Realtime Apps
最後に
昨年、Angular 2 は AtScript でと言った発表がありましたが、今年３月に行われたカンファレンスではTypeScriptでというアナウンスもありのまだまだ進歩し続けるAngularですが、この Angular 2 + ES6 もかなり面白そうな雰囲気ではないかと思います。そろそろこのあたりも触っていこう。
そんな中、3/21(土)に ng-japan カンファレンスが開催されます。定員500名ですので行けばだれでもはいれるんじゃないかという人数だと思います。是非足をお運びください。そしてそして、そのカンファレンスを題材にCode IQさんで問題も作っちゃいました。是非問いてみてくだされ：
ハンズオンとは関係ありませんが、鹿児島は良い所でした：
桜島
鹿児島中央
甲突川
