AngularJS 1.4 が近いうちリリースされるようです。その中でで対応する機能の中に CommonJS Modules も含まれるようです。

今回は Browserify と Angular 1.4 beta を組み合わせて使ってみます。

必要な知識

  • npm コマンド
  • browserify コマンド
  • AngularJS

インストール

bower でもインストールできますが、今回は Browserify と組み合わせるため npm を使います。

AngularJS 1.4 はまだベータなのでバージョンを指定しないと入りません。 Browserify が入っていない場合はそれも入れます。

$ npm install angular@1.4.0-beta.6
$ npm install -g browserify

簡単な例

実際に HelloWorld を AngularJS 1.4 で作って見ます。

var angular = require('angular');

angular.module('app', []).controller('AppController', function($scope) {
    $scope.message = 'Hello, World!';
});

グローバルの angular を使わず require('angular') したものを使っているのがわかるはずです。

これを app.js として保存し browserify でビルドします。

$ browserify app.js > bundle.js

この JavaScript を呼び出す HTML は以下のようになります。

<!DOCTYPE html>
<html ng-app="app">
<head>
    <meta charset="utf-8">
    <title>AngularJS 1.4 を試す</title>
</head>
<body ng-controller="AppController">
    {{ message }}
    <script src="bundle.js"></script>
</body>
</html>

<script> タグで読み込んでいるのは bundle.js だけです。 AngularJS も一緒にしてくれます。

モジュールを分離

もう少しだけ実践的な例を試します。

ディレクティブをモジュールとして作ってみます。

var angular = require('angular');

module.exports = angular.module('niceDirective', [])
    .directive('niceDirective', function() {
        return {
            scope: { niceDirective: '@' },
            template: '<strong>{{ niceDirective }}</strong>'
        };
    });

これを app.js から呼び出すようにします。

var angular = require('angular');

var niceDirective = require('./niceDirective');

angular.module('app', [
    niceDirective.name
]).controller('AppController', function($scope) {
    $scope.message = 'Hello, World!';
});

依存を CommonJS の仕組みを使って解決できるようになりました。

HTML で nice-directive が使えるようになります。

<div nice-directive="{{ message }}"></div>

今回はやりませんでしたが TypeScript のモジュールの仕組みとも相性が良くなった気がします。

もっと AngularJS 1.4 の新機能を試したりもしたかったのですが 1.4 は機能追加はあまり多くなく、パフォーマンスや安定性を向上させるアップデートのようです。

まとめ

  • AngularJS 1.4 では CommonJS Modules に対応
  • npm でインストールして browserify でビルドできる