angularjs2のtutorialをやってみた
お断り事項
本記事は、Angularjsの公式サイトの5分クイックスタートのチュートリアルを 純粋にやってみているだけです。 英語苦手な方には悪くないと思いますが、本家のほうが、アップデートもかかるし、 英語問題ない方は本家をみたほうがよいです。
本題(フレームワーク選定)
Javascriptフレームワークをやらないとな、、、
というわけで、重い腰をあげて触ってみましたよ、と。 JSのフレームワーク、なんだか沢山あるようです。
- backbone.js
- react.js
- knockout.js
- ember.js
- aurelia
- angularjs1.x
- angularjs2.x
などなど沢山あります。 今回の選定基準はこれ!!!
- ES6が新しいらしいので、ES6対応(または対応しはじめてる)
- そこそこ有名でユーザが多い
- ぶっちゃけはじめて使うので、感覚値身に付けるために、「どれでもいい」
というわけで結構テキトウな選定基準です。
一旦、Google Trendで比較。
おお!圧倒的ではないか!我が軍は!
はい。angularjsが圧倒的です。
でも、「angularjs」じゃなくて、「angular.js」にすると・・・
ああ・・・以外と普通・・・むしろreact.jsが盛り上がってきてるように見える。
物事は、見る角度次第でどうにでも変わってくるわけです。
そして、どう判断すればいいかわからなくなったので、
- グーグルの人が作ってるし
- ES6にも対応してるし(α版だけど)
ということから、angularjs2を使ってみることにしました。
初心者は、初心者らしく、簡単チュートリアルからやります。
これね。5分クイックスタート、なので、5分でとりあえず動かしてなんか見れるようになるんだろ。
前提条件:
- OS: Ubuntu 14.04.1 LTS
- npm: 2.14.7
- angularjs: 2.0.0-alpha.44
- systemjs: 0.19.5
- live-server: 0.8.1
- typescript: 1.6.2
- Linuxの操作には慣れている(開発にあたっての環境整備は出来るレベル)
ざっくりフロー
さて、本記事のざっくりした流れです。
- プロジェクトフォルダー作成
- 必須ライブラリのインストール
- httpd環境設定
- Angular component作成
- appをの起動コードを書く
- index.htmlの作成
- 実行
詳細
以降ではやったことを少し詳細に。
プロジェクトディレクトリ作成
まずは、フォルダを作ります。場所はどこでもいいです。
そして作ったら、そのディレクトリに移動します。
$ mkdir angular2-quickstart $ cd angular2-quickstart
本記事では、上記の作業ディレクトリは、
必須ライブラリのインストール
お次は、ライブラリのインストール。
なんだけど、npm使うので、まずはnpmをインストール。
下記コマンヅで。
$ sudo apt-get update $ sudo apt-get install nodejs npm
で、npmが入るので、次は
- angular2
- live-server
を入れましょう。
angular2はそのまんま、angularのライブラリで、live-serverは、
すぐに動作確認できる簡易httpdでした。あると楽ちん。
で、下記コマンヅ実行。
$ cd <WORKDIR> $ npm init -y $ npm i angular2@2.0.0-alpha.44 --save --save-exact $ npm i live-server --save-dev
これで、angularとlive-serverが、
httpd環境設定
では、インストールするものはしたので、次は環境設定をば。
今回は、liver-serverの実行設定だけです。
さっき実行したコマンド($ npm init -y)の結果として、
package.jsonなるファイルも作成されてるはず。
# package.json { "name": "angular2-quickstart", # <WORKDIR>の名称が勝手に入ってる "version": "1.0.0", "description": "", "main": "index.js", "scripts": { "test": "echo \"Error: no test specified\" && exit 1" }, "keywords": [], "author": "", "license": "ISC", "dependencies": { "angular2": "2.0.0-alpha.44" }, "devDependencies": { "live-server": "^0.8.2" } }
色々書いてあるけどまぁ一旦こんなもんかと眺めます。
そんで次に、package.jsonの、scriptsの値を変更します。
# 変更前 "scripts": { "test": "echo \"Error: no test specified\" && exit 1" }, # 変更後 "scripts": { "start": "live-server" },
これで、npmコマンドから、live-serverを起動できるわけです。
$ npm start # ってするとliver-serverが起動されるけど、今は起動しなくていい
環境設定完了!
Angular component作成
さてさて、本題の Angularに入ります。
で、本題に入る前に、なんとなくの動作イメージを絵にしてみました。
イベントが発生する順に番号振って説明つけてみてますが、
簡単に説明すると、今回のチュートリアルで主に登場するファイルは、
- package.json
- app.js
- index.html
で、app.jsに、Angular componentなるものを記載して、
index.htmlから、Angular componentと、Angularのライブラリを読み込んで、
index.htmlとしてユーザにみせつける、という流れですな。
package.jsonは、ユーザに見えるとこには関係なくて、裏方さん的な役割。
で、Angular componentを作ります。
$ cd <WORKDIR> $ vi app.js
で、app.jsに下記をペタっとな。
# app.js var AppComponent = ng .Component({ selector: 'my-app', # HTMLのmy-appタグにこのComponentを挿入するよ、ってこと template: '<h1>My First Angular 2 App</h1>' # Componentの見た目定義 }) .Class({ # Componentのクラス constructor: function () { } # 今回はコンストラクタはなんもしない });
上のほうに書いてある、ngっていうのは、Angularのglobal namespaceとのこと。
でも、公式ドキュメントのどこに記載があるのかわからなくて正体不明。
と思って、少し調べてみた。
の凄い下のほうに、こんなんがあった。
System.register("angular2/angular2_sfx", ["angular2/angular2", "angular2/router", "angular2/http"], true, function(require, exports, module) { var global = System.global, __define = global.define; global.define = undefined; var ng = require("angular2/angular2"); ★★これか!!! var router = require("angular2/router"); var http = require("angular2/http"); var _prevNg = window.ng; window.ng = ng; window.ngRouter = router; window.ngHttp = http; ng.noConflict = function() { window.ng = _prevNg; return ng; }; global.define = __define; return module.exports; });
ちなみに、angular2.sfx.dev.jsのファイルにしかないぽい。 angular2.jsにはなかった。
appをの起動コードを書く
このままだと、Componentは書いたものの、置いてあるだけで起動しないので、 起動させます。
app.jsの末尾に下記を追記します。
document.addEventListener('DOMContentLoaded', function() { ng.bootstrap(AppComponent); });
index.htmlの作成
みためみため。angularは 1.xからずっとテンプレートはHTML。そこは変わらずらしい。
インストールしたangular2のライブラリと、さっき書いたapp.jsを読み込むのと、
app.jsで定義した Componentの、my-appタグを入れて準備万端!
# index.html <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>
実行
これで、ページのロードが終わったら、AppComponentが起動されます。
で、最後に、グローバル汚染しないように、ラッパーで囲って無名関数化。
# app.js (function() { var AppComponent = ng .Component({ selector: 'my-app', # HTMLのmy-appタグにこのComponentを挿入するよ、ってこと template: '<h1>My First Angular 2 App</h1>' # Componentの見た目定義 }) .Class({ # Componentのクラス constructor: function () { } # 今回はコンストラクタはなんもしない }); document.addEventListener('DOMContentLoaded', function() { ng.bootstrap(AppComponent); }); })();
ではでは、まずは live-serverを実行しますぞ。
$ cd <WORKDIR> $ npm start
これで、httpdが動いてるので、ブラウザを開いて、
にアクセス!
My First Angular 2 App
ってブラウザに表示されればOK !!!
というわけで、5分クイックスタートは終了。
次回は、これまた公式チュートにある、"The Hero Editor"をそのまま実行してみる予定。
で、その記事の前半部分↓↓↓ angularjs2のtutorialをやってみた(その2) - xengineer’s diary