show-angularjs-component-border.js

/*
Function to show component border together with component name. It is useful for AngularJS component-based application design.
*/

(function () {
  'use strict';

  var app = angular.module('app');

  app.run(function () {
    if (app._invokeQueue) {
      app._invokeQueue.forEach(function (item) {
        if (item[1] == 'component') {
          var componentName = item[2][0];
          var componentProperties = item[2][1];
          if (componentProperties.templateUrl) {
            var templateUrl = componentProperties.templateUrl;
            delete componentProperties.templateUrl;
            componentProperties.template = '<div style="border-style: 1px solid #a9a9a9;border-radius: 4px;padding: 10px;margin: 10px;"><b>' + componentName + '</b><div ng-include"\'' + templateUrl + '\'"></div></div>';
          }
          else {
            var template = '<div style="border-style: 1px solid #a9a9a9;border-radius: 4px;padding: 10px;margin: 10px;">' + componentName + '<div>' + componentProperties.template + '</div></div>';
            componentProperties.template = template;
          }
        }
      });
    }
  });
})();

I should move it to JSFiddle to visualize the result.