python ruby-programming-language Smalltalk Vue.js Knockoutjs TypeScript JavaScript, OOPs JavaScript Angular 8,7,6,5,4 and 2 Interview Questions and Answers Angular 8,7,6,5,4 and 2 Interview Questions and Answers Angular 4 Angular 2 AngularJs 1.x NodeJs Perl Programming R Programming RequireJs Rust Programming Backbonejs closure programming language go-programming-language kotlin-programming-language
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

Hi there! Welcome to my blog. My name is Anil Singh. I'm a author of this blog. For more detail about me, kindly refer to this link..
My Blogs - http://code-sample.com and http://code-sample.xyz
My Books - Interview Questions and Answers Books- Get Your Book in 15+ Digital Stores Worldwide..

You Might Also Like
www.code-sample.com/. Powered by Blogger.
ASK Questions