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エンジニア採用情報

  関連記事

swift
iOS端末情報をTreasureDataに送るアプリをswiftで作ってみた。

はじめまして、2年目のOyamanです。 通常業務とは別のことになりますが、Swiftに触れる機会が少しあったので、スマホ関連の記事を書かせていただきます。 はじめに SwiftとTreasureDataのSDKを使って、 iOSの端末情報をTreasureDataへ送るアプリを作ってみます。 今回 …

no image
【未経験からのRuby on Rails – 第１回】楽しく書けるプログラミング言語 “Ruby” とは

こんにちは、はじめまして。新卒１年目のmatsuari（女子）です。 この度、Rubyの勉強を始めることになりまして、 まずはたくさんあるプログラミング言語の中で、なぜ自分がRubyを学ぶのか？ しっかりと把握した上で学習に取り組んでいきたいと考え、『Rubyとは何か？』調べました。 超基礎的なこと …

index
Android 非同期処理についてまとめてみた

Androidには、UIに影響を与えないよういくつか非同期処理が用意されています。 今回は非同期処理の代表的な ・Service ・IntentService ・HandlerThread について違いを踏まえながらまとめます！ 非同期処理について(http://codezine.jp/articl …

androidsdk10
SDKってどうやって作ってるの？【Android編】

こんにちは。4度目の投稿です。 現在私はAndroidのSDKを開発しています。 javaにもAndroidにもSDKにも手を出したのは初めてなので、最初はそもそもSDKのイメージが湧かず、ふわふわした状態で始めました。 SDKと調べても「あるソフトウェアを開発するために必要なプログラムや文書などを …

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

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

スクリーンショット 2015-07-31 16.41.25
【未経験からのRuby on Rails – 第3回】変数と定数

こんにちは。新卒1年目のmatsuariです。 今回はRubyに限らずプログラミングを学ぶ上で非常に重要となる「変数と定数」について、ご紹介していきます。 変数とは・・・ オブジェクトを一時的に格納しておく箱で、オブジェクトを識別するために利用します。 言葉だけでは理解が難しいかと思いますので、まず …

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

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

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

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

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

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

no image
gulp.jsで広告タグの開発環境を整える

SEOの観点から、サイト表示速度の高速化のためJavaScriptファイルから不用な空白や改行、 コメントを除去したりやローカル変数名を短縮するminifyが奨励されていますが、 これはタスクランナーのgulp.jsとプラグインを使って自動化する事が可能です。 ※gulpの基本的な使い方については下 …

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