Angular.jsのvalueとfactoryの違いを考える

     - プログラム言語 , , ,  

このエントリーをはてなブックマークに追加

次のようなHTMLがあったとする。

<!doctype html>
<html lang="jp" ng-app="App">
<head>
  <meta charset="utf-8">
  <script src="bower_components/angular/angular.js"></script>
  <script src="app.js"></script>
</head>
<body>
<div ng-controller="Ctrl">
  Value:{{answer}}
</div>
</body>
</html>

valueとfactoryの違いを考える

valueもfactoryもcontrollerから利用する値やfunctionを登録しておくのに使う。そのようなcontrollerの外部に登録されているfunction等をサービスと呼ぶ。たとえば、下記のようにplusやminusといったサービスがあったとする。

angular.module('App',[])
  .value('plus', function(a,b){ return a+b; }) //plusサービス
  .value('minus', function(a,b){ return a-b; }) //minusサービス
  .controller('Ctrl',
    ["$scope", "plus", "minus",
      function($scope, plus, minus){
        $scope.answer = minus(plus(3,2),1); // 4
      }
    ]
  );

下記のように、plusとminusを組み合わせたplus_minusというサービスを作りたいが、plus_minus内からplusやminusは参照することができない。

angular.module('App',[])
  .value('plus', function(a,b){ return a+b; })
  .value('minus', function(a,b){ return a-b; })
  .value('plus_minus',function(a,b,c){
    return minus(plus(a,b),c); // minusやplusが参照できない
  })
  .controller('Ctrl',
    ["$scope", "plus_minus",
      function($scope, plus_minus){
        $scope.answerValue = plus_minus(3,2,1); // エラー
      }
    ]
  );

このように、登録されているサービスを利用するときにfactoryを使う。

angular.module('App',[])
  .value('plus', function(a,b){ return a+b; })
  .value('minus', function(a,b){ return a-b; })
  .factory('plus_minus', ["plus","minus",function(plus, minus){ // ここで明示的に参照
    return function(a,b,c){
      return minus(plus(a,b),c);
    };
  }])
  .controller('Ctrl',
    ["$scope", "plus_minus",
      function($scope, plus_minus){
        $scope.answer = plus_minus(3,2,1); // 4
      }
    ]
  );

次回は factoryとserviceの違いを考える。

このエントリーをはてなブックマークに追加

DACエンジニア採用情報

  関連記事

promise
ECMAScript6を使ってみた ～「Promise」編

ECMAScript6とは 一応ちょっとだけ説明しておくと、 ECMAScript（エクマスクリプト）は、Ecma Internationalによって標準化されたスクリプト言語で、バージョン6が2015 年 6 月 17 日に標準仕様として発行されました。（以下、ES6と呼びます） ES6ではcon …

chain
PyStanによるはじめてのマルコフ連鎖モンテカルロ法

はじめに こんにちは。システム開発部の中村です。 社内で行っている『データ解析のための統計モデリング入門』(所謂緑本)の輪読会に参加した所、 大変わかりやすい本だったものの、Macユーザには悲しい事に実装サンプルがWinBUGSだったため、 9章の一般化線形モデルのベイズ推定によるアプローチをPyt …

question
読み方がわからない技術用語 2015

英語圏での読み方を基本的には参考にしています。英語圏でも複数の読み方をしているケースもあるようなので、あくまでも参考程度。2015と書きながら、古い言葉も混じってますが。 async – えーしんく Alt – おると ASUS – えいすーす bower &#8 …

no image
Polymer on Rails

Web Componentsをご存知だろうか。これが普及すればWebの開発は画期的に変わるだろう。 説明すると長くなるので、LIGさんのにその辺はお任せして。(この記事読んでください。) 簡単に言えば、下記にあるような新たに提案されたブラウザ向けAPIの総称。 Custom Elements, 説明 …

ruby
Railsたった14行でアドサーバーAPIができた話

こんにちは。駆け出しエンジニアの近江です。 最近Railsにハマっているので、私が2年間担当しているアドサーバの、簡易版をRailsで作ってみました。 広告やキャンペーンを登録する管理画面はある前提で、ここからたった14行追加するだけでアドサーバーのHTTP APIを作りたいと思います。ついでに配信 …

no image
【小ネタ】Javascriptのconsoleオブジェクトをもっと便利に使う方法

すごく便利なconsoleオブジェクトですが、ブラウザによってサポートされているメソッドが なかったり、そもそもconsoleオブジェクトが使えなかったりと、たまに不便だったりします。 そんなときによく使う便利なコード。 使い方はconsoleと同じようにlogger.log,logger.grou …

４
【未経験からのRuby on Rails – 第4回】Railsアプリケーション開発をしよう！ 〜開発の準備編〜

こんにちは。新卒のmatsuariです。 Rubyについてまだまだ知るべきことはたくさんありますが、とにかく早くアプリを作りたい！ ということで、今回はアプリ開発の準備に取り掛かっていきます。 Rubyはアプリを作成しながら、同時に学んでいきたいと思います。 Railsアプリケーション開発の準備《 …

3_001
プログラミング初心者がswiftでゲームアプリ的なものを作ってみた。

こんにちは、DAC2年目のkumataです。 普段は素敵な先輩方に囲まれてインフラ周りのお仕事をさせて頂いていますが、 今回は業務とは全く関係ないプログラミングをやってみました。 全く初心者なのですが、swift+Xcodeで簡単にスマホゲーム的なものが作れました。 初心者の目線から作成方法をつらつ …

rails
初心者がRailsで開発 – deviseでユーザー認証設定 -

こんにちは、2年目のYukaです。 開発部所属でありながら実は、、 実際に自分で手を動かして開発する機会がなかなかありませんでした。。 しかしついに、、、 開発初心者がRailsでWebアプリの開発に挑戦します！！ 今回のゴールは社内でも使用しているGoogleアカウントで簡単にログインができるよう …

tf
ディープラーニングで「顔が似ているAKB48のメンバーを教えてくれるbot」を構築

概要 こんにちは、システム開発部の中村です。 今回は、Facebook Messenger APIを利用して、 画像をアップロードすると、似ているAKB48のメンバーを教えてくれるbotを実装しました。 尚、ディープラーニングやTensorFlowそのものの解説というより、 「エンジンとしてディープ …

PREV
Treasure Dataで長期間の集計
NEXT
【動画広告】VASTって何？