- ネットにコレっ!!という情報が見受けられなかった
- FactoryとServiceの使い分けがよくわかんない
- とにかくコピペですぐ動く奴が欲しい
という2,3日前の私みたいなぬるいエンジニアのために。つっこみどころ多数と思われますが、さしあたって動く！
index.html
<!doctype html>
<html ng-app="myApp">
<head>
<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/angularjs/1.4.5/angular.min.js"></script>
<script type="text/javascript" src="hoge.js"></script>
</head>
<body>
<div ng-controller="AbcCtrl">
AbcCtrl :<input ng-model="data_a.number">
<button ng-click="reset()">reset</button>
</div>
<div ng-controller="XyzCtrl">
XyzCtrl :<input ng-model='hoge.get_data().number'>
<button ng-click="hoge.double()">double</button>
</div>
</body>
</html>
hoge.js
(->
angular.module('myApp', [])
)()
(->
HogeService = () ->
# このserviceを使って共有するprivate data
data = {
number: 2 # 初期データをここで設定してもいいし
ary: []
obj: {}
}
# private method的なナニか
init = () ->
data.number = 123
# constructor的なナニか
data.ary = [1, 2, 3] # ここで初期化するのもあり
init()
# public method的な人達
get_data: -> # ゲッター
data
double: ->
data.number = data.number * 2
reset: ->
init()
angular.module('myApp')
.service 'HogeService', HogeService
)()
(->
angular.module('myApp')
.controller 'AbcCtrl', ($scope, HogeService) ->
$scope.data_a = HogeService.get_data()
$scope.reset = HogeService.reset
.controller 'XyzCtrl', ($scope, HogeService) ->
$scope.hoge = HogeService # この方式でもいける
)()
※ hoge.jsは複数ファイルに分割されるのを想定して書いてます
ちゃんと双方向データバインドされます。