TL; DR
1）使用工厂时，请创建一个对象，向其添加属性，然后返回该对象。当您将此工厂传递到控制器中时，对象上的那些属性现在将通过您的工厂在该控制器中可用。
app.controller(‘myFactoryCtrl’, function($scope, myFactory){
$scope.artist = myFactory.getArtist();
});
app.factory(‘myFactory’, function(){
var _artist = ‘Shakira’;
var service = {};
service.getArtist = function(){
return _artist;
}
return service;
});
2）使用服务时，AngularJS 'new'关键字在后台实例化它。因此，您将向'this'添加属性，服务将返回'this'。当您将服务传递到控制器中时，“ this”上的那些属性现在将通过您的服务在该控制器上可用。
app.controller(‘myServiceCtrl’, function($scope, myService){
$scope.artist = myService.getArtist();
});
app.service(‘myService’, function(){
var _artist = ‘Nelly’;
this.getArtist = function(){
return _artist;
}
});
3） 提供程序是您可以传递给.config（）函数的唯一服务。当您想为服务对象提供模块范围的配置之前，请使用提供程序。
app.controller(‘myProvider’, function($scope, myProvider){
$scope.artist = myProvider.getArtist();
$scope.data.thingFromConfig = myProvider.thingOnConfig;
});
app.provider(‘myProvider’, function(){
//Only the next two lines are available in the app.config()
this._artist = ‘’;
this.thingFromConfig = ‘’;
this.$get = function(){
var that = this;
return {
getArtist: function(){
return that._artist;
},
thingOnConfig: that.thingFromConfig
}
}
});
app.config(function(myProviderProvider){
myProviderProvider.thingFromConfig = ‘This was set in config’;
});
非TL; DR
1）工厂
工厂是创建和配置服务的最流行方法。实际上，TL; DR所说的不多。您只需创建一个对象，向其添加属性，然后返回该对象即可。然后，当您将工厂传递到控制器中时，对象上的那些属性现在将通过工厂在该控制器中可用。下面是一个更广泛的示例。
app.factory(‘myFactory’, function(){
var service = {};
return service;
});
现在，当我们将“ myFactory”传递到控制器中时，我们附加到“服务”的任何属性都将可用。
现在，让我们在回调函数中添加一些“私有”变量。无法从控制器直接访问这些变量，但是我们最终将在“服务”上设置一些getter / setter方法，以便能够在需要时更改这些“私有”变量。
app.factory(‘myFactory’, function($http, $q){
var service = {};
var baseUrl = ‘https://itunes.apple.com/search?term=’;
var _artist = ‘’;
var _finalUrl = ‘’;
var makeUrl = function(){
_artist = _artist.split(‘ ‘).join(‘+’);
_finalUrl = baseUrl + _artist + ‘&callback=JSON_CALLBACK’;
return _finalUrl
}
return service;
});
在这里，您会注意到我们没有将这些变量/功能附加到“服务”上。我们只是创建它们，以便以后使用或修改它们。
- baseUrl是iTunes API所需的基本URL
- _artist是我们要查找的艺术家
- _finalUrl是我们要呼叫iTunes的最终且完全构建的URL
- makeUrl是一个将创建并返回iTunes友好URL的函数。
现在我们的帮助器/私有变量和函数已经到位，让我们向“服务”对象添加一些属性。无论我们把“服务”放在哪儿，都可以在传递“ myFactory”的任何控制器中直接使用。
我们将创建仅返回或设置艺术家的setArtist和getArtist方法。我们还将创建一个方法，该方法将使用创建的URL调用iTunes API。此方法将返回一个诺言，一旦数据从iTunes API返回，诺言就会实现。如果您在AngularJS中使用诺言没有太多经验，我强烈建议您对它们进行深入研究。
在setArtist下方，接受一位艺术家，并允许您设置该艺术家。getArtist返回艺术家。callItunes首先调用makeUrl（）来构建将用于$ http请求的URL。然后，它设置一个Promise对象，使用最终的URL发出$ http请求，然后由于$ http返回Promise，我们可以在请求后调用.success或.error。然后，我们用iTunes数据解决诺言，或者通过显示“出现错误”的消息来拒绝诺言。
app.factory('myFactory', function($http, $q){
var service = {};
var baseUrl = 'https://itunes.apple.com/search?term=';
var _artist = '';
var _finalUrl = '';
var makeUrl = function(){
_artist = _artist.split(' ').join('+');
_finalUrl = baseUrl + _artist + '&callback=JSON_CALLBACK'
return _finalUrl;
}
service.setArtist = function(artist){
_artist = artist;
}
service.getArtist = function(){
return _artist;
}
service.callItunes = function(){
makeUrl();
var deferred = $q.defer();
$http({
method: 'JSONP',
url: _finalUrl
}).success(function(data){
deferred.resolve(data);
}).error(function(){
deferred.reject('There was an error')
})
return deferred.promise;
}
return service;
});
现在我们的工厂完成了。现在，我们可以将“ myFactory”注入到任何控制器中，然后可以调用附加到服务对象（setArtist，getArtist和callItunes）的方法。
app.controller('myFactoryCtrl', function($scope, myFactory){
$scope.data = {};
$scope.updateArtist = function(){
myFactory.setArtist($scope.data.artist);
};
$scope.submitArtist = function(){
myFactory.callItunes()
.then(function(data){
$scope.data.artistData = data;
}, function(data){
alert(data);
})
}
});
在上面的控制器中，我们正在注入“ myFactory”服务。然后，使用来自“ myFactory”的数据在$ scope对象上设置属性。上面唯一棘手的代码是，如果您以前从未处理过诺言。由于callItunes正在返回承诺，因此我们可以使用.then（）方法，并且仅在iTunes数据满足承诺后，才设置$ scope.data.artistData。您会注意到我们的控制器非常“薄”（这是一个很好的编码实践）。我们所有的逻辑和持久数据都位于我们的服务中，而不是我们的控制器中。
2）服务
也许在创建服务时要知道的最大事情就是使用“ new”关键字实例化了它。对于您的JavaScript专家来说，这应该为您提供代码本质的一个重要提示。对于那些在JavaScript中具有有限背景的人或不太熟悉'new'关键字实际功能的人，让我们回顾一些JavaScript基础知识，这些基础知识最终将帮助我们理解服务的性质。
为了真正看到使用'new'关键字调用函数时发生的更改，让我们创建一个函数并使用'new'关键字调用它，然后让我们展示当解释器看到'new'关键字时所做的事情。最终结果将是相同的。
首先，让我们创建构造函数。
var Person = function(name, age){
this.name = name;
this.age = age;
}
这是典型的JavaScript构造函数。现在，每当我们使用“ new”关键字调用Person函数时，“ this”都将绑定到新创建的对象。
现在，让我们在Person的原型上添加一个方法，以便该方法在Person的“类”的每个实例上可用。
Person.prototype.sayName = function(){
alert(‘My name is ‘ + this.name);
}
现在，因为我们将sayName函数放在原型上，所以Person的每个实例都将能够调用sayName函数，以警告该实例的名称。
现在，我们在其原型上具有Person构造函数和sayName函数，让我们实际创建Person的实例，然后调用sayName函数。
var tyler = new Person(‘Tyler’, 23);
tyler.sayName(); //alerts ‘My name is Tyler’
因此，所有用于创建Person构造函数，向其原型添加函数，创建Person实例，然后在其原型上调用该函数的代码看起来都像这样。
var Person = function(name, age){
this.name = name;
this.age = age;
}
Person.prototype.sayName = function(){
alert(‘My name is ‘ + this.name);
}
var tyler = new Person(‘Tyler’, 23);
tyler.sayName(); //alerts ‘My name is Tyler’
现在，让我们看看在JavaScript中使用'new'关键字时实际发生的情况。您应该注意的第一件事是，在我们的示例中使用了“ new”之后，我们就可以像对待对象一样在“ tyler”上调用方法（sayName），这是因为。所以首先，我们知道我们的Person构造函数正在返回一个对象，无论是否可以在代码中看到它。第二，我们知道，因为我们的sayName函数位于原型上，而不是直接位于Person实例上，所以Person函数返回的对象必须在失败的查找时委派给其原型。用更简单的术语来说，当我们调用tyler.sayName（）时，解释器会说“确定，我将查看刚刚创建的'tyler'对象，找到sayName函数，然后对其进行调用。请稍等，我在这里看不到-我只看到名字和年龄，让我检查一下原型。是的，看起来像是在原型上，让我称呼它。”
下面的代码说明了如何思考'new'关键字在JavaScript中的实际作用。这基本上是上面段落的代码示例。我已经将“解释器视图”或解释器在便笺内看到代码的方式放入了。
var Person = function(name, age){
//The below line creates an object(obj) that will delegate to the person’s prototype on failed lookups.
//var obj = Object.create(Person.prototype);
//The line directly below this sets ‘this’ to the newly created object
//this = obj;
this.name = name;
this.age = age;
//return this;
}
了解了'new'关键字在JavaScript中的真正作用后，在AngularJS中创建服务应该更容易理解。
创建服务时要了解的最大事情是知道服务已使用'new'关键字实例化。将这些知识与上面的示例相结合，您现在应该认识到，您将把属性和方法直接附加到“ this”，然后将从服务本身返回该属性和方法。让我们看看实际情况。
与我们最初对Factory示例所做的不同，我们不需要创建对象然后返回该对象，因为就像之前多次提到的那样，我们使用了'new'关键字，因此解释器将创建该对象并将其委托给它是原型，然后无需我们进行工作即可将其退还给我们。
首先，让我们创建我们的“私有”和帮助函数。这应该看起来非常熟悉，因为我们对工厂进行了完全相同的操作。我不会在这里解释每一行的功能，因为我在工厂示例中做了此操作，如果您感到困惑，请重新阅读工厂示例。
app.service('myService', function($http, $q){
var baseUrl = 'https://itunes.apple.com/search?term=';
var _artist = '';
var _finalUrl = '';
var makeUrl = function(){
_artist = _artist.split(' ').join('+');
_finalUrl = baseUrl + _artist + '&callback=JSON_CALLBACK'
return _finalUrl;
}
});
现在，我们将在控制器中可用的所有方法附加到“ this”。
app.service('myService', function($http, $q){
var baseUrl = 'https://itunes.apple.com/search?term=';
var _artist = '';
var _finalUrl = '';
var makeUrl = function(){
_artist = _artist.split(' ').join('+');
_finalUrl = baseUrl + _artist + '&callback=JSON_CALLBACK'
return _finalUrl;
}
this.setArtist = function(artist){
_artist = artist;
}
this.getArtist = function(){
return _artist;
}
this.callItunes = function(){
makeUrl();
var deferred = $q.defer();
$http({
method: 'JSONP',
url: _finalUrl
}).success(function(data){
deferred.resolve(data);
}).error(function(){
deferred.reject('There was an error')
})
return deferred.promise;
}
});
现在就像在我们的工厂中一样，无论我们将myService传递给哪个控制器，都可以使用setArtist，getArtist和callItunes。这是myService控制器（与我们的工厂控制器几乎完全相同）。
app.controller('myServiceCtrl', function($scope, myService){
$scope.data = {};
$scope.updateArtist = function(){
myService.setArtist($scope.data.artist);
};
$scope.submitArtist = function(){
myService.callItunes()
.then(function(data){
$scope.data.artistData = data;
}, function(data){
alert(data);
})
}
});
就像我之前提到的，一旦您真正了解了“新”功能，服务就几乎与AngularJS中的工厂相同。
3）提供者
关于提供程序，要记住的最大事情是，它们是您可以传递到应用程序的app.config部分中的唯一服务。如果您需要先更改服务对象的某些部分，然后再在应用程序中的其他任何地方使用它，则此功能至关重要。尽管与服务/工厂非常相似，但是我们将讨论一些区别。
首先，我们以与服务和工厂类似的方式设置提供商。下面的变量是我们的“私有”和助手功能。
app.provider('myProvider', function(){
var baseUrl = 'https://itunes.apple.com/search?term=';
var _artist = '';
var _finalUrl = '';
//Going to set this property on the config function below.
this.thingFromConfig = ‘’;
var makeUrl = function(){
_artist = _artist.split(' ').join('+');
_finalUrl = baseUrl + _artist + '&callback=JSON_CALLBACK'
return _finalUrl;
}
}
*如果上面的代码中的任何部分令人困惑，请查看“工厂”部分，我在其中解释了它们的全部细节。
您可以将提供者分为三个部分。第一部分是“私有”变量/函数，稍后将对其进行修改/设置（如上所示）。第二部分是变量/函数，这些变量/函数将在您的app.config函数中可用，因此在它们在其他任何地方可用之前就可以更改（也如上所示）。重要的是要注意，这些变量需要附加到'this'关键字。在我们的示例中，只有'thingFromConfig'可以在app.config中进行更改。第三部分（如下所示）是当您将“ myProvider”服务传递到该特定控制器中时将在控制器中可用的所有变量/函数。
使用Provider创建服务时，控制器中唯一可用的属性/方法是从$ get（）函数返回的属性/方法。下面的代码将$ get放在“ this”上（我们知道最终该函数会返回它）。现在，该$ get函数返回我们希望在控制器中可用的所有方法/属性。这是一个代码示例。
this.$get = function($http, $q){
return {
callItunes: function(){
makeUrl();
var deferred = $q.defer();
$http({
method: 'JSONP',
url: _finalUrl
}).success(function(data){
deferred.resolve(data);
}).error(function(){
deferred.reject('There was an error')
})
return deferred.promise;
},
setArtist: function(artist){
_artist = artist;
},
getArtist: function(){
return _artist;
},
thingOnConfig: this.thingFromConfig
}
}
现在完整的提供程序代码如下所示
app.provider('myProvider', function(){
var baseUrl = 'https://itunes.apple.com/search?term=';
var _artist = '';
var _finalUrl = '';
//Going to set this property on the config function below
this.thingFromConfig = '';
var makeUrl = function(){
_artist = _artist.split(' ').join('+');
_finalUrl = baseUrl + _artist + '&callback=JSON_CALLBACK'
return _finalUrl;
}
this.$get = function($http, $q){
return {
callItunes: function(){
makeUrl();
var deferred = $q.defer();
$http({
method: 'JSONP',
url: _finalUrl
}).success(function(data){
deferred.resolve(data);
}).error(function(){
deferred.reject('There was an error')
})
return deferred.promise;
},
setArtist: function(artist){
_artist = artist;
},
getArtist: function(){
return _artist;
},
thingOnConfig: this.thingFromConfig
}
}
});
现在就像在我们的工厂和服务中一样，无论将myProvider传递给哪个控制器，都可以使用setArtist，getArtist和callItunes。这是myProvider控制器（与我们的factory / Service控制器几乎完全相同）。
app.controller('myProviderCtrl', function($scope, myProvider){
$scope.data = {};
$scope.updateArtist = function(){
myProvider.setArtist($scope.data.artist);
};
$scope.submitArtist = function(){
myProvider.callItunes()
.then(function(data){
$scope.data.artistData = data;
}, function(data){
alert(data);
})
}
$scope.data.thingFromConfig = myProvider.thingOnConfig;
});
如前所述，使用Provider创建服务的全部目的是能够在最终对象传递给应用程序的其余部分之前通过app.config函数更改某些变量。让我们来看一个例子。
app.config(function(myProviderProvider){
//Providers are the only service you can pass into app.config
myProviderProvider.thingFromConfig = 'This sentence was set in app.config. Providers are the only service that can be passed into config. Check out the code to see how it works';
});
现在，您可以看到'thingFromConfig'在我们的提供程序中如何为空字符串，但是当它显示在DOM中时，它将是'此句子已设置...'。
