Skip to content

Instantly share code, notes, and snippets.

@kenmori

kenmori/file0.js

Last active Jul 3, 2016
Embed
What would you like to do?
Angular#serviceと#factoryの違い。どういう時どっちを利用するか。定義方法。使い方を理解するまとめ(2015/8/29更新) ref: http://qiita.com/M-ISO/items/102c6daf192187d5a161
//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;
}]
)
構文: angular.Module.factory(name:string,getFn)
//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);
})
構文: angular.Module.service(name,constructor);
//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);
}])
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