Angular.js $log Service

Last Updated : 19 May, 2021

The $log service in Angular.js is simply used for logging purposes on the browser console. It is used for the debugging and troubleshooting of the error in the code. It has various implementations like a log, warn, info, error, and debugging, and all the names suggest. It is used for logging, warning, information, error display, and debugging message purpose respectively. Now let us see the actual implementation of the $log service in Angular JS. Used Methods: 1. log() Method: This method is used to write the log message on console.

HTML

<!DOCTYPE html>
<html>

<head>
    <title>$log service in Angular JS</title>
    <script src=
"https://ajax.googleapis.com/ajax/libs/angularjs/1.6.9/angular.min.js">
    </script>
</head>

<!-- Creating an Angular app  -->

<body ng-app="LogService">

    <!-- Now Making a heading -->
    <h2>
        Click The button to see
        the output on the console
    </h2>

    <!-- Making a div with a ng-controller -->
    <div ng-controller="LogServiceController">

        <!-- Making a button to display the output -->
        <button ng-click="showOutput()">
            Show Output
        </button>
    </div>

    <!-- Angular JS code -->
    <script>

        // Defining the app for Angular JS
        var app = angular.module('LogService', []);

        // Defining the controller
        app.controller('LogServiceController',
            ['$scope', '$log', function ($scope, $log) {

                // Defining the error message to be
                // shown on console
                $scope.message = "You just clicked the Button";

                // Defining the onclick function
                $scope.showOutput = function () {

                    //$log service
                    $log.log($scope.message +
                        "  :: And this is the output");
                }
            }]);
    </script>
</body>

</html>

Output:

2. warn() Method: This method is used to display the warning message on console screen.

HTML

<!DOCTYPE html>
<html>

<head>
    <title>$log service in Angular JS</title>
    <script src=
"https://ajax.googleapis.com/ajax/libs/angularjs/1.6.9/angular.min.js">
    </script>
</head>

<!-- Creating an Angular app -->
<body ng-app="LogService">

    <!-- Now Making a heading -->
    <h2>
        Click The button to see the output
        as warning on the console
    </h2>

    <!-- Making a div with a ng-controller -->
    <div ng-controller="LogServiceController">

        <!-- Making a button to display the output -->
        <button ng-click="showOutput()">
            Show Output
        </button>
    </div>


    <!-- Angular JS code -->
    <script>

        // Defining the app for Angular JS
        var app = angular.module('LogService', []);

        // Defining the controller
        app.controller('LogServiceController',
            ['$scope', '$log', function ($scope, $log) {

                // Defining the error message to be
                // shown on console
                $scope.message = "You just clicked the Button";

                // Defining the onclick function
                $scope.showOutput = function () {

                    //$log service
                    $log.warn($scope.message
                        + "  :: And this is the warning");
                }
            }]);
    </script>
</body>

</html>

Output:

3. info() Method: This method is used to display the information message on the console screen.

HTML

<!DOCTYPE html>
<html>

<head>
    <title>$log service in Angular JS</title>
    <script src=
"https://ajax.googleapis.com/ajax/libs/angularjs/1.6.9/angular.min.js">
    </script>
</head>

<!-- Creating an Angular app  -->
<body ng-app="LogService">

    <!-- Now Making a heading -->
    <h2>
        Click The button to see the output
        as information on the console
    </h2>

    <!-- Making a div with a ng-controller -->
    <div ng-controller="LogServiceController">

        <!-- Making a button to display 
            the output -->
        <button ng-click="showOutput()">
            Show Output
        </button>
    </div>

    <!-- Angular JS code -->
    <script>

        // Defining the app for Angular JS
        var app = angular.module('LogService', []);

        // Defining the controller
        app.controller('LogServiceController',
            ['$scope', '$log', function ($scope, $log) {

                // Defining the error message to be
                // shown on console
                $scope.message = "You just clicked the Button";

                // Defining the onclick function
                $scope.showOutput = function () {

                    //$log service
                    $log.info($scope.message
                        + "  :: And this is the information");
                }
            }]);
    </script>
</body>

</html>

Output:

4. error() Method: This method is used to write an error message on the console screen.

HTML

<!DOCTYPE html>
<html>

<head>
    <title>$log service in Angular JS</title>
    <script src=
"https://ajax.googleapis.com/ajax/libs/angularjs/1.6.9/angular.min.js">
    </script>
</head>

<!-- First of all creating and Angular JS app  -->
<body ng-app="LogService">

    <!-- Now Making a heading -->
    <h2>
        Click The button to see the
        output as error on the console
    </h2>

    <!-- Making a div with a ng-controller -->
    <div ng-controller="LogServiceController">

        <!-- Making a button to display the output -->
        <button ng-click="showOutput()">
            Show Output
        </button>
    </div>

    <!-- Angular JS code -->
    <script>

        // Defining the app for Angular JS
        var app = angular.module('LogService', []);

        // Defining the controller
        app.controller('LogServiceController',
            ['$scope', '$log', function ($scope, $log) {

                // Defining the error message to be
                // shown on console
                $scope.message = "You just clicked the Button";

                // Defining the onclick function
                $scope.showOutput = function () {

                    //$log service
                    $log.error($scope.message
                        + "  :: And this is the error");
                }
            }]);
    </script>
</body>

</html>

Output:

5. debug() Method: This method is used to write the debug message on the console screen.

HTML

<!DOCTYPE html>
<html>

<head>
    <title>$log service in Angular JS</title>
    <script src=
"https://ajax.googleapis.com/ajax/libs/angularjs/1.6.9/angular.min.js">
    </script>
</head>

<!-- Creating an Angular app  -->
<body ng-app="LogService">

    <!-- Now Making a heading -->
    <h2>
        Click The button to see the output 
        as debugging on the console
    </h2>

    <!-- Making a div with a ng-controller -->
    <div ng-controller="LogServiceController">

        <!-- Making a button to display the output -->
        <button ng-click="showOutput()">
            Show Output
        </button>
    </div>

    <!-- Angular JS code -->
    <script>

        // Defining the app for Angular JS
        var app = angular.module('LogService', []);

        // Defining the controller
        app.controller('LogServiceController',
            ['$scope', '$log', function ($scope, $log) {

                // Defining the error message to be
                // shown on console
                $scope.message = "You just clicked the Button";

                // Defining the onclick function
                $scope.showOutput = function () {

                    //$log service

                    $log.debug($scope.message
                        + "  :: And this is the debugging");
                }
            }]);
    </script>
</body>

</html>

Output:

AngularJS $location Service

jimishravat2802

Improve

Article Tags :

Angular.js $log Service

Output:

Output:

Output:

Output:

Output:

Similar Reads

Thank You!

What kind of Experience do you want to share?