Services vs Factory vs Provider angular

How to inject to services, factories and providers?

Hello everyone, today I am going to share the very interesting when we play with services, factory and provider in angular.

I notice an interesting point when I playing with providers.

Here highlight the visibility of injectable. The services, factory and provider are injectable but  the injectable is different for provider than from services and factory.

I am going to a scenario, if you declare a constant(i.e. like angular.constant('baseUrl', 'http://localhost:9669/')), here you can inject into services, factories and providers.

But when you declare a value (i.e. like angular.value('user', {id: 'uid9669'})), here you can inject into services and factories but not provider. The provider creating a $get function and then you can  inject it.

live demo click on link http://embed.plnkr.co/0EANoZ/preview

For example over the injecting as given below.

AngularJs code sample

var app = angular.module('userApp', []);

        app.constant('baseUrl', 'http://localhost:9669/');

        app.value('user', {
            Id: 'uid9669',
            fname: 'anil',
            lname: 'singh'
        });

        //This is services.
        app.service('userService', function (baseUrl) {
            this.url = 'Hi, this is base url of you app, ' + ' ' + baseUrl;
        });

        //This is provider.
        app.provider('userProvider', function (id, fname, lname) {
            this.Id = id;
            this.$get = function (b) {
                this.name = this.fname + ' ' + this.lname;
                return this;
            };
        });

        //This is contorller and call to services and provider both.
        app.controller("userCtrl", function ($scope, userService, userProvider) {
            $scope.MyBaseURL = userService.url;
            $scope.userName = userProvider.name;

        });

Full Angular +HTML code as given below

<html>
<head>
    <title>Services vs. Factory vs. Provider</title>
    <script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.3.14/angular.min.js"></script>
    <script>
        var app = angular.module('userApp', []);

        app.constant('baseUrl', 'http://localhost:9669/');
        app.value('user', {
            Id: 'uid9669',
            fname: 'anil',
            lname: 'singh'
        });

        //This is services.
        app.service('userService', function (baseUrl) {
            this.url = 'Hi, this is base url of you app, ' + ' ' + baseUrl;
        });

        //This is provider.
        app.provider('userProvider', function (id, fname, lname) {
            this.Id = id;
            this.$get = function (b) {
                this.name = this.fname + ' ' + this.lname;
                return this;
            };
        });

        //This is contorller and call to services and provider both.
        app.controller("userCtrl", function ($scope, userService, userProvider) {
            $scope.MyBaseURL = userService.url;
            $scope.userName = userProvider.name;

        });
    </script>
</head>
<body ng-app="userApp">
    <div ng-controller="userCtrl">
        <p>My App BaseURL is : {{MyBaseURL}}</p>
        <p>My Provider is: {{userName}}</p>
    </div>
</body>
</html>

The output  go to link  http://embed.plnkr.co/0EANoZ/preview

Thank you!





ANIL SINGH

Anil Singh is an author, tech blogger, and software programmer. Book writing, tech blogging is something do extra and Anil love doing it. For more detail, kindly refer to this link..
My Blogs - https://code-sample.com and https://code-sample.xyz
My Book1 - BEST SELLING ANGULAR BOOK (INCLUDING ALL VERSIONS 2, 4, 5, 6, 7)
My Book2 - ANGULAR 2 INTERVIEW QUESTIONS BOOK - Both Books are Available on WorldWide.

www.code-sample.com/. Powered by Blogger.