anuglarjs old style

by Jimmy Chandra

HTML

<script src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.8.3/angular.min.js"></script>
<div id="app" ng-controller="MainCtrl as vm">
  <input type="text" ng-model="vm.Name" placeholder="Enter a name..." />
  <button type="button" ng-click="vm.DoSomething()">Do Something</button>
</div>

JavaScript

(function() {
	'use strict';
  
  dashboardService.$inject = ['$log', '$q'];
  function dashboardService($log, $q) {
  	return {
    	tryDoSomething: tryDoSomething
    };
    
    function tryDoSomething(name) {
    	$log.info('Trying to do something...');
      
      var isSuccessful = Math.floor(Math.random() * 10) > 2;
      
      return isSuccessful
      	? $q.resolve({ id: 1, name: name })
        : $q.reject('Unable to do stuff');
    }
  }

  mainCtrl.$inject= ['$log', '$q', 'DashboardService']
  function mainCtrl($log, $q, dashboardService)
  {
  	var self = this;
    self.Name = "";
    self.DoSomething = _doSomething;
    
    function _doSomething() {
    	dashboardService
      	.tryDoSomething(self.Name.toUpperCase())
        .then(augmentData)
        .then(handleSuccess)
        .catch(handleFailure);
    }
    
    function augmentData(input) {
    	return `${input.name} Bar`;
    }
    
    function handleSuccess(r) {
    	$log.info(`Success! Augmented Name is ${r}`);
    }
    
    function handleFailure(e) {
    	$log.info(`Failed! Reason: ${e}`);
    }
  }

  angular
  	.module('app', [])
  	.factory('DashboardService', dashboardService)
  	.controller('MainCtrl', mainCtrl);

	angular
  	.element(document)
    .ready(function() {
  		angular.bootstrap(document.getElementById('app'), ['app']);
  });
}());