AngularJS 基礎最速マスター
AngularJSとは、Googleのエンジニアが中心となって開発されている Webアプリケーションフレームワークです。
百式田口さんのドットインストール12+4+4連投で盛り上がっているので、大好きな 最速マスターシリーズっぽくまとめてみた。
特徴
詳しくは公式サイトや Google Developers Blog の翻訳記事をどうぞ。
通常の WebAppの場合、View(HTML)とModel(データ)の紐付けの指定がめんどいのですが、AngularJSの場合、HTMLのタグを拡張することで、Controller側の指定やイベントをシンプルにバインドしてくれます。
AngularJSの読み込み
公式のサンプルコードを参考に
<script src="http://code.angularjs.org/angular-1.0.1.min.js"></script>
他のフレームワークと併用
AngularJSは、HTMLをテンプレート的に扱うので、HTML要素の変更を他のフレームワークが行う場合に問題が発生します。単純にjQueryからHTMLを追加する場合は、HTML要素を $Compileメソッドの引数で与える*1など。
イベントのhookについても仕込みが必要なようです。*2
AngularUI for AngularJS を見ると、jQuery Pluginの利用機能を持っているようです。
基本
公式のサンプルコード。タグの中に見慣れない属性が…
<!doctype html> <html ng-app> <head> <script src="http://code.angularjs.org/angular-1.0.1.min.js"></script> </head> <body> <div> <label>Name:</label> <input type="text" ng-model="yourname" placeholder="Enter a name here"> <hr> <h1>Hello {{yourname}}!</h1> </div> </body> </html>
ng-app
AngularJSのWebAppである宣言として、HTML要素に「ng-app」属性を指定します。AngularJSで用いられる「ng-」は、AngularJS から来たらしいです。
ng-model
AngularJSが扱うためのモデル(データ)の指定です。今回は input要素なので、て入力した文字列になります。
{{}}(バインディング)
モデルをViewに展開するためのバインディングは、二重中括弧です。この{{}}の中は、Javascriptのeval()を拡張したものとして展開されます。
上のHTMLソースをコピペしてブラウザで開くとテキストボックスに入力した内容がリアルタイムに表示されるのが判るとおもいます。
少し拡張
<!doctype html> <html ng-app> <head> <script src="http://code.angularjs.org/angular-1.0.1.min.js"></script> </head> <body> <h2>my smartphones.</h2> <div ng-controller="DroidListCtrl|reverse"> <ul> <li ng-repeat="droid in droids"> {{droid.brand}} <p>{{droid.name}}</p> </li> </ul> </div> <script> function DroidListCtrl($scope){ $scope.droids = [ {"brand": "SHARP", "name": "IS01", "version": "1.6" }, {"brand": "SHARP", "name": "IS05", "version": "2.3.4" }, {"brand": "Samsung", "name": "GalaxyS SC-01B", "version": "2.3.6" }, {"brand": "HTC", "name": "EVO 3D ISW12HT", "version": "2.3.4" } ]; } </script> </body> </html>
ng-controller
コントローラの指定を行います。値はコントローラとして利用するオブジェクトのfunction名です。
ng-repeat
テンプレート機能の「繰り返し」。値に指定した「"droid in droids"」は、モデル「droids」をイテレートして droidに代入しているイメージです。コントローラの function DroidListCtrl()で定義した droids がデータになるわけです。
なお AngularJSにはFilterという機能がありイテレータに対するフィルタリングやソートなどが可能です。
Search: <input ng-model="searchText"> <ul> <li ng-repeat="droid in droids|filter:searchText">
な感じに書き換えると、入力した文字列を含んだモデルのみを抽出します。
Filterには他に、currency,json,limitTo,lowercase,number,orderBy,uppercaseがあり、独自のfunctionを書くことで実装可能です。
その他の機能
AngularJSのディレクティブ
上では、<html ng-app とか書いたけど、classの属性として指定することも可能。
<span my-dir="exp"></span> <span class="my-dir: exp;"></span> <my-dir></my-dir> <!-- directive: my-dir exp -->
フォーム部品の初期値やバリデート
required で必須。後 ng-minlength,ng-maxlength とか。
urlやemailなどは、まんま任せられる。
Value1: <input type="checkbox" ng-model="value1"> <br/> Value2: <input type="checkbox" ng-model="value2" ng-true-value="YES" ng-false-value="NO"> <br/>
checkboxとかで便利。値取るときに ifとか書かなくて済む。
そうそう、form要素に novalidate を書かないと HTML5とバッティングするので注意とドットインストールの #10で注意されてた。
他の便利なディレクティブ
ng-src は、hrefなどの src属性の指定に使える。clickイベントについても
<button ng-click="count = count + 1" ng-init="count=0"> Increment </button> count: {{count}}
で簡単に扱える。
JSON/JSONP/RESTも扱える
hoge.json にJSON形式でデータを置いて読み込むには、$http.get。JSONPの場合は、
$http.jsonp。渡すuriの最後にcallbackを忘れないこと。
RESTを扱うには、angular-resource.js を読み込む必要がある。(ここ試してないっす)
Testable
コントローラにロジックは分離・独立しているし、組み込みのMockがあるためテストしやすいらしい。
(ここも試してないっす)。公式にはテストコードも載っているものが多い。
最後に
MVCだけあって、HTMLの見通しがすっきりして、ロジックがキレイに書けるのはいいね。簡単なWebAppを作るには短いコードで書けて生産性高いと思う。
複雑なことをする時の問題点とかは、書いてみないと何とも言えないかな。
公式はサンプルコードも多いので、眺めるだけでも勉強になる。
興味のある方には、ぜひドットインストールのAngularJS特集をご覧あれ。
Wordpress でもインストールするか
昨日から夏休みなのだけど、昼からくたばってた。
Windows Azure のアカウントは前に用意しておいたので、今回は Wordpressのインストールだけ。
MSDNの「WordPress を Windows Azure で利用する」だと実は大掛かりで、もっと簡単なやり方が用意されている。英語だけどな。
Create a WordPress web site from the gallery in Windows Azure の画面キャプチャの手順通りにすれば簡単簡単。
ま、一度くらい実際にインストールしたことないと大変かな。後は管理者ページの Settings - General - Timezone で Asia/Tokyo を選ぶとローカルタイムの設定に。
Wordpress の日本語化はリソースレベルなので、日本語リソースを入れればいいのと、wp-config.php に LANG=ja を書けばいいのだろうけど、とりあえずは使って問題ないかを確かめてみることにする。
速習CoffeeScript
他の言語知ってると取っ付き易い CoffeeScript。てっとり早く速習するのに役立つサイトを並べてみる。って自分用だな。
CoffeeScript基礎文法最速マスター
少し前に流行った、最速マスターシリーズ。ちょこちょこっと見たり確認するのに便利
CoffeeScript 言語リファレンス v1.0.1
CoffeeScript言語リファレンスを日本語訳しました v1.2.0
ボリュームが少し増える。
はじめるCoffeeScript
シリーズもの。コードは全て Javascriptが併記され比較出来る。丁寧な文章。
CoffeeScript Cookbook(英語)
レシピ本。英語だけど読める。
WebMatrix2 では CoffeeScript書けるよー
WebMatrix 2 では、拡張機能ギャラリーより OrangeBits Compiler をセットアップすることで、LESS, SASS, SCSS, CoffeeScript といった言語を使用することができます。
うひょー。
ギャラリーたくさん用意されてるなー。SQL Serverとの node.jsドライバも出してきたし、MSどれだけ本気なんだ。
wc -l
問4 このファイルの行数を表示しろ
PS > Get-Content .\input.txt|Measure-Object|%{$_.count}
PS > (cat .input.txt).length
cat は、Get-Content のエイリアス。dir → ls のようにたくさん用意されてる。
.length は配列の数で、.NET Framework のプロパティ。
Powershell はこれがあるから使っているようなもの。言語としてはどうだろうとは、良く思うけど。