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

Hey! I'm Anil Singh. I author this blog. I'm Active Blogger, Programmer. I love learning new technologies, programming, blogging and participating the forum discussions more...
My Blogs - http://www.code-sample.com and http://www.code-sample.xyz
My Books - Buy Books Online at Best Prices

You Might Also Like
Post a Comment
www.code-sample.com/. Powered by Blogger.