相关文章推荐
依赖注入(DI)：必须具备三个要素1、服务注册2、依赖关系声明3、对象的获取
在angular中，module 和$provide 相当于是服务的注册。injector用来获取对象。如何创建获取模块...
你初试 Angular 时，很自然地就会往 controller 和 scope 里堆满不必要的逻辑。一定要早点意识到，controller 这一层应该很薄；也就是说，应用里大部分的业务逻辑和持久化数...
控制器膨胀
控制器是AngularJS的肉和土豆，一不小心就会将过多的逻辑加入其中，尤其是刚开始的时候。控制器永远都不应该去操作DOM，或是持有DOM选择器，那是我们需要使用指令和ng-mode...
AngularJS: Factory vs Service vs Provider
On May 4, 2014
With 44
...
一、service引导
刚开始学习Angular的时候，经常被误解和被初学者问到的组件是 service(), factory(), 和 provide()这几个方法之间的差别。This is
...
用有过Spring的人都知道，Spring的核心思想就是DI(依赖注入,Dependency Injection)和IOC(控制反转 Invension of Controller),AngularJ...
用有过Spring的人都知道，Spring的核心思想就是DI(依赖注入,Dependency Injection)和IOC(控制反转 Invension of Controller),AngularJ...
初学 AngularJS 时， 肯定会对其提供 factory 、 service 和 provider 感到疑惑， 这三种都是提供服务的方式， 他们到底有什么区别呢？
看了很多文章可能还是不太说得出AngularJS中的几个创建供应商(provider)的方法(factory(),service(),provider())到底有啥区别，啥时候该用啥，之前一直傻傻分不...
首先，provider, value, constant, service, factory他们都是provider！（decorator小朋友先搬个小板凳坐在边上等会儿，现在还没轮到你出场哈~）
他的最新文章
他的热门文章
您举报文章：
举报原因：
原文地址：
原因补充：
(最多只允许输入30个字)－－一步，二步，三步，N步，二行脚印
张映 发表于
分类目录：
标签：, , , , ,
angularjs框架学了有一段时间了，感觉很好用。可以把angularjs的app理解成php的class，controller是控制器，而内置服务和自定义服务就可以理解成models了。angularjs的内置服务多，例如：$scope,$rootScope,$http,$q,$resource,$routeProvider等等，下面来说一下怎么自定义服务
一，factory,service,provider自定义服务，services.js
'use strict';
/* Services */
var phonecatServices = angular.module('phonecatServices', []);
phonecatServices.factory('facetorytest', ['$window',
//factory方式
function($window){
var test = {
firstname:"tank",
lastname:function(){
return "zhang";
$window.alert('aaaa');
//内置服务可以注入
phonecatServices.service('servicetest', ['$window',
//service方式
function($window){
$window.alert('bbbb');
//内置服务可以注入
this.firstname = "tank";
this.lastname = function(){
return "zhang";
phonecatServices.provider('providertest',[
//provider方式，内置服务不可以注入
function(){
this.test = {
"firstname":"tank",
"lastname":"zhang"
this.$get = function () {
return this.
二，controller调用自定义模块，controllers.js
'use strict';
/* Controllers */
var phonecatControllers = angular.module('phonecatControllers', []);
//写过js function的对这种调用方式，很熟悉，服务名称不能变
function TestCtrl($scope,facetorytest,servicetest,providertest) {
$scope.facetorytest = facetorytest.firstname+" "+facetorytest.lastname();
$scope.servicetest = servicetest.firstname+" "+servicetest.lastname();
$scope.providertest = providertest.firstname+" "+providertest.
//这种调用方式根jquery非常的像，服务名称也不能变
phonecatControllers.controller('TestCtrl',function($scope,facetorytest,servicetest,providertest) {
$scope.facetorytest = facetorytest.firstname+" "+facetorytest.lastname();
$scope.servicetest = servicetest.firstname+" "+servicetest.lastname();
$scope.providertest = providertest.firstname+" "+providertest.
//以注入的方式来调用，服务名称可以改变
phonecatControllers.controller('TestCtrl',['$scope',"facetorytest","servicetest","providertest",
function($scope,facetory111,service111,provider111) {
//自定义,服务名称
$scope.facetorytest = facetory111.firstname+" "+facetory111.lastname();
$scope.servicetest = service111.firstname+" "+service111.lastname();
$scope.providertest = provider111.firstname+" "+provider111.
三，创建app把上面的service和controller接合到一起。app.js
'use strict';
/* App Module */
var phonecatApp = angular.module('phonecatApp', [
'ngRoute',
'phonecatControllers',
//上面定义的controller
'phonecatServices'
//上面自定义的服务
四，html中显示
&!doctype html&
&html lang="en" ng-app="phonecatApp"&
&meta charset="utf-8"&
&title&Google Phone Gallery&/title&
&link rel="stylesheet" href="css/app.css"&
&link rel="stylesheet" href="css/bootstrap.css"&
&script src="lib/angular/angular.js"&&/script&
&script src="lib/angular/angular-route.js"&&/script&
&script src="js/app.js"&&/script&
&script src="js/controllers.js"&&/script&
&script src="js/services.js"&&/script&
&div ng-controller="TestCtrl"&
&p&{{facetorytest}}&/p&
&p&{{servicetest}}&/p&
&p&{{providertest}}&/p&
显示结果：
tank zhang
tank zhang
tank zhang
五，错误纠正
在网上看到，有人说service是不能注入内置服务器的，但是实际操作结果是provider是不能注入内置服务的。我用的angularjs的版本是AngularJS v1.2.14
phonecatServices.provider('providertest',['$window',
function($window){
$window.alert('cccc');
this.test = {
"firstname":"tank",
"lastname":"zhang"
this.$get = function () {
return this.
provider 注入内置服务错误
转载请注明作者:海底苍鹰地址:Angularjs中provider,factory和service的不同 - zhustar - 博客园
posts - 7, comments - 5, trackbacks - 0, articles - 0
provider, factory和service都是写Angularjs的service中常用的关键字，很容易混淆，写了一个简单的例子显示他们之间的区别：
分别用service，factory和provider定义三个service：
var wtcModule = angular.module('wtc', []);
wtcModule.service('testService',function(){
this.lable = 'this is service';
wtcModule.factory('testFactory', function () {
lable: function(){
return 'this is factory';
wtcModule.provider('testProvider', function(){
this.$get = function(){
return 'this is provider';
在页面上留出三个占位符：
&body ng-controller='outputCtrl'&
&p&{{ output1 }}&/p&
&p&{{ output2 }}&/p&
&p&{{ output3 }}&/p&
写好outputCtrl:
var wtcModule = angular.module('wtc');
wtcModule.controller('outputCtrl', function($scope,testService, testFactory, testProvider){
$scope.output1 = testService.
$scope.output2 = testFactory.lable();
$scope.output3 = testP
最后页面的显示结果为；
注入service，相当于注入service定义时的function实例。
注入factory，相当于注入factory定义时的函数调用入口。
注入provider，相当于注入provider内$get定义的函数实例的调用。自定义factory服务_百度经验
&&&&&&互联网自定义factory服务听语音
百度经验://var m1 = angular.module('myApp',[]);////m1.factory('myservice',function(){// // return &kerwin-service&;// return {//
name:&kerwinservide&,//
show:function(){//
return this.//
}// }//})//m1.controller('main',['$scope','myservice',function($scope,myservice){//// console.log(myservice.show());//}]);百度经验:angularJSangularJS百度经验:1//var m1 = angular.module('myApp',[]);2m1.factory('myservice',function(){// // return &kerwin-service&;// return {// name:&kerwinservide&,// show:function(){// return this.// }// }//})3//m1.controller('main',['$scope','myservice',function($scope,myservice){//// console.log(myservice.show());//}]);4完事了END百度经验:注意HTML中要来个ng-app="myapp"注意HTML中要来个ng-controller="main"经验内容仅供参考，如果您需解决具体问题(尤其法律、医学等领域)，建议您详细咨询相关领域专业人士。作者声明：本篇经验系本人依照真实经历原创，未经许可，谢绝转载。投票(0)已投票(0)有得(0)我有疑问(0)◆◆说说为什么给这篇经验投票吧！我为什么投票...你还可以输入500字◆◆只有签约作者及以上等级才可发有得&你还可以输入1000字◆◆如对这篇经验有疑问，可反馈给作者，经验作者会尽力为您解决！你还可以输入500字相关经验00102_百度知道_百度知道热门杂志第1期你不知道的iPad技巧3680次分享第1期win7电脑那些事6471次分享第2期新人玩转百度经验1341次分享第1期Win8.1实用小技巧2624次分享第1期小白装大神1860次分享◆请扫描分享到朋友圈博客分类：
// Source: /forum/#!topic/angular/hVrkvaHGOfc
// jsFiddle: http://jsfiddle.net/pkozlowski_opensource/PxdSP/14/
// author: Pawel Kozlowski
var myApp = angular.module('myApp', []);
//service style, probably the simplest one
myApp.service('helloWorldFromService', function() {
&&& this.sayHello = function() {
&&&&&&& return "Hello, World!"
&&& };
});
//factory style, more involved but more sophisticated
myApp.factory('helloWorldFromFactory', function() {
&&& return {
&&&&&&& sayHello: function() {
&&&&&&&&&&& return "Hello, World!"
&&&&&&& }
&&& };
});
&&&
//provider style, full blown, configurable version&&&&
myApp.provider('helloWorld', function() {
&&& // In the provider function, you cannot inject any
&&& // service or factory. This can only be done at the
&&& // "$get" method.
&&& this.name = 'Default';
&&& this.$get = function() {
&&&&&&& var name = this.
&&&&&&& return {
&&&&&&&&&&& sayHello: function() {
&&&&&&&&&&&&&&& return "Hello, " + name + "!"
&&&&&&&&&&& }
&&&&&&& }
&&& };
&&& this.setName = function(name) {
&&&&&&& this.name =
&&& };
});
//hey, we can configure a provider!&&&&&&&&&&&
myApp.config(function(helloWorldProvider){
&&& helloWorldProvider.setName('World');
});
&&&&&&&
function MyCtrl($scope, helloWorld, helloWorldFromFactory, helloWorldFromService) {
&&&
&&& $scope.hellos = [
&&&&&&& helloWorld.sayHello(),
&&&&&&& helloWorldFromFactory.sayHello(),
&&&&&&& helloWorldFromService.sayHello()];
}
这是从/Mithrandir0x/3639232看到的一段代码，很直接的写出了service factory provider的区别，service：this.function 比较直接， factory：返回对象，有点像json& provider:可以配置参数，方便封装服务。
浏览: 78 次
来自: 济南
(window.slotbydup=window.slotbydup || []).push({
id: '4773203',
container: s,
size: '200,200',
display: 'inlay-fix'