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=
</script>
</head>
<body ng-app="LogService">
<h2>
Click The button to see
the output on the console
</h2>
<div ng-controller="LogServiceController">
<button ng-click="showOutput()">
Show Output
</button>
</div>
<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=
</script>
</head>
<body ng-app="LogService">
<h2>
Click The button to see the output
as warning on the console
</h2>
<div ng-controller="LogServiceController">
<button ng-click="showOutput()">
Show Output
</button>
</div>
<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=
</script>
</head>
<body ng-app="LogService">
<h2>
Click The button to see the output
as information on the console
</h2>
<div ng-controller="LogServiceController">
<button ng-click="showOutput()">
Show Output
</button>
</div>
<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=
</script>
</head>
<body ng-app="LogService">
<h2>
Click The button to see the
output as error on the console
</h2>
<div ng-controller="LogServiceController">
<button ng-click="showOutput()">
Show Output
</button>
</div>
<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=
</script>
</head>
<body ng-app="LogService">
<h2>
Click The button to see the output
as debugging on the console
</h2>
<div ng-controller="LogServiceController">
<button ng-click="showOutput()">
Show Output
</button>
</div>
<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:
Like Article
Suggest improvement
Share your thoughts in the comments
Please Login to comment...