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

<h4>$log.log Example</h4>
<div ng-controller="HelloController">
    <button ng-click="logMessage()">"log" Test</button>
</div>

Controller

var app = angular.module("app", []);
app.controller("HelloController", function($scope, $log)
{
    $scope.message = "$log service test!";
    $scope.logMessage = function()
    {
        $log.log($scope.message)
    }
});

Output



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

Example

HTML

<h4>$log.info Example</h4>
<div ng-controller="HelloController">
    <button ng-click="infoMessage()">"info" Test</button>
</div>

Controller

var app = angular.module("app", []);
app.controller("HelloController", function($scope, $log)
{
    $scope.message = "$log service test!";
    $scope.infoMessage = function()
    {
        $log.info($scope.message)
    }
});

Output



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

Example

HTML

<h4>$log.warn Example</h4>
<div ng-controller="HelloController">
    <button ng-click="warnMessage()">"warn" Test</button>
</div>

Controller

var app = angular.module("app", []);
app.controller("HelloController", function($scope, $log)
{
    $scope.message = "$log service test!";
    $scope.warnMessage = function()
    {
        $log.warn($scope.message)
    }
});

Output



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

Example

HTML

<h4>$log.error Example</h4>
<div ng-controller="HelloController">
    <button ng-click="errorMessage()">"error" Test</button>
</div>

Controller

var app = angular.module("app", []);
app.controller("HelloController", function($scope, $log)
{
    $scope.message = "$log service test!";
    $scope.errorMessage = function()
    {
        $log.error($scope.message)
    }
});

Output



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

Example

HTML

<h4>$log.debug Example</h4>
<div ng-controller="HelloController">
    <button ng-click="debugMessage()">"debug" Test</button>
</div>

Controller

var app = angular.module("app", []);
app.controller("HelloController", function($scope, $log)
{
    $scope.message = "$log service test!";
    $scope.debugMessage = function()
    {
        $log.debug($scope.message)
    }
});

Output



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