読者です 読者をやめる 読者になる 読者になる

albatrosary's blog

Azure と Angular と Wercker CI とか

Angular 2 は ES6とWeb Componentsを意識した作り?(Angular ハンズオン in 鹿児島)

Angular 2 のサイトが公開されています。Angularのロゴも微妙に変わったようで縁のグレーっぽいところがなくなりスマートなデザインになっています。そしてサイトのはじめに「Angularは、モバイルとデスクトップのWebアプリケーションを構築するための開発プラットフォームです」と書いてますので、心意気というかそういったものが伝わってきます。

f:id:albatrosary:20150314143530p:plain

この内容は、鹿児島でAngularハンズオンが行わたときに味見した Angular 2 メモです。今回も多くの方に集まって頂き感謝しております。

AngularJSハンズオン@鹿児島 - AngularJS Japan User Group | Doorkeeper

味見

5 min quickstart

「5 min quickstart」というサイトがありますのでかなり荒い感じですが大枠を把握することができます。ちなみに「Angular 2 for Dart」というのもありますので Dart 好きな人はどうぞどうぞ。

5 Min Quickstart - js

完成すると次のような画面が表示されます:

f:id:albatrosary:20150315163215p:plain

コードはこちら。

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になっているのが分かります:

f:id:albatrosary:20150316082331p:plain

ng2do

Angular 2 で作られている「ng2do」というTodoアプリがあります。

davideast/ng2do · GitHub

ようつべ解説もあります。ようつべを聞きつつソースコードを確認できるので良い学びになります。

f:id:albatrosary:20150314144525p:plain

An Angular2 Todo App: First look at App Development in Angular2 - YouTube

このアプリケーションでは Firebase というライブラリが使われています。Firebase はサーバ管理不要で、高速・スケーラブル・リアルタイムなバックエンドを提供するサービスです。

Firebase - Build Realtime Apps

最後に

昨年、Angular 2 は AtScript でと言った発表がありましたが、今年3月に行われたカンファレンスではTypeScriptでというアナウンスもありのまだまだ進歩し続けるAngularですが、この Angular 2 + ES6 もかなり面白そうな雰囲気ではないかと思います。そろそろこのあたりも触っていこう。

そんな中、3/21(土)に ng-japan カンファレンスが開催されます。定員500名ですので行けばだれでもはいれるんじゃないかという人数だと思います。是非足をお運びください。そしてそして、そのカンファレンスを題材にCode IQさんで問題も作っちゃいました。是非問いてみてくだされ:

挑戦者求む!html5j 佐川 夫美雄さん|CodeIQ

f:id:albatrosary:20150316083709p:plain

ハンズオンとは関係ありませんが、鹿児島は良い所でした:

桜島 f:id:albatrosary:20150315164808j:plain

鹿児島中央 f:id:albatrosary:20150315164815j:plain

甲突川 f:id:albatrosary:20150315164818j:plain