angularJS中service、provice、factor区别

最新推荐文章于 2024-07-21 09:04:51 发布

快乐的程序媛

最新推荐文章于 2024-07-21 09:04:51 发布

阅读量1.4k

点赞数

分类专栏： Angularjs

Angularjs 专栏收录该内容

19 篇文章

订阅专栏

本文通过实例对比了AngularJS中service、factory和provider的区别。service直接提供实例方法；factory通过返回对象提供方法调用入口；provider则需通过$get定义并调用方法。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

provider, factory和service都是写AngularJS的service中常用的关键字，很容易混淆，写了一个简单的例子显示他们之间的区别：

分别用service，factory和provider定义三个service：

[html] view plain copy

print ?

var wtcModule = angular.module('wtc', []);
wtcModule.service('testService',function(){
this.lable = 'this is service';
});
wtcModule.factory('testFactory', function () {
return{
lable: function(){
return 'this is factory';
}
}
});
wtcModule.provider('testProvider', function(){
this.$get = function(){
return 'this is provider';
}
});

var wtcModule = angular.module('wtc', []);

wtcModule.service('testService',function(){
     this.lable = 'this is service';
});

wtcModule.factory('testFactory', function () {
     return{
        lable: function(){
        return 'this is factory';
        }
    }
});

wtcModule.provider('testProvider', function(){
    this.$get = function(){
        return 'this is provider';
    }
});

在页面上留出三个占位符：

[html] view plain copy

print ?

<body ng-controller='outputCtrl'>
{{ output1 }}
{{ output2 }}
{{ output3 }}
</body>

<body ng-controller='outputCtrl'>
    <p>{{ output1 }}</p>
    <p>{{ output2 }}</p>
    <p>{{ output3 }}</p>
</body>

写好outputCtrl:

[html] view plain copy

print ?

var wtcModule = angular.module('wtc');
wtcModule.controller('outputCtrl', function($scope,testService, testFactory, testProvider){
$scope.output1 = testService.lable;
$scope.output2 = testFactory.lable();
$scope.output3 = testProvider;
});

var wtcModule = angular.module('wtc');

wtcModule.controller('outputCtrl', function($scope,testService, testFactory, testProvider){
    $scope.output1 = testService.lable;
    $scope.output2 = testFactory.lable();
    $scope.output3 = testProvider;
});

最后页面的显示结果为；