Differences between factory, service and provider in angularjs

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 bestring、 number、 function, 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

Differences between factory, service and provider in angularjs

Angularjs supplier ($provide)

How to define suppliers

1. constant

2. value

3. service

4. factory

5. provider

6.decorator

summary

Recommended Today

You have to know about JVM garbage collection