AngularJS中的服务、提供商和工厂之间有什么区别？
当前回答
从AngularJS邮件列表中，我得到了一个令人惊叹的线程，它解释了服务与工厂与供应商以及它们的注入用法。编写答案：
服务
语法：module.service（'serviceName'，function）；结果：当将serviceName声明为可注入参数时，将为您提供函数的实例。换句话说，新的FunctionYouPassedToService（）。
工厂
语法：module.factory（'factoryName'，function）；结果：当将factoryName声明为可注入参数时，将提供通过调用传递给module.factory的函数引用返回的值。
提供商
语法：module.provider（'providerName'，function）；结果：当将providerName声明为可注入参数时，将提供（newProviderFunction（））$get（）。在调用$get方法之前实例化构造函数函数-ProviderFunction是传递给module.provider的函数引用。
提供程序的优点是可以在模块配置阶段进行配置。
请参阅此处获取提供的代码。
下面是Misko的进一步解释：
provide.value('a', 123);
function Controller(a) {
expect(a).toEqual(123);
}
在这种情况下，注入器只是按原样返回值。但是如果您想计算该值呢？然后使用工厂
provide.factory('b', function(a) {
return a*2;
});
function Controller(b) {
expect(b).toEqual(246);
}
因此，工厂是一个负责创造价值的职能部门。注意，工厂函数可以要求其他依赖项。
但是，如果你想成为更多的OO，并拥有一个名为Greeter的类呢？
function Greeter(a) {
this.greet = function() {
return 'Hello ' + a;
}
}
然后，要实例化，必须编写
provide.factory('greeter', function(a) {
return new Greeter(a);
});
然后我们可以像这样在控制器中请求“问候者”
function Controller(greeter) {
expect(greeter instanceof Greeter).toBe(true);
expect(greeter.greet()).toEqual('Hello 123');
}
但这太啰嗦了。一个简短的写法是provider.service（“greeter”，greeter）；
但是如果我们想在注入之前配置Greeter类呢？然后我们可以写
provide.provider('greeter2', function() {
var salutation = 'Hello';
this.setSalutation = function(s) {
salutation = s;
}
function Greeter(a) {
this.greet = function() {
return salutation + ' ' + a;
}
}
this.$get = function(a) {
return new Greeter(a);
};
});
然后我们可以这样做：
angular.module('abc', []).config(function(greeter2Provider) {
greeter2Provider.setSalutation('Halo');
});
function Controller(greeter2) {
expect(greeter2.greet()).toEqual('Halo 123');
}
顺便说一句，服务、工厂和价值都来自提供者。
provider.service = function(name, Class) {
provider.provide(name, function() {
this.$get = function($injector) {
return $injector.instantiate(Class);
};
});
}
provider.factory = function(name, factory) {
provider.provide(name, function() {
this.$get = function($injector) {
return $injector.invoke(factory);
};
});
}
provider.value = function(name, value) {
provider.factory(name, function() {
return value;
});
};
其他回答
下面是我为AngularjS中的对象工厂设计的一些烧烤代码模板。我用汽车/汽车工厂作为例子来说明。在控制器中生成简单的实现代码。
<script>
angular.module('app', [])
.factory('CarFactory', function() {
/**
* BroilerPlate Object Instance Factory Definition / Example
*/
this.Car = function() {
// initialize instance properties
angular.extend(this, {
color : null,
numberOfDoors : null,
hasFancyRadio : null,
hasLeatherSeats : null
});
// generic setter (with optional default value)
this.set = function(key, value, defaultValue, allowUndefined) {
// by default,
if (typeof allowUndefined === 'undefined') {
// we don't allow setter to accept "undefined" as a value
allowUndefined = false;
}
// if we do not allow undefined values, and..
if (!allowUndefined) {
// if an undefined value was passed in
if (value === undefined) {
// and a default value was specified
if (defaultValue !== undefined) {
// use the specified default value
value = defaultValue;
} else {
// otherwise use the class.prototype.defaults value
value = this.defaults[key];
} // end if/else
} // end if
} // end if
// update
this[key] = value;
// return reference to this object (fluent)
return this;
}; // end this.set()
}; // end this.Car class definition
// instance properties default values
this.Car.prototype.defaults = {
color: 'yellow',
numberOfDoors: 2,
hasLeatherSeats: null,
hasFancyRadio: false
};
// instance factory method / constructor
this.Car.prototype.instance = function(params) {
return new
this.constructor()
.set('color', params.color)
.set('numberOfDoors', params.numberOfDoors)
.set('hasFancyRadio', params.hasFancyRadio)
.set('hasLeatherSeats', params.hasLeatherSeats)
;
};
return new this.Car();
}) // end Factory Definition
.controller('testCtrl', function($scope, CarFactory) {
window.testCtrl = $scope;
// first car, is red, uses class default for:
// numberOfDoors, and hasLeatherSeats
$scope.car1 = CarFactory
.instance({
color: 'red'
})
;
// second car, is blue, has 3 doors,
// uses class default for hasLeatherSeats
$scope.car2 = CarFactory
.instance({
color: 'blue',
numberOfDoors: 3
})
;
// third car, has 4 doors, uses class default for
// color and hasLeatherSeats
$scope.car3 = CarFactory
.instance({
numberOfDoors: 4
})
;
// sets an undefined variable for 'hasFancyRadio',
// explicitly defines "true" as default when value is undefined
$scope.hasFancyRadio = undefined;
$scope.car3.set('hasFancyRadio', $scope.hasFancyRadio, true);
// fourth car, purple, 4 doors,
// uses class default for hasLeatherSeats
$scope.car4 = CarFactory
.instance({
color: 'purple',
numberOfDoors: 4
});
// and then explicitly sets hasLeatherSeats to undefined
$scope.hasLeatherSeats = undefined;
$scope.car4.set('hasLeatherSeats', $scope.hasLeatherSeats, undefined, true);
// in console, type window.testCtrl to see the resulting objects
});
</script>
这里有一个更简单的例子。我使用的是一些第三方库，它们期望“Position”对象显示纬度和经度，但通过不同的对象财产。我不想破解供应商代码，所以我调整了我传递的“位置”对象。
angular.module('app')
.factory('PositionFactory', function() {
/**
* BroilerPlate Object Instance Factory Definition / Example
*/
this.Position = function() {
// initialize instance properties
// (multiple properties to satisfy multiple external interface contracts)
angular.extend(this, {
lat : null,
lon : null,
latitude : null,
longitude : null,
coords: {
latitude: null,
longitude: null
}
});
this.setLatitude = function(latitude) {
this.latitude = latitude;
this.lat = latitude;
this.coords.latitude = latitude;
return this;
};
this.setLongitude = function(longitude) {
this.longitude = longitude;
this.lon = longitude;
this.coords.longitude = longitude;
return this;
};
}; // end class definition
// instance factory method / constructor
this.Position.prototype.instance = function(params) {
return new
this.constructor()
.setLatitude(params.latitude)
.setLongitude(params.longitude)
;
};
return new this.Position();
}) // end Factory Definition
.controller('testCtrl', function($scope, PositionFactory) {
$scope.position1 = PositionFactory.instance({latitude: 39, longitude: 42.3123});
$scope.position2 = PositionFactory.instance({latitude: 39, longitude: 42.3333});
}) // end controller
;
此答案针对主题/问题
Factory、Service和Constant是如何在提供者配方之上添加语法糖的？
OR
工厂、服务和供应商在内部是怎样的
基本上发生的是
当您创建factory（）时，它会将第二个参数中提供的函数设置为provider的$get并返回它（provider（name，｛$get:factoryFn｝）），您所得到的只是provider，但除了$get之外没有其他属性/方法（这意味着您无法配置）
工厂源代码
function factory(name, factoryFn, enforce) {
return provider(name, {
$get: enforce !== false ? enforceReturnValue(name, factoryFn) : factoryFn
});
};
当生成服务（）时，它返回您提供factory（）的函数，该函数注入构造函数（返回您在服务中提供的构造函数的实例）并返回它
服务源代码
function service(name, constructor) {
return factory(name, ['$injector', function($injector) {
return $injector.instantiate(constructor);
}]);
};
因此，基本上在这两种情况下，您最终都会将providers$get设置为您提供的函数，但您可以提供$get以外的任何内容，因为您最初可以在provider（）中为config块提供
1.服务是在必要时创建的单例对象，在应用程序生命周期结束之前（浏览器关闭时）不会被清理。控制器在不再需要时被销毁和清理。
2.创建服务的最简单方法是使用factory（）方法。factory（）方法允许我们通过返回包含服务函数和服务数据的对象来定义服务。服务定义函数是我们放置可注入服务的地方，例如$http和$q。前任：
angular.module('myApp.services')
.factory('User', function($http) { // injectables go here
var backendUrl = "http://localhost:3000"; var service = {
// our factory definition
user: {},
setName: function(newName) {
service.user['name'] = newName;
},
setEmail: function(newEmail) { service.user['email'] = newEmail;
},
save: function() {
return $http.post(backendUrl + '/users', { user: service.user
}); }
};
return service; });
在我们的应用程序中使用factory（）
在我们的应用程序中使用工厂很容易，因为我们可以在运行时在需要的地方简单地注入工厂。
angular.module('myApp')
.controller('MainController', function($scope, User) {
$scope.saveUser = User.save;
});
另一方面，service（）方法允许我们通过定义构造函数来创建服务。我们可以使用原型对象来定义服务，而不是原始javascript对象。与factory（）方法类似，我们还将在函数定义中设置可注入项。创建服务的最低级方法是使用provide（）方法。这是创建可以使用.config（）函数配置的服务的唯一方法。与前面的to方法不同，我们将在定义的this中设置可注射对象$get（）函数定义。
工厂
如果给AngularJS一个函数，AngularJS将在请求工厂时缓存并注入返回值。
例子：
app.factory('factory', function() {
var name = '';
// Return value **is** the object that will be injected
return {
name: name;
}
})
用法：
app.controller('ctrl', function($scope, factory) {
$scope.name = factory.name;
});
服务
如果给AngularJS一个函数，AngularJS将调用new来实例化它。AngularJS创建的实例将在请求服务时缓存并注入。由于new用于实例化服务，因此关键字this是有效的，并引用实例。
例子：
app.service('service', function() {
var name = '';
this.setName = function(newName) {
name = newName;
}
this.getName = function() {
return name;
}
});
用法：
app.controller('ctrl', function($scope, service) {
$scope.name = service.getName();
});
供应商
给AngularJS一个函数，AngularJS将调用它的$get函数。它是$get函数的返回值，将在请求服务时缓存并注入。
提供程序允许您在AngularJS调用$get方法获取可注入对象之前配置提供程序。
例子：
app.provider('provider', function() {
var name = '';
this.setName = function(newName) {
name = newName;
}
this.$get = function() {
return {
name: name
}
}
})
用法（作为控制器中的注射剂）
app.controller('ctrl', function($scope, provider) {
$scope.name = provider.name;
});
用法（在调用$get以创建可注射对象之前配置提供程序）
app.config(function(providerProvider) {
providerProvider.setName('John');
});
派对有点晚了。但我认为这对那些想学习（或清楚）如何使用工厂、服务和提供者方法开发Angular JS自定义服务的人更有用。
我看到了这段视频，它清楚地解释了开发AngularJS定制服务的工厂、服务和供应商方法：
https://www.youtube.com/watch?v=oUXku28ex-米
源代码：http://www.techcbt.com/Post/353/Angular-JS-basics/how-to-develop-angularjs-custom-service
此处发布的代码直接从上述来源复制，以使读者受益。
基于“工厂”的定制服务的代码如下（它与同步和异步版本一起调用http服务）：
var app=角度模块（“app”，[]）；app.controller（'imp'，['$scope'，'calcFactory'，函数（$scope，calcFactory）{$scope.a=10；$scope.b=20；$scope.doSum=函数（）{//$scope.sum=calcFactory.getSum（$scope.a，$scope.b）//同步的calcFactory.getSum（$scope.a，$scope.b，函数（r）{//aynchronous$scope.sum=r；});};}]);app.factory（'calFactory'，['$http'，'$log'，函数（$http，$log）{$log.log（“实例化calcFactory.”）；var oCalcService=｛｝；//oCalcService.getSum=函数（a，b）{//返回parseInt（a）+parseInt（b）；//};//oCalcService.getSum=函数（a，b，cb）{//var s=parseInt（a）+parseInt（b）；//cb（s）；//};oCalcService.getSum=函数（a，b，cb）｛//使用http服务$http({url:'http://localhost:4467/Sum?a='+a+'和b='+b，方法：'GET'}).然后（函数（resp）{$log.log（对应数据）；cb（相应数据）；}，函数（resp）{$log.error（“出现错误”）；});};return oCalcService；}]);
自定义服务的“服务”方法的代码（这与“工厂”非常相似，但从语法角度来看不同）：
var app=角度模块（“app”，[]）；app.controller（'imp'，['$scope'，'calcService'，函数（$scope，calcService）{$scope.a=10；$scope.b=20；$scope.doSum=函数（）{//$scope.sum=calcService.getSum（$scope.a，$scope.b）；calcService.getSum（$scope.a，$scope.b，函数（r）{$scope.sum=r；}); };}]);app.service（'calService'，['$http'，'$log'，函数（$http，$log）{$log.log（“实例化calcService..”）；//this.getSum=函数（a，b）{//返回parseInt（a）+parseInt（b）；//};//this.getSum=函数（a，b，cb）{//var s=parseInt（a）+parseInt（b）；//cb（s）；//};this.getSum=函数（a，b，cb）{$http({url:'http://localhost:4467/Sum?a='+a+'和b='+b，方法：'GET'}).然后（函数（resp）{$log.log（对应数据）；cb（相应数据）；}，函数（resp）{$log.error（“出现错误”）；});};}]);
自定义服务的“提供者”方法的代码（如果您想开发可配置的服务，这是必要的）：
var app=角度模块（“app”，[]）；app.controller（'imp'，['$scope'，'calcService'，函数（$scope，calcService）{$scope.a=10；$scope.b=20；$scope.doSum=函数（）{//$scope.sum=calcService.getSum（$scope.a，$scope.b）；calcService.getSum（$scope.a，$scope.b，函数（r）{$scope.sum=r；}); };}]);app.provider（'calService'，函数（）{var baseUrl=“”；this.config=函数（url）{baseUrl=url；};这一点$get=['$log'，'$http'，函数（$log，$http）{$log.log（“正在实例化calcService…”）var oCalcService=｛｝；//oCalcService.getSum=函数（a，b）{//返回parseInt（a）+parseInt（b）；//};//oCalcService.getSum=函数（a，b，cb）{//var s=parseInt（a）+parseInt（b）；//cb（s）； //};oCalcService.getSum=函数（a，b，cb）{$http({url:baseUrl+'/Sum？a=‘+a+’&b=‘+b，方法：'GET'}).然后（函数（resp）{$log.log（对应数据）；cb（相应数据）；}，函数（resp）{$log.error（“出现错误”）；});}; return oCalcService；}];});app.config（['calServiceProvider'，函数（calServiceProvider）{calcServiceProvider.config（“http://localhost:4467");}]);
最后是与上述任何服务一起工作的UI：
<html><head><title></title><script src=“https://ajax.googleapis.com/ajax/libs/angularjs/1.3.15/angular.min.js“></script><script type=“text/javascript”src=“t03.js”></script></head><body ng app=“app”><div ng controller=“emp”>＜div＞a的值为｛｛a｝｝，但你可以改变<input-type=text-ng-model=“a”/><br>b的值是{{b}}，但你可以改变<input-type=text-ng-model=“b”/><br></div>总和＝｛｛Sum｝｝<br><button ng click=“doSum（）”>计算</button></div></body></html>
推荐文章
- AngularJS控制器的生命周期是什么?
- $destroy是否删除事件监听器?
- 用布尔值将单选按钮绑定到模型
- AngularJS只适用于单页应用程序吗?
- angular.js中的内联条件
- 如何突出显示当前菜单项?
- 如何使用AngularJS获取url参数
- angularjs中的compile函数和link函数有什么区别
- 如何向一个5岁的孩子解释依赖注入?
- Ng-repeat结束事件
- 缓存一个HTTP 'Get'服务响应在AngularJS?
- 从ng-click获取原始元素
- Angular JS:当我们已经有了具有作用域的指令控制器时，指令的link函数还需要什么?
- Angularjs的ng-model不能在ng-if中工作
- AngularJS禁用了开发机器上的部分缓存
