2014年2月24日月曜日

CoffeeScriptのクラスをAngular.jsで使う


こんばんは。花粉症を感じ始めた私でやんす。

最近、CoffeeScriptとAngular.jsを組み合わせでいろいろ遊んでいるので、CoffeeScript×Angular.jsで得た知識を、備忘録的に紹介します。

Angular.jsですが、チュートリアル通りに作ると結構な確率でスパゲッティになる。
特にコントローラで$scopeにいろいろ設定するのは嫌だなぁ〜と思うところです。

そんな時は

「Controller as Syntax」(説明ビデオ)

を利用しましょう!!

これによって、コントローラクラスのインスタンス変数をそのままModel etcに展開できます。

こちらを参考に!!

この「Controller as Syntax」は賛否両論ありますが、私はいいと思います。
否定派のご意見(英語)

こちらを参考にで紹介したページと同じ方法だとclassの独立性がなくなるので、コントローラを別定義したい場合はどうすれば良いのか?
外側で定義したCoffeeScriptのクラスを利用する方法は・・・

Coffee Script
class HogeController
    constructor: (@height, @weight) ->
・・・

angular.module('app',[]).controller('HogeCtrl',[HogeController]) ←クラス名を指定(newはなし)


HTML
<div ng-controller="HogeCtrl as Hoge">
    <input type="text" ng-model="Hoge.height" />
</div>


こんな感じで動きます。

実際、タバタインターバルタイマーは上記の方法で動いております。

0 件のコメント:

コメントを投稿