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


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

[code language=”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>
[/code]

valueとfactoryの違いを考える

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

[code language=”js”]
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
}
]
);
[/code]

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

[code language=”js”]
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); // エラー
}
]
);
[/code]

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

[code language=”js”]
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
}
]
);
[/code]

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


DACエンジニア採用情報

  関連記事

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

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

Selenium × PHP でテスト自動化!【環境構築編】

はじめに みなさんこんにちは、プロダクト開発本部の亀梨です。 普段はXmediaOneというメディアプランニング・広告運用管理・トラッキング・マーケティング分析を行う 統合プラットフォームの開発を担当しています。 テスト自動化の背景 わたくしが担当するXmediaOneでは品質担保のために①コードベ …

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

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

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

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

Bootstrapのモーダル機能で多重表示する際に解決しなければならない2つの問題

はじめに みなさんこんにちは、プロダクト開発本部の亀梨です。 普段はXmediaOneというメディアプランニング・広告運用管理・トラッキング・マーケティング分析を行う 統合プラットフォームの開発・保守を担当しています。 エンジニアの皆さん、デザインってどうしてます? わたくしはプライベートでとあるW …

TypeScriptについてまとめてみた

はじめに JavaScript がとりあえずそのまま動くので、雰囲気で使ってしまいがちな TypeScript。初心者向けに基本的なことをまとめてみました。 TypeScript って何? TypeScript はマイクロソフトが開発したプログラミング言語で、オープンソースでメンテナンスされています …

D3.jsとその活用事例について

D3.jsとは? D3とは「Data Driven Document」の略で、データに基づいてドキュメントを操作するための JavaScript ライブラリです。 ご存知の方も多いと思いますが、ちょっとだけD3.jsの基本的な使い方、そして弊社プラットフォームでの利用についてご紹介したいと思います。 …

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

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

【小ネタ】JSで要素の組み合わせを列挙する

下記のような、キーの数や要素数が可変のデータの組み合わせを、列挙するjavascriptコードです。 pythonにはitertoolなどの順列・組み合わせ計算を行う定番ライブラリがあるようです。 やっている事ですが、イメージとしては組み合わせを数列に置き換えています。 1桁目が2進数、3桁目が3進 …

GoogleスプレッドシートからTreasureDataへデータを取り込む

AudienceOneの開発を担当しています。skryoです。 またまたTreasureDataネタですが、今回はGoogleスプレッドシートからGoogleAppsScriptを使ってTreasureDataへデータを取り込む手順を紹介したいと思います。 なぜ? Googleスプレッドシート上でマ …