JSFiddle - React, Tailwind, and code Playground

by Khajan Singh

HTML

<div ng-app="testApp">
  <label>Load dependencies in another module</label>
  <div ng-controller="testCtrl as ctrl">
    {{ctrl.lebel}}
  </div>
</div>

JavaScript

var controllers = angular.module('testApp.controllers', [
	'testApp.services'
]);

controllers.controller('testCtrl', function($scope, $compile, $rootScope, testService) {
this.label = "Test Controll Lebel";
testService.initService();
  // register a new module, add an element with a newCtrl and compile it
  this.registerNewModuleAndCompile = function() {

  };

});

var services = angular.module('testApp.services', [])

services.factory('testService', function($injector){
	return {
  	initService: function(){
    	this.constants = $injector.get('testConstants');
      this.factory = $injector.get('testFactory');
      console.log(this.constants, this.factory);
      this.factory.initDependencies();
    }
  }
});

var factories = angular.module('testApp.factories', [])

factories.factory('testFactory', function($injector){
	return {
  	initDependencies: function(){
    	this.constants = $injector.get('testConstants');
      this.service = $injector.get('testService');
      console.log(this.constants, ' = ', this.service);
    }
  }
});

var app = angular.module('testApp', [
	'testApp.controllers',
  'testApp.factories'
]);
app.constant('testConstants', {
	MODE: 1
});