Last active
July 3, 2016 06:31
-
-
Save kenmori/6dba185b6bf073a1d283 to your computer and use it in GitHub Desktop.
Angular#serviceと#factoryの違い。どういう時どっちを利用するか。定義方法。使い方を理解するまとめ(2015/8/29更新) ref: http://qiita.com/M-ISO/items/102c6daf192187d5a161
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
//ex1 //値返す書き方 | |
var myApp = angular.module('MyApp',[]); | |
myApp.factory('myUrlFactory',function myUrlFunc(){ | |
return 'https://github.com/kenjimorita/'; | |
}) | |
//ex2 //関数を返す書き方 | |
var myApp = angular.module('MyApp',[]); | |
myApp.factory('myFunc',function($window){ | |
return{ | |
get : function(text){ | |
$window.text; | |
alert($window.text); | |
} | |
} | |
}) | |
//ex3 //インスタンスに登録していき最後返却する書き方 | |
var myApp = angular.module('MyApp',[]); | |
myApp.factory('factoryService',function(){ | |
var moritaService = {}; //moritaServiceインスタンスを生成 | |
moritaService.message = "This is kenjiService";//プロパティ登録 | |
moritaService.value = {//オブジェクト登録 | |
value : 111, | |
value2 : 222 | |
}; | |
moritaService.add = function(a,b){//メソッド登録 | |
retunr a + b; | |
} | |
return moritaService; //ホストオブジェクトを返却//このserviceを利用する側はmoritaServiceをそのまま利用する | |
}) | |
//ex4 //DIできるfactory。他のサービスを利用しながら定義 | |
var myApp = angular.module('MyApp',[]); | |
myApp.value('myURL','https://github.com/kenjimorita/');//アプリケーション全体の定数管理(サーバーサイドのURLなど)今回使わない | |
myApp.constant('apiUrl','/api/products.json'); | |
myApp.constant('apiKey','faea13vata42gae5kk6eeeg75645nkiji'); | |
//$resourceをラップしたサービスを定義 | |
myApp.factory('myApiFactory',[$resource,apiUrl,apiKey, | |
function($resurce,apiUrl,apiKey){//配列で最後定義 | |
return $resource(apiUrl).query({api_key : apiKey}); | |
}]); | |
//↓myApiFactoryを利用する側 | |
angular.module('myApp').controller('moritaController', | |
['$scope','myApiFactory', | |
function($scope,myApiFactory){ | |
$scope.apiFactory = myApiFactory; | |
}] | |
) |
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
構文: angular.Module.factory(name:string,getFn) |
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
//ex1 //値返す書き方 | |
var myApp = angular.module('MyApp',[]); | |
myApp.factory('myUrlFactory',function myUrlFunc(){ | |
return 'https://github.com/kenjimorita/'; | |
}) | |
//ex2 //関数を返す書き方 | |
var myApp = angular.module('MyApp',[]); | |
myApp.factory('myFunc',function($window){ | |
return{ | |
get : function(text){ | |
$window.text; | |
alert($window.text); | |
} | |
} | |
}) | |
//ex3 //インスタンスに登録していき最後返却する書き方 | |
var myApp = angular.module('MyApp',[]); | |
myApp.factory('factoryService',function(){ | |
var moritaService = {}; //moritaServiceインスタンスを生成 | |
moritaService.message = "This is kenjiService";//プロパティ登録 | |
moritaService.value = {//オブジェクト登録 | |
value : 111, | |
value2 : 222 | |
}; | |
moritaService.add = function(a,b){//メソッド登録 | |
retunr a + b; | |
} | |
return moritaService; //ホストオブジェクトを返却//このserviceを利用する側はmoritaServiceをそのまま利用する | |
}) | |
//ex4 //DIできるfactory。他のサービスを利用しながら定義 | |
var myApp = angular.module('MyApp',[]); | |
myApp.value('myURL','https://github.com/kenjimorita/');//アプリケーション全体の定数管理(サーバーサイドのURLなど)今回使わない | |
myApp.constant('apiUrl','/api/products.json'); | |
myApp.constant('apiKey','faea13vata42gae5kk6eeeg75645nkiji'); | |
//$resourceをラップしたサービスを定義 | |
myApp.factory('myApiFactory',[$resource,apiUrl,apiKey, | |
function($resurce,apiUrl,apiKey){//配列で最後定義 | |
return $resource(apiUrl).query({api_key : apiKey}); | |
}]); | |
//↓myApiFactoryを利用する側 | |
angular.module('myApp').controller('moritaController', | |
['$scope','myApiFactory', | |
function($scope,myApiFactory){ | |
$scope.apiFactory = myApiFactory; | |
}] | |
) | |
//ex5 既にどこかで用意されているHogeClass | |
.factory('MyService',function(){ | |
return new HogeClass(); | |
}) | |
//ex6 サービスオブジェクトを返す | |
.factory('MyService',function(){ | |
return FooClass.GetInstance(data); | |
}) |
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
構文: angular.Module.service(name,constructor); |
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
//ex1 | |
var myApp = angular.module('myApp',[]); | |
myApp.service('myService',function(){ | |
this.value = 'myService!!'; | |
this.valueObj = { | |
value1 : 333, | |
value2 : 555 | |
}; | |
this.get = function(a,b){ | |
return a + b; | |
}; | |
}); | |
//ex2 factoryとserviceの比較 | |
var myApp = angular.module('myApp',[]); | |
var myService = function(){//下記serviceとfactoryで利用するためのサービスの定義 | |
this.message = 'This is my service'; | |
this.add = function(a, b){ | |
return a + b; | |
}; | |
}; | |
//下記は上記で定義したmyServiceを利用する例。同じ意味。 | |
myApp.service('MyserviceByService',myService);//コンストラクタ関数の登録。利用する側でnew呼び出し、共有される。newは一回、初期化処理されたらそれを共有する | |
myApp.factory('MyserviceByFactory',function(){//インスタンスを呼び出して渡す | |
return new myService(); | |
}) | |
//ex3 | |
//3つのメソッドを登録するservice | |
.service('triangle',['$log',function($log){//配列アノテーションで他のサービスを注入できる | |
//triangleメソッド | |
this.triangle = function(base, height){//javascript同様にconstructor関数内でthis.[method]=~形式で定義できる | |
$log.info('[triangle]底辺:' + base); | |
$log.info('[triangle]高さ:' + height); | |
return base * height / 2; | |
}; | |
//circleメソッド | |
this.circle = function(radius){ | |
$log.info('[circle]半径:' + radius); | |
return radius * radius * Math.PI; | |
} | |
//trapezoid メソッド | |
this.trapezoid = function(upper, lower, height){ | |
$log.info('[trapezoid]上辺:' + upper); | |
$log.info('[trapezoid]下辺:' + lower); | |
$log.info('[trapezoid]高さ:' + height); | |
return (upper + lower) * height / 2; | |
}; | |
}]) | |
//つまりこの構文の形は。。 | |
.service('triangle',[,,function( | |
A | |
){ | |
B | |
}]); | |
//TypeScriptでいうところのこういう形 | |
class triangle { | |
constructor(A) | |
{ | |
B //this.triangle = ()=>{} | |
... | |
} | |
} | |
//ex3をAngularで利用する | |
//html | |
<ul> | |
<li>三角形 (底辺4×3) : {{triangle}}</li> | |
<li>円(半径5) : {{circle}}</li> | |
<li>台形 (上辺5 /下辺10 × 3) : {{trapezoid}}</li> | |
</ul> | |
//Angular | |
angular.module('myApp',[]) | |
.service('FigureService', ['$log',function($log){ | |
...中略... | |
]) | |
.controller('Mycontroller',['$scope','FigureService', | |
function($scope,FigureService){ | |
$scope.triagle = FigureService.triangle(4,3); | |
$scope.circle = FigureService.circle(5); | |
$scope.trapezoid = FigureService.trapezoid(5,10,3); | |
}]) |
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
class MyService{ | |
constructor( | |
private $resource:ng.resource.IResourceService,//returnしないものはprivete | |
private apiUrl:String | |
){} | |
get (){ | |
return this.$resource(this.apiUrl).get(); | |
} | |
} | |
angular.module('MyApp',[]).service('MyService',MyService);//ここでnewされる。ただし1回のみで、このサービスをDIして使い回す。controller内にserviceをDIしすぎに注意 |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment