AngularJS : defer reusable Controller logics to a AngularJS Service

Reusable logics can be grouped for easy reuse to a Service instance. Don’t try to make a controller re-useable, but move the reusable logics to services and factories.

by Daan De Smedt

HTML

<div ng-app="app" ng-controller="BasicController as vm">
  Hello, {{vm.name}}!
  <br/><br/>
  <button ng-click='vm.rename()'>Rename</button>
</div>

JavaScript

angular
    .module('app', [])
    .service('NameService', NameService)
    .controller('BasicController', BasicController)

function BasicController(NameService) { 
	/* declare VM */
  var vm = this;
  vm.name = "John Doe";
  vm.rename = rename;
  /* functions */
  function rename(){
  	vm.name = NameService.renameRandom(5);
  }
}

function NameService(){
	this.renameRandom = renameRandom;
    
  function renameRandom(length){
    var text = "";
    var possible = "ABCDEFGHIJKLMNOPQRSTUVWXYZabcdefghijklmnopqrstuvwxyz0123456789";
    for(var i = 0; i < length; i++) {
        text += possible.charAt(Math.floor(Math.random() * possible.length));
    }
    return text;
  };  
  
}