AngularJS 1.2.0の"Controller As" Syntax
AngularJS 1.2.0より"Controller As" Syntaxが追加されました。
割りとググラビリティが低く、ドキュメントも探しづらいですが、
Controllerを綺麗に書くために非常に有効な機能なので、書いていきます。
Controller As Syntaxとは
"Controller As" Syntaxはng-controllerに新たに追加された記法で、
ng-controller="hogeCtrl as hoge"と記述することでhogeCtrlをhogeという名前でscopeに詰めることができます。
またこれを利用することで、かなりControllerを$scopeの依存から切り離すことが可能になります。
書き方
View側
View側では今までng-controller="hogeCtrl"と記載していた部分をng-controller="hogeCtrl as hoge"などに変更し、
ng-click等はng-click="clickFuga()"からng-click="hoge.clickFuga()"に変更します。
※このclickFugaメソッドはhogeCtrlによってscopeに登録されていたとして。
Controller As利用前
<div ng-controller="hogeCtrl">
<span>{{name}}</span>
<button ng-click="clickFuga()">
</div>
Controller As利用後
<div ng-controller="hogeCtrl as hoge">
<span>{{hoge.name}}</span>
<button ng-click="hoge.clickFuga()">
</div>
Controller側
Controller側は今までscopeに対して設定していたプロパティや、関数をController自体のプロパティ、メソッドとして登録します。
Controller As利用前
angular
.module('hogeApp', [])
.controller 'hogeCtrl', ['$scope','$window',
($scope, $window)->
$scope.name = 'Hoge'
$scope.clickFuga = ()->
$window.alert($scope.name)
]
Controller As利用後
angular
.module('hogeApp', [])
.controller 'hogeCtrl', ['$scope','$window',
class HogeCtrl
constructor:(@$scope, @$window)->
@name = 'Hoge'
clickFuga:()->
@$window.alert(@name)
]
上記のように、DIはしていますが、scopeは実際には利用していません。
また各方面から怒られそうですが、classっぽい書き方でも利用が可能になります。
まとめ
個人的には"Controller As" Syntaxにより、Controllerがかなり書きやすくなり、
Coffee Scriptとの親和性が高くなったなーと思っています。
またあまりscopeに何かを突っ込んでいく書き方が個人的には気持ち悪さがあったので、
かなり好きになりました。
ただし、このSyntax自体は、賛否両論あったみたいなので、
使い方や、もう少しノウハウがほしいところかなーと思います。