モダンWebアプリケーションを開発するには、モジュールローダーを利用しているライブラリやフレームワークが多くなってきています。Angular2もSystemJSを利用していてモダンWebアプリケーションの開発が行えるようになっています。ここではモジュールローダーの話は割愛します。こちらを読むと良いのではと思います。
(意訳版) 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.
Angular2でSystemJSの利用
Angular2でSystemJSを利用するためにsystemjs
をnpm
でインストールします。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/core
をSystem.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のエコシステムに参加しているのかな感を受け止めました。