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

  関連記事

【未経験からのRuby on Rails – 第2回】Rubyのプログラムを書いてみる(Mac)

こんにちは。新卒1年目のmatsuariです。 前回はRubyとは何か、簡単にご紹介をしましたが、 今回は実際にRubyファイルを作成して、プログラムを書いてみるところまでご紹介していけたらと思います。 Mac環境のプログラミング初心者向けです。 はじめに、Rubyのプログラムを書くためのファイルを …

Scala入門 準備編「開発環境構築」 – PHP使いからScala使いへ転身!

  はじめに みなさんこんにちは、今月入社しましたプロダクト開発本部の亀梨です。 普段はXmediaOneというメディアプランニング・広告運用管理・トラッキング・マーケティング分析を行う 統合プラットフォームの開発を担当しています。 XmediaOneの開発で採用しているプログラム言語はS …

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

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

Scala入門 基礎編「Scalaの書き方を理解しよう」 – PHP使いからScala使いへ転身!

はじめに みなさんこんにちは、プロダクト開発本部の亀梨です。 普段はXmediaOneというメディアプランニング・広告運用管理・トラッキング・マーケティング分析を行う 統合プラットフォームの開発を担当しています。 さて、今回はScala入門第二弾として、Scalaの書き方を紹介する基礎編をお送りしま …

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

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

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

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

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

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

【未経験からのRuby on Rails – 第3回】変数と定数

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

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

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

ECMAScript6を使ってみた ~「Promise」編

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