albatrosary's blog

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

Angular2 for JavaScript with SystemJS

モダンWebアプリケーションを開発するには、モジュールローダーを利用しているライブラリやフレームワークが多くなってきています。Angular2もSystemJSを利用していてモダンWebアプリケーションの開発が行えるようになっています。ここではモジュールローダーの話は割愛します。こちらを読むと良いのではと思います。

medium.freecodecamp.com

(意訳版) qiita.com

SystemJS

Universal dynamic module loader - loads ES6 modules, AMD, CommonJS and global scripts in the browser and NodeJS. Works with both Traceur and Babel.

github.com

Angular2でSystemJSの利用

Angular2でSystemJSを利用するためにsystemjsnpmでインストールします。jspm というツールを利用する選択肢もあるようです(jspm で快適 javascript 生活(クライアントサイド JS の依存管理決定版) - Qiita)。

npm init -y
npm install angular2@2.0.0-beta.1 --save
npm install rxjs@5.0.0-beta.1 --save
npm install systemjs --save

index.htmlにインストールしたライブラリを読み込ませます。

(index.html)

<!DOCTYPE html>
<html lang="ja">
<head>
  <meta charset="UTF-8">
  <title>Angular2 Study</title>
</head>
<body>
  <!-- 1. Display the application -->
  <my-app>Loading...</my-app>

  <!-- 2. Load libraries -->
  <script src="node_modules/systemjs/dist/system-polyfills.js"></script>
  <script src="node_modules/angular2/bundles/angular2-polyfills.js"></script>
  <script src="node_modules/systemjs/dist/system.src.js"></script>
  <script src="node_modules/rxjs/bundles/Rx.js"></script>
  <script src="node_modules/angular2/bundles/angular2.dev.js"></script>

  <!-- 3. Load our 'modules' -->
</body>
</html>

SystemJS Config

SystemJSを利用するための設定を記述します。ディレクトリ構造は

components
 - home/home.html
 - home/home.js
scripts
 - main.js
index.html

ですので下記のようにします。

<!-- 3. Load our 'modules' -->
<script>
  System.config({
    packages: {        
      scripts: {
        format: 'register',
        defaultExtension: 'js'
      },       
      components: {
        format: 'register',
        defaultExtension: 'js'
      }
    }
  });
  System.import('scripts/main')
    .then(null, console.error.bind(console));
</script>

モジュールの作成

scripts/main.js

main.jsにはAngular2をブートストラップするための記述をしています。

System.register(['angular2/platform/browser', '../components/home/home'], function(exports) {
  var browser, app;
  return {
    setters:[
      function (args) {
        browser = args;
      },
      function (args) {
        app = args;
      }],
    execute: function() {
      browser.bootstrap(app.AppComponent);
    }
  }
});

settersメソッドでSystem.registerに書かれたモジュールを登録しexecuteで利用出来るようにしています。

components/home/home.js

main.jsと同様に記載します。home.jsではComponentキーワードとClassキーワードを利用していますのでangular2/coreSystem.registerで宣言しています。

(components/home/home.js)

System.register(['angular2/core'], function(exports) {
  var core;
  return {
    setters:[
      function (args) {
        core = args;
      }],
    execute: function() {
      var vm;
      
      var constructor = function() {
        vm = this;
        vm.name = 'Angular'
      }
      
      var Component =
        core.Class({
          constructor: constructor
        });

      Component = 
        core.Component({
          selector: 'my-app',
          templateUrl: 'components/home/home.html'
        })(Component);

      exports("AppComponent", Component);
    }
  }
});

完全なコードはこちらにありますので、宜しければどうぞ。

GitHub - albatrosary/Angular2Study at step7

最後に

Angular2はTypeScriptベースでの記載が多くあります。当然ですが、TypeScriptを使わなくても記述することができるなという感想です(TypeScriptを使ったほうがよりスマートのようにも思います)。

あと、Angular1はAngular1独自のエコシステムでアプリケーションを作ってきた感がありますが、Angular2では積極的にJavaScriptのエコシステムに参加しているのかな感を受け止めました。