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

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

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

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

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

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

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

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

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

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

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

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

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

: Scala実践「Either型を使ってimmutable（不変）なコードを書こう！」

はじめにみなさんこんにちは、プロダクト開発本部の亀梨です。普段はXmediaOneというメディアプランニング・広告運用管理・トラッキング・マーケティング分析を行う統合プラットフォームの開発を担当しています。 Scalaでイケてるコードを書きたい！背景わたくしはDACに入社してからScala …

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

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

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

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

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

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

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

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

valueとfactoryの違いを考える

関連記事