cssAudio - Activefile-genericCSS - ActiveGeneric - ActiveHTML - ActiveImage - ActiveJS - ActiveSVG - ActiveText - Activefile-genericVideo - ActiveLovehtmlicon-new-collectionicon-personicon-teamlog-outoctocatpop-outspinnerstartv

Pen Settings

CSS Base

Vendor Prefixing

Add External Stylesheets/Pens

Any URL's added here will be added as <link>s in order, and before the CSS in the editor. If you link to another Pen, it will include the CSS from that Pen. If the preprocessor matches, it will attempt to combine them before processing.

Quick-add: + add another resource

Add External Scripts/Pens

Any URL's added here will be added as <script>s in order, and run before the JavaScript in the editor. You can use the URL of any other Pen and it will include the JavaScript from that Pen.

Quick-add: + add another resource

Code Indentation

     

Save Automatically?

If active, Pens will autosave every 30 seconds after being saved once.

Auto-Updating Preview

If enabled, the preview panel updates automatically as you code. If disabled, use the "Run" button to update.

            
              <body ng-app="ngLog4sureDemo" ng-controller="demoViewController" class="container-fluid">

  <h4 class="text-center"> This is a demo for <a href="https://github.com/bsurela/ng-log4sure" target="_blank">ng-log4sure</a>, a angular module to <a  target="_blank" href=
"https://log4sure.com">log4sure.com</a>:- Javascript logging and mintoring solution </h4>
  <h4>Go to <a target="_blank" href="https://log4sure.com/Home/LiveLogs/8113b5d1-1ef6-4cbe-903f-70d11d442d96">log4sure.com </a> and open it side by side while playing with this pen to see live results  </h4>
    
  <div class="panel container-fluid">
    
    <div class="panel-heading">
      <h2>Demo buttons triggering logs</h2>
    </div>
    <div class="panel-body row container-fluid text-left">
      <div class="col-xs-12 col-sm-12 col-md-6 col-lg-6">
        <div class="btn btn-default" ng-click="logClick()">Click me</div>
        <div class="btn btn-default" ng-click="logError()">Throw Error</div>
        <div class="btn btn-default" ng-click="showForm = !showForm">Show custom Log</div>
     
        <hr>
        <div> <b>{{counter.trigger.text}}</b> Text logs fired</div>
        <div> <b>{{counter.trigger.error}}</b> Error logs fired</div>
        <div> <b>{{counter.trigger.custom}}</b> Custom logs fired</div>
        
      </div>

      <div class="col-xs-12 col-sm-12 col-md-6 col-lg-6">
        <form ng-if="showForm">
          <div class="form-group">
            <label for="firstName">First Name</label>
            <input type="text" ng-model="details.firstName" class="form-control" id="firstName" placeholder="First Name">
          </div>
          <div class="form-group">
            <label for="lastName">Last Name</label>
            <input type="text" ng-model="details.lastName" class="form-control" id="lastName" placeholder="Last Name">
          </div>
          <div class="form-group">
            <label for="email">Email</label>
            <input type="email" ng-model="details.email" class="form-control" id="email" placeholder="Email">
          </div>
          <div class="checkbox">
            <label>
              <input type="checkbox" id="loveLog4sure" ng-model="details.loveLog4sure"> Love Log4sure?
            </label>
          </div>
          <button type="submit" class="btn btn-primary" ng-click="log()">Submit</button>
          <div class="text-success" ng-show="details.success">Submitted!</div>
          <hr>
        </form>
        
      </div>

    </div>
  </div>  
   <div class="panel container-fluid">
     <div class="panel-heading">
       <h2>Demo directive l4s-track</h2>
     </div>
     <div class="panel-body">
       <div class="btn btn-default" l4s-track="click" id="btn-click-me">Click me</div>
       <div class="btn btn-default" l4s-track="dblclick" id="btn-dbl-click-me">Double Click me</div>
       <div class="btn btn-default" l4s-track="mouseenter" id="btn-hover-me">Hover me</div>
       <select l4s-track="change" class="form-control custom-dropdown" id="dropdown-options">
         <option> This is awesome </option>
         <option> This is good </option>
         <option> This is okay </option>
         <option> This is bad </option>
       </select>
     </div>
    </div>
  
  
</body>
            
          
!
            
              .custom-dropdown{
  width:200px !important;
  display:inline-block;
}
            
          
!
            
              /**
 * Created by bsurela on 5/27/16.
 */
/**
 * Created by bsurela on 5/13/15.
 */
(function () {
	'use strict';

	angular.module('ng-log4sure', []).service('$l4s',[function () {
		var $l4s = {connectedToServer: false};
		var server = null;

		$l4s.init = function (options) {
			if (!options || !options.token) {
				console.error('log4sure : token is required for init');
			} else {
				try {
					server = new LogServer(options.token);
					$l4s.connectedToServer = true;
				} catch (e) {
					console.error('log4sure : log4sure not found, this error usually occurs if you have not included log4sure.min.js in your application');
				}
			}
		};
		$l4s.logText = function (logMessage) {
			if (server != null) {
				server.logText(logMessage)
			}
		};
		$l4s.logError = function (name, message, stack) {
			if (server != null) {
				server.logError(name, message, stack);
			}
		};
		$l4s.log = function (value1, value2, value3, value4, value5, value6, value7, value8, value9, value10) {
			if (server != null) {
				server.log(value1, value2, value3, value4, value5, value6, value7, value8, value9, value10);
			}
		};
		return $l4s;
	}]);

	angular.module('ng-log4sure').directive('l4sTrack', [function ($l4s) {
		return {
			restrict: 'A',
			link: function (scope, element, attrs) {
				var event = attrs['l4sTrack'];
				element.bind(event, function () {
					var elemId = this.id;
					var identifier;
					if (!elemId) {
						var name = this.name;
						identifier = name;
					} else {
						identifier = elemId;
					}
					$l4s.logText(identifier + ' fired an event ' + event);
				});
			}
		}
	}]);

})();

// basic wire framing
// include ng-log4sure in your modules
angular.module('ngLog4sureDemo', []);
angular.module('ngLog4sureDemo', [
  'ng-log4sure'
]).run(function($l4s) {
  // initialize with the token of the library created at log4sure.com
  $l4s.init({
    token: '8113b5d1-1ef6-4cbe-903f-70d11d442d96'
  });
});

angular.module('ngLog4sureDemo').controller('demoViewController', function($scope, $l4s) {
  var details = $scope.details = {
    firstName: '',
    lastName: '',
    email: '',
    loveLog4sure: ''
  };
  var counter = $scope.counter = {
    trigger: {
      text: 0,
      error: 0,
      custom: 0
    }
  }
  $scope.showForm = false;
  $scope.logClick = function() {
    $l4s.logText('click button was clicked');
    counter.trigger.text++;
  };
  $scope.logError = function() {
    try {
      // create and log an error.
      var x = 100 / y;
    } catch (e) {
      $l4s.logError(e.name, e.message, e.stack, null);
      counter.trigger.error++;
    }

  };
  $scope.log = function() {
    $l4s.log(details.firstName, details.lastName, details.email, details.loveLog4sure);
    counter.trigger.custom++;
    reset();
  };

  var reset = function() {
    details = $scope.details = {
      firstName: '',
      lastName: '',
      email: '',
      loveLog4sure: ''
    };

  }

});
            
          
!
999px
Loading ..................

Console