First of all I want to clear that I am new to AngularJS. You might find that my question is duplicate with AngularJS: Service vs provider vs factory but as I am trying to understand the thing It get me confused. As I am changing value in one controller get affected in other controller as well.
As per answer to that question service is object created by angular it self but still it get shared between all controller.
Angular JS
var myApp = angular.module('demo', []);
// Factory Implementation
myApp.factory('myFactory', function () {
var service = {};
service.TestData = 'This is default data from factory';
return service;
});
// Service Implementation
myApp.service('myService', function () {
this.TestData = 'This is service';
});
// First Controller
myApp.controller('myFirstController', function ($scope, myFactory, myService,myProvider) {
$scope.ProviderData = myProvider;
$scope.MyData = myFactory;
$scope.ServiceData = myService;
$scope.testFun = function () {
$scope.MyData.TestData = 'This is new data from factory';
$scope.ServiceData.TestData = 'New Service data';
$scope.ProviderData.thingOnConfig = 'New thing from first controller';
}
});
// Second Controller
myApp.controller('mySecondController', function ($scope, myFactory, myService,myProvider) {
$scope.ProviderData = myProvider;
$scope.MyData = myFactory;
$scope.ServiceData = myService;
});
myApp.provider('myProvider', function () {
this.TestData = 'This is from provider';
this.$get = function () {
var that = this;
return {
thingOnConfig: that.TestData
}
}
});
myApp.config(function (myProviderProvider) {
myProviderProvider.TestData = 'This is new from config of provider';
});
HTML
<div class="row" ng-app="demo" ng-cloak>
<div class="row" ng-controller="myFirstController">
<div class="row">
{{MyData.TestData}}
<br />
{{ServiceData.TestData}}
<br />
{{ProviderData.thingOnConfig}}
</div>
<div class="row">
<input type="button" value='click here for update' ng-click="testFun()" />
</div>
</div>
<div class="row" ng-controller="mySecondController">
<div class="row">
{{MyData.TestData}}
<br />
{{ServiceData.TestData}}
<br />
{{ProviderData.thingOnConfig}}
</div>
</div>
</div>
Fiddle Link: http://jsfiddle.net/8Cg2s/
Why there is three diffrent terminolology for all most identical thing? If there is any vital difference then what is that?
