javascript - what is difference between factory, service and provider? -

javascript - what is difference between factory, service and provider? -

first of want clear new angularjs. might find question duplicate angular.js: service vs provider vs factory? trying understand thing me confused. changing value in 1 controller affected in other controller well.

as per reply question service object created angular self still shared between controller.

angular js

var myapp = angular.module('demo', []); // mill implementation myapp.factory('myfactory', function () { var service = {}; service.testdata = 'this default info factory'; homecoming service; }); // service implementation myapp.service('myservice', function () { this.testdata = 'this 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 new info factory'; $scope.servicedata.testdata = 'new service data'; $scope.providerdata.thingonconfig = 'new thing first controller'; } }); // sec 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 provider'; this.$get = function () { var = this; homecoming { thingonconfig: that.testdata } } }); myapp.config(function (myproviderprovider) { myproviderprovider.testdata = 'this new 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 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 3 diffrent terminolology identical thing? if there vital difference that?

the fiddle demonstrates expected behaviour. don't understand confuses you.

regarding question: "why there diffrent terminolology 3 identical things ?"

if used exact same name 3 identical things, how distinguish between them ? reasonable utilize differnt names different things (even if similar).

i suppose real question not "why different terminology", "why have 3 different functions (factory, service, provider) same purpose (declaring angular service)".

you might dissapointed larn there not 3 5 ways declare angular service: constant , value 2 missing functions.

in fact there 1 concept, angular service, , 1 way declare one: provider.

anything achieved other 4 functions (constant, factory, service, value) can achieved provider, more code. provider flexible (allowing configurability), verbose. thus, other 4 functions shortcuts commonly used types of angular services.

btw, quite explained in the docs:

factory [...] short registering service provider consists of $get property, given service mill function.

service [...] short registering service provider's $get property service constructor function used instantiate service instance.

etc

javascript angularjs