Angular: Service vs Factory
http://angularjs.org/
HTML
<link rel="stylesheet" href="//netdna.bootstrapcdn.com/bootstrap/3.0.3/css/bootstrap.min.css">
<script src="http://code.angularjs.org/1.2.6/angular.min.js"></script>
<div ng-controller="DemoFactoryCtrl" class="jumbotron">
<h2>Factory</h2>
<button class="btn btn-primary" ng-click="setUsers()">Get Info</button>
<div>User1 Info: {{user1}}</div>
<div>User2 Info: {{user2}}</div>
</div>
<div ng-controller="DemoServiceCtrl" class="jumbotron">
<h2>Service</h2>
<button class="btn btn-primary" ng-click="setUsers()">Get Info</button>
<div>User1 Info: {{user1}}</div>
<div>User2 Info: {{user2}}</div>
</div>
JavaScript
var myApp = angular.module('myApp', []);
/**
* UserService (using .service)
*/
myApp.service('UserService', function(){
this.user1 = 'Andrey1',
this.user2 = 'Andrey2'
});
/**
* UserService (using .factory)
*/
myApp.provider('UserFactory', function() {
return {
$get: function(){
return {
user1: 'Andrey1',
user2: 'Andrey2'
}
}
}
});
/**
* Demo service Controller
*/
function DemoServiceCtrl($scope, UserFactory) {
$scope.setUsers = function() {
console.dir(myApp)
$scope.user1 = UserFactory.user1;
$scope.user2 = UserFactory.user2;
}
}
/**
* Demo Factory Controller
*/
function DemoFactoryCtrl($scope, UserFactory) {
$scope.setUsers = function() {
$scope.user1 = UserFactory.user1 = 'dswdw';
$scope.user2 = UserFactory.user2 = 'dwdwd';
}
}