albatrosary's blog

UI/UXとエンタープライズシステム

Angular2の「5 MIN QUICKSTART」をやってみた - AngularJS Advent Calendar 2015

Angular

Angular2の「5 MIN QUICKSTART」を触ってみた。このエントリーは「AngularJS Advent Calendar 2015」12月20日の記事です。

angular.io

Angular2のQuick Startは、JavaScript、TypeScript、DartとあるがJavaScript、TypeScriptをやってみる

JavaScript

作業ディレクトリの作成

適当な名前でディレクトリを作る

mkdir angular2javascript && cd $_

モジュールのインストール

angularについては--save-exactでバージョンを固定している。まだアルファ版だからね（かどうかは分からないが）。live-server、これいいよ。

npm init -y
npm i angular2@2.0.0-alpha.44 --save --save-exact
npm i live-server --save-dev

必要なファイルを作る

簡単に済ませるので２つ

touch index.html
touch app.js

index.html

カスタムタグをmy-appとして定義

<html>
  <head>
    <title>Angular 2 QuickStart</title>
    <script src="node_modules/angular2/bundles/angular2.sfx.dev.js"></script>
    <script src="app.js"></script>
  </head>
  <body>
    <my-app></my-app>
  </body>
</html>

ここでsfxはシステムローダー使わない場合に利用するとのこと

This bundle executes its main module - angular2_sfx, when loaded, without a corresponding System.import call. It is aimed at ES5 developers that do not use System loader polyfills (like system.js and es6 loader).

app.js

selectorで定義したmy-appがカスタムタグにめがけ挿入、Web Componentsちっく。

(function() {
  var AppComponent = ng
    .Component({
      selector: 'my-app',
      template: '<h1>My First Angular 2 App</h1>'
    })
    .Class({
      constructor: function () { }
    });

  document.addEventListener('DOMContentLoaded', function() {
    ng.bootstrap(AppComponent);
  });
})();

templateはtemplateUrlでも書けて

templateUrl: 'app.html'

app.html:

<h1>My First Angular 2 App</h1>

とすることも出来る

実行

live-server

を実行するとデフォルトブラウザが起動してAngular2JavaScript版が動く

TypeScript

作業ディレクトリの作成

同じように適当な名前でディレクトリを作る

mkdir angular2typescript && cd $_

モジュールのインストール

今回はsystemjsとtypescriptを追加

npm init -y
npm i angular2@2.0.0-alpha.44 --save --save-exact
npm i systemjs typescript
npm i live-server --save-dev

必要なファイルを作る

簡単に済ませるので２つ。但し今回appはtsで。

touch index.html
touch app.ts

index.html

クラスローダーを使っているのでAngularはangular2.dev.jsを利用

<html>
  <head>
    <title>Angular 2 QuickStart</title>
    <script src="node_modules/systemjs/dist/system.js"></script>
    <script src="node_modules/typescript/lib/typescript.js"></script>
    <script src="node_modules/angular2/bundles/angular2.dev.js"></script>
    <script>
      System.config({
        transpiler: 'typescript',
        typescriptOptions: { emitDecoratorMetadata: true }
      });
      System.import('./app.ts');
    </script>
  </head>
  <body>
    <my-app>loading...</my-app>
  </body>
</html>

app.js

TypeScriptを使ってapp.jsは

import {bootstrap, Component} from 'angular2/angular2';
@Component({
    selector: 'my-app',
    template: '<h1>My First Angular 2 App</h1>'
})
class AppComponent { }
bootstrap(AppComponent);

importは重要

スクリプトが、プロパティ、関数、およびオブジェクトを、その情報をエクスポートした署名付きスクリプトからインポートすることを可能にします。この機能は、Traceur CompilerやES6 Module Transpilerのようなトランスコンパイラで実装されています。

developer.mozilla.org

実行

live-server

最後に

Typeで書いてもES5で書いてもいいけどTypeの方がちょっといいね 作ったソースはこちら

github.com

github.com