Understanding Log Service In AngularJS

Introduction

AngularJS provide built-in simple logging service. It default implementation to write log/ error/ warning / information in to the browser console. Mainly this service is used to debug and troubleshoot the code error. By default, it is log "debug" messages.

This service has the following method,

  • log

This method is used to write a log message in browser console.

Example

HTML

  1. <h4>$log.log Example</h4>  
  2. <div ng-controller="HelloController">  
  3.     <button ng-click="logMessage()">"log" Test</button>  
  4. </div>  
Controller
  1. var app = angular.module("app", []);  
  2. app.controller("HelloController", function($scope, $log)  
  3. {  
  4.     $scope.message = "$log service test!";  
  5.     $scope.logMessage = function()  
  6.     {  
  7.         $log.log($scope.message)  
  8.     }  
  9. });  
Output

output

info:
This method is used to write an information message in browser console.

Example

HTML
  1. <h4>$log.info Example</h4>  
  2. <div ng-controller="HelloController">  
  3.     <button ng-click="infoMessage()">"info" Test</button>  
  4. </div>  
Controller
  1. var app = angular.module("app", []);  
  2. app.controller("HelloController", function($scope, $log)  
  3. {  
  4.     $scope.message = "$log service test!";  
  5.     $scope.infoMessage = function()  
  6.     {  
  7.         $log.info($scope.message)  
  8.     }  
  9. });  
Output

Output

warn: This method is used to write a warning message in browser console.

Example

HTML
  1. <h4>$log.warn Example</h4>  
  2. <div ng-controller="HelloController">  
  3.     <button ng-click="warnMessage()">"warn" Test</button>  
  4. </div>  
Controller
  1. var app = angular.module("app", []);  
  2. app.controller("HelloController", function($scope, $log)  
  3. {  
  4.     $scope.message = "$log service test!";  
  5.     $scope.warnMessage = function()  
  6.     {  
  7.         $log.warn($scope.message)  
  8.     }  
  9. });  
Output

output

Error: This method is used to write an error message in browser console.

Example

HTML
  1. <h4>$log.error Example</h4>  
  2. <div ng-controller="HelloController">  
  3.     <button ng-click="errorMessage()">"error" Test</button>  
  4. </div>  
Controller
  1. var app = angular.module("app", []);  
  2. app.controller("HelloController", function($scope, $log)  
  3. {  
  4.     $scope.message = "$log service test!";  
  5.     $scope.errorMessage = function()  
  6.     {  
  7.         $log.error($scope.message)  
  8.     }  
  9. });  
Output

output

debug: This method is used to write a debug message in browser console.

Example

HTML
  1. <h4>$log.debug Example</h4>  
  2. <div ng-controller="HelloController">  
  3.     <button ng-click="debugMessage()">"debug" Test</button>  
  4. </div>  
Controller
  1. var app = angular.module("app", []);  
  2. app.controller("HelloController", function($scope, $log)  
  3. {  
  4.     $scope.message = "$log service test!";  
  5.     $scope.debugMessage = function()  
  6.     {  
  7.         $log.debug($scope.message)  
  8.     }  
  9. });  
Output

output

Summary: This article will help you to understand log service in AngularJS.

Up Next
    Ebook Download
    View all
    Learn
    View all