Differences between factory, service and provider in angularjs

Time:2020-4-2

Angularjs supplier ($provide)


$provideService responsible for informingAngularJSHow to create a new injectable thing: a service.

Services are defined by something called a provider, and can be used$provideTo create a supplier.

How to create a supplier:

  • Use$provideMediumprovider()Method to define a supplier;

  • By request$provideInjected into an applicationconfigFunction to get$provideService;

Differences between factory, service and provider in angularjs

How to define suppliers


  • constant

  • value

  • service

  • factory

  • provider

  • decorator

1. constant

Defining a constant. The value defined by it cannot be changed. It can be injected anywhere, but it cannot be decorated(decoratorDecoration.

DEMO:

HTML Code:

<!DOCTYPE html>
<html lang="en">

<head>
    <title>demo</title>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
</head>

<body>
    <div ng-app="myApp">
        <div ng-controller="myController">

        </div>
    </div>
    <script>
    </script>
    <script></script>
</body>

</html>

JS Code:

var myApp = angular.module('myApp', [])
myApp.config(function($provide) {
    $provide. Constant ('movietitle ',' Kung Fu Yoga ')
})
myApp.controller('myController', function(movieTitle) {
    console.log('movieTitle: ', movieTitle);
})

Grammatical sugar:

Myapp. Constant ('movietitle ',' Kung Fu Yoga ')

2. value

It can bestringnumberfunction, it andconstantThe difference is that it can be modified and cannot be injected intoconfigBut it can bedecoratorDecoration.

HTML Code:

<!DOCTYPE html>
<html lang="en">

<head>
    <title>demo</title>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
</head>

<body>
    <div ng-app="myApp">
        <div ng-controller="myController">

        </div>
    </div>
    <script>
    </script>
    <script></script>
</body>

</html>

JS Code:

var myApp = angular.module('myApp', [])

myApp.config(function($provide) {
    $provide. Value ('movietitle ',' Kung Fu Yoga ')
})

myApp.controller('myController', function(movieTitle) {
    console.log('movieTitle: ', movieTitle);
})

Grammatical sugar:

Myapp. Value ('movietitle ',' Kung Fu Yoga ')

3. service

It’s an injectable constructor, andAngularJSIt’s singleton. Use it toControllerChina Communications or data sharing is suitable

var myApp = angular.module('myApp', [])

myApp.config(function($provide) {
    $provide.service('movie', function() {
        This. Title = Kung Fu Yoga
    })
})

myApp.controller('myController', function(movie) {
    console.log('movieTitle: ', movie.title);
})

Grammatical sugar:

myApp.service('movie', function () {
    This. Title = Kung Fu Yoga
})

Be careful:

stayserviceThere’s no need to return anything inside, becauseAngularJSWould callnewKeyword to create an object. But returning a custom object doesn’t seem to be wrong.

4. factory

It’s an injectablefunction, it andserviceThe difference is:factoryIt’s ordinary.functionAndserviceIt’s a constructor(constructor) soAngularJSIn callserviceUse timenewKeywords, while callingfactoryCall normalfunctionSofactoryCan return anything, andserviceCan not return (check the function of new keyword)

var myApp = angular.module('myApp', [])

myApp.config(function($provide) {
    $provide.factory('movie', function() {
        return {
            Title: 'Kung Fu Yoga'
        }
    })
})

myApp.controller('myController', function(movie) {
    console.log('movieTitle: ', movie.title);
})

Grammatical sugar:

$provide.factory('movie', function() {
    return {
        Title: 'Kung Fu Yoga'
    }
})

Be careful:

factoryIt can return anything. It’s actually a$getMethodprovider

5. provider

providerIt’s their boss. The top one is almost (exceptconstantBoth areproviderEncapsulation,providerThere must be one$getMethod, of courseproviderIs a configurablefactory

JS Code:

var myApp = angular.module('myApp', [])

myApp.provider('movie', function() {
    var version
    return {
        setVersion: function(value) {
            version = value
        },
        $get: function() {
            return {
                Title: 'Kung Fu Yoga' + version
            }
        }
    }
})

myApp.config(function(movieProvider) {
    Movieprovider. Setversion ('playing hot ')
})

myApp.controller('myController', function(movie) {
    console.log('movieTitle: ', movie.title);
})

Be careful:

  • HereconfigMethod injectionmovieProvider, configOnly suppliers can be injected into the method (two exceptions are$provideand$injector)In the name of humpmovieProvider, AngularJSIt will automatically inject you into its suppliers.

  • movieIt’s a supplier

6.decorator

decoratorNoprovider, it is used to decorate otherproviderYes, it can’t be decoratedconstant(becauseconstantNot throughprovider()Method).

JS Code:

var myApp = angular.module('myApp', [])

//Myapp. Value ('movietitle ',' Kung Fu Yoga 6 ')
myApp.config(function($provide) {
    $provide. Value ('movietitle ',' Kung Fu Yoga 7 ')

    $provide.decorator('movieTitle', function($delegate) {
        Return $delegate + '- Test'
    })
})

myApp.controller('myController', function(movieTitle) {
    console.log('movieTitle: ', movieTitle);
})

summary


  • All suppliers are instantiated only once, that is, they are all singleton

  • exceptconstant, all suppliers can be decorated(decoratorDecoration

  • valueIt’s a simple injectable value

  • serviceIt’s an injectable constructor

  • factoryIs an injectable method

  • decoratorOther suppliers can be modified or encapsulated (exceptconstant)

  • providerIs a configurablefactory

Recommended Today

You have to know about JVM garbage collection

catalogue 1、 Four citation methods1.1 strong reference1.2 soft reference1.3 weak reference1.4 phantom reference 2、 How to judge whether the object is garbage2.1 reference counting method2.2 root accessibility analysis 3、 Garbage collection algorithm3.1 mark sweep3.2 mark compact3.3 mark copy 4、 Garbage collector4.1 classification and characteristics4.1.1 serial4.1.2 throughput priority4.1.3 priority of response time4.2 serial garbage collector details […]