AngularJS的自定義服務,factory、provider、service、constant、value等方法的區別
阿新 • • 發佈：2019-01-25
module
- filter() 自定義過濾器
- directive() 自定義指令
- factory() 自定義服務
- provider()
區別
$get
下面我們介紹一下factory()的自定義操作
<!DOCTYPE HTML>
<html ng-app="myApp">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>factory方法的自定義服務</title 舉個例子，比如說我們現在需要一個生成隨機數的服務
<!DOCTYPE HTML>
<html ng-app="myApp">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title></title>
<script src="angular.min.js"></script>
<script>
var m1 = angular.module('myApp',[]);
m1.factory('myRandomNum',function(){
return function(num1,num2){
return Math.random()*(num2-num1)+num1;
};
})
m1.controller('Aaa',['$scope','myRandomNum',function($scope,myRandomNum){
console.log(myRandomNum(-3,6));
}]);
</script>
</head>
<body>
<div ng-controller="Aaa">
</div>
</body>
</html>我們也可以通過provider的方法來自定義服務,provider和factory其實是比較類似的；
下面我們主要說一下factory與provider的區別；
factory方法是不能夠進行初始化配置的，也就是我們所說的模組下面供應商，利用config方法來初始化操作是不可以的；但是如果我們自定義的服務想進行初始化配置，就需要使用provider的方法；
AngularJS供應商——初始化配置介紹
<!DOCTYPE HTML>
<html ng-app="myApp">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>provider</title>
<script src="angular.min.js"></script>
<script>
var m1 = angular.module('myApp',[]);
m1.provider('myRandomNum',function(){ //裡面除了要寫return之外還需要寫一個$get的方法
return {
bolInt : false,
int : function(argBol){//取整方法
if(argBol){
this.bolInt = true;
}
else{
this.bolInt = false;
}
},
$get : function(){
var This = this;
return function(num1,num2){
return This.bolInt ? Math.round(Math.random()*(num2 - num1)) + num1 : Math.random()*(num2 - num1) + num1;
};
}
};
});
m1.config(['myRandomNumProvider',function(myRandomNumProvider){//
myRandomNumProvider.int(true); //取整
}]);
m1.controller('Aaa',['$scope','myRandomNum',function($scope,myRandomNum){
console.log( myRandomNum(-3,6) );
}]);
</script>
</head>
<body>
<div ng-controller="Aaa">
</div>
</body>
</html>例如：
<!DOCTYPE HTML>
<html ng-app="myApp">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>無標題文件</title>
<script src="angular.min.js"></script>
<script>
var m1 = angular.module('module1',[]);
m1.factory('myService',function(){
return {
name : 'hello',
show : function(){
return this.name + ':angular';
}
};
});
var m2 = angular.module('myApp',['module1']);//引入module1
m2.controller('Aaa',['$scope','myService',function($scope,myService){
console.log(myService.show());
}]);
</script>
</head>
<body>
<div ng-controller="Aaa">
</div>
</body>
</html>
factory與provider還有個區別就是factory可以多次呼叫；例如我們建一個service.js的檔案
service.js
var m1 = angular.module('module1',[]);
m1.factory('myService',function(){
return {
name : 'hello',
show : function(){
return this.name + ':angular';
}
};
});可以分別在兩個頁面呼叫
頁面一
<!DOCTYPE HTML>
<html ng-app="myApp">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>無標題文件</title>
<script src="angular.min.js"></script>
<script src="service.js"></script>
<script>
var m2 = angular.module('myApp',['module1']);
m1.config(['myServiceProvider',function(myServiceProvider){
myServiceProvider.name = 'hi';
}]);
m2.controller('Aaa',['$scope','myService',function($scope,myService){
console.log(myService.show());
}]);
</script>
</head>
<body>
<div ng-controller="Aaa">
</div>
</body>
</html>頁面二
<!DOCTYPE HTML>
<html ng-app="myApp">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>無標題文件</title>
<script src="angular.min.js"></script>
<script src="service.js"></script>
<script>
var m2 = angular.module('myApp',['module1']);
m2.controller('Aaa',['$scope','myService',function($scope,myService){
console.log(myService.show());
}]);
</script>
</head>
<body>
<div ng-controller="Aaa">
</div>
</body>
</html>注意事項：
1、自定義的服務，儘量不要用美元符號開頭；因為以美元符號開始的都是內部服務
2、一般情況下自定義服務寫在內部服務的後面
AngularJS除了factory與provider之外還有些不常用的自定義服務
模組間的通訊
-service()
-針對面向物件的，建構函式的服務
<!DOCTYPE HTML>
<html ng-app="myApp">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>service服務</title>
<script src="angular.min.js"></script>
<script>
var m1 = angular.module('myApp',[]);
m1.service('myService',FnService);
function FnService(){//建構函式
this.name = 'hello';
}
FnService.prototype.age = 20;
m1.controller('Aaa',['$scope','myService',function($scope,myService){
console.log(myService.name);
console.log(myService.age);
}]);
</script>
</head>
<body>
<div ng-controller="Aaa">
</div>
</body>
</html>constant()
-設定常量
constant和value都是用來設定常量的，他們的區別是constant方法是可以通過config方法配置獲取的，而value方法是不可以通過配置獲取的；
<!DOCTYPE HTML>
<html ng-app="myApp">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>無標題文件</title>
<script src="angular.min.js"></script>
<script>
var m1 = angular.module('myApp',[]);
m1.constant('myService','hello angular');
m1.config(['myService',function(myService){
console.log(myService);
}]);
m1.controller('Aaa',['$scope','myService',function($scope,myService){
console.log(myService);
}]);
</script>
</head>
<body>
<div ng-controller="Aaa">
</div>
</body>
</html>value()
- 區別
總結：
①factory方法是不能用config方法進行初始化配置的，而provider是可以使用config方法進行初始化配置的
②factory方法可以在多次呼叫
③service方法是針對面向物件，建構函式的自定義服務
④constant方法與value方法都是用來設定常量的，但是constant方法可以通過config方法進行初始化配置，而value方法不可以進行初始化配置