xengineer’s diary

結果、メモ的な内容になっています。

angularjs2のtutorialをやってみた

お断り事項

本記事は、Angularjsの公式サイトの5分クイックスタートのチュートリアルを

純粋にやってみているだけです。

英語苦手な方には悪くないと思いますが、本家のほうが、アップデートもかかるし、

英語問題ない方は本家をみたほうがよいです。

本題(フレームワーク選定)

Javascriptフレームワークをやらないとな、、、

というわけで、重い腰をあげて触ってみましたよ、と。 JSのフレームワーク、なんだか沢山あるようです。

  • backbone.js
  • react.js
  • knockout.js
  • ember.js
  • aurelia
  • angularjs1.x
  • angularjs2.x

などなど沢山あります。 今回の選定基準はこれ!!!

  • ES6が新しいらしいので、ES6対応(または対応しはじめてる)
  • そこそこ有名でユーザが多い
  • ぶっちゃけはじめて使うので、感覚値身に付けるために、「どれでもいい」

というわけで結構テキトウな選定基準です。

一旦、Google Trendで比較。

f:id:xengineer:20151030133025p:plain

おお!圧倒的ではないか!我が軍は!

はい。angularjsが圧倒的です。

でも、「angularjs」じゃなくて、「angular.js」にすると・・・

f:id:xengineer:20151030133140p:plain

ああ・・・以外と普通・・・むしろreact.jsが盛り上がってきてるように見える。

物事は、見る角度次第でどうにでも変わってくるわけです。

そして、どう判断すればいいかわからなくなったので、

  • グーグルの人が作ってるし
  • ES6にも対応してるし(α版だけど)

ということから、angularjs2を使ってみることにしました。

初心者は、初心者らしく、簡単チュートリアルからやります。

5 Min Quickstart - ts

これね。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の操作には慣れている(開発にあたっての環境整備は出来るレベル)

ざっくりフロー

さて、本記事のざっくりした流れです。

  1. プロジェクトフォルダー作成
  2. 必須ライブラリのインストール
  3. httpd環境設定
  4. Angular component作成
  5. appをの起動コードを書く
  6. index.htmlの作成
  7. 実行

詳細

以降ではやったことを少し詳細に。

プロジェクトディレクトリ作成

まずは、フォルダを作ります。場所はどこでもいいです。

そして作ったら、そのディレクトリに移動します。

$ 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に入ります。

で、本題に入る前に、なんとなくの動作イメージを絵にしてみました。

f:id:xengineer:20151102121029p:plain

イベントが発生する順に番号振って説明つけてみてますが、

簡単に説明すると、今回のチュートリアルで主に登場するファイルは、

  • 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とのこと。

でも、公式ドキュメントのどこに記載があるのかわからなくて正体不明。

と思って、少し調べてみた。

https://raw.githubusercontent.com/angular/code.angularjs.org/master/2.0.0-alpha.44/angular2.sfx.dev.js

の凄い下のほうに、こんなんがあった。

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が動いてるので、ブラウザを開いて、

http://127.0.0.1:8080/

にアクセス!

My First Angular 2 App

ってブラウザに表示されればOK !!!

というわけで、5分クイックスタートは終了。

次回は、これまた公式チュートにある、"The Hero Editor"をそのまま実行してみる予定。

で、その記事の前半部分↓↓↓ angularjs2のtutorialをやってみた(その2) - xengineer’s diary