AngularJSでデータを共有するServiceの雛形(CoffeeScript版)

2289 ワード
Angular CoffeeScript CoffeeScript テキストリンク
  • ネットにコレっ!!という情報が見受けられなかった
  • 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は複数ファイルに分割されるのを想定して書いてます


ちゃんと双方向データバインドされます。