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

2015/03/13 - プログラム言語 angular.js, factory, Javascript, value

次のような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等をサービスと呼ぶ。たとえば、下記のようにplusやminusといったサービスがあったとする。

[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]

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

[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の違いを考える。

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

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

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

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

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

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

: Polymer on Rails

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

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

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

: （社内新卒・PHPビギナー向け）MacでPHP7開発環境を構築しよう！

はじめにみなさんこんにちは、プロダクト開発本部の亀梨です。普段はXmediaOneというメディアプランニング・広告運用管理・トラッキング・マーケティング分析を行う統合プラットフォームの開発を担当しています。えっ!?新卒のプログラミング研修はPHPで行われるって？！俺の得意言語やないか！！は …

: TypeScriptについてまとめてみた

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

: Qiita Team API と Google Spread Sheet でチーム日報を生成する

チーム日報を活用する MarketOne 開発チームでは複数拠点に分かれての開発を行っています。リモート開発が中心となると口頭でのコミュニケーションに限界があるため、テキストベースのコミュニケーションの比重が高い状態にあります。チケットシステムやソースコード管理ツール上の議論はもちろんおこなってい …

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

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

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

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

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

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

valueとfactoryの違いを考える

関連記事