Services vs. Factory vs. Provider

<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) {
      alert(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>

// Code goes here

/* Styles go here */