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）当您使用Service时，Angular 使用'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;
}
});
非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返回，诺言就会实现。如果您在Angular中没有太多使用诺言的经验，我强烈建议您对它们进行深入研究。
在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”服务。然后，在$ scope对象上设置来自“ myFactory”数据的属性。上面唯一棘手的代码是，如果您以前从未处理过诺言。由于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 line below this creates an obj object 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中的实际作用后，在Angular中创建Service应该更容易理解。
创建服务时要了解的最大事情是知道服务已使用'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);
})
}
});
就像我之前提到的，一旦您真正了解了“新”功能，服务就几乎与Angular中的工厂相同。
