Factory Foolishness

by mihaibirsan

HTML

<script src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.5.11/angular.min.js"></script>
<div ng-app="app">
  <div ng-controller="Preview as vm">
    <p>{{vm.klass.say("message")}}</p>
    <p>{{vm.otherKlass.say("message")}}</p>
    <p>{{vm.survaceMessage}}</p>
  </div>
  <div ng-controller="Nasty as vm">
    <p>{{vm.otherKlass.say("message")}}</p>
    <p>{{vm.survaceMessage}}</p>
  </div>
</div>

JavaScript

const app = angular.module('app', []);

app.factory('Klass', ['$q', function KlassFactory($q) {
	console.log('Klass defined only once!');
  
	class Klass {
  	constructor(foo, bar) {
    	this.foo = foo;
      this.bar = bar;
    }
    
    say(message) {
    	return [ message, this.foo, this.bar ].join(', ');
    }
  }
  
  return Klass;
}]);

app.factory('OtherKlass', ['Klass', function OtherKlassFactory(Klass) {
	console.log('OtherKlass defined only once!');
  
  class OtherKlass extends Klass {
  	constructor(foo) {
    	super(foo, "other");
    }
    
    say(message) {
    	return OtherKlass.symbol + super.say(message) + OtherKlass.symbol;
    }
  }
  
  OtherKlass.symbol = '*';
  
  return OtherKlass;
}]);

class Survace {
	constructor($q, foo) {
  	Survace.instanceCount += 1;
  	this.message = `Instance #${Survace.instanceCount} with ${foo}`;
  }
  
  getMessage() {
  	return this.message;
  }
}

Survace.$inject = [ '$q' ];
Survace.instanceCount = 0;

app.service('Survace', Survace);

app.controller('Preview', function (Klass, OtherKlass, Survace) {
  const vm = this;
	vm.klass = new Klass("foo", "bar");
  vm.otherKlass = new OtherKlass("foo");
  vm.survaceMessage = Survace.getMessage();
});

app.controller('Nasty', function (OtherKlass, Survace) {
  const vm = this;
  OtherKlass.symbol = '•';
  vm.otherKlass = new OtherKlass("xxx");
  vm.survaceMessage = Survace.getMessage();
});