JSFiddle - React, Tailwind, and code Playground

by Carlos Cariello

HTML

<div ng-app="app" ng-controller="MainController as ctrl">
    {{ctrl.username}}
</div>

JavaScript

angular.module("app", ["dataservice"])
	.controller("MainController", MainController)
  ;

angular.$inject = ["EmulatedHttpService"];
function MainController(EmulatedHttpService){
	var ctrl = this;
  
  function init(){
  	ctrl.username = "john";
  	EmulatedHttpService.getUserName()
    	.then(function(response){
      		ctrl.username = response.data;
      })
      .catch(function(){
      
      });
  }
  
  
  init();
};


angular.module("dataservice", [])
			 .service("EmulatedHttpService", ["$q", function($q) {

                var deferredData = function() {
                    var response = $q.defer();

                    setTimeout(function() {

                        var data = "Johnny Crazy";

                        response.resolve({
                            statusCode: 200,
                            statusText: "mock response",
                            data: data
                        });

                    }, 200);

                    return response.promise;
                };

                return {
                		getUserName : deferredData
								};
            }]);