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:
Similar Reads
AngularJS $locale service The AngularJS $locale service is a built-in service that provides localization information for the current browser environment. It is designed to help developers create applications that can be easily adapted to different locales and languages. The $locale service exposes a number of properties that
4 min read
AngularJS $location Service The $location in AngularJS basically uses a window.location service. The $location is used to read or change the URL in the browser and it is used to reflect that URL on our page. Any change made in the URL is stored in the $location service in AngularJS. There are various methods in the $location s
4 min read
AngularJS $compile Service The $compile service in AngularJS is used to compile an HTML template into a function that can be used to link the template to a scope. This service is typically used to compile dynamic templates that are generated on the fly, such as templates that are loaded from the server or created by a directi
4 min read
AngularJS $parse Service The $parse service in AngularJS is a function that takes an expression string and returns a function that can be used to parse and evaluate the expression. The expression string can contain variables, operators, and function calls. To use the $parse service, you first need to inject it into your Ang
3 min read
AngularJS $document Service In AngularJS, a service is a function or object that is available for dependency injection (DI) in an AngularJS app. Services are typically used to encapsulate and reuse business logic and other app functionality that is not directly related to the presentation of data in the app. The $document serv
3 min read
AngularJS $interval Service The $interval service in AngularJS is a function that allows you to execute a function repeatedly at a specified interval. It is similar to the setInterval function in JavaScript, but it is designed to work seamlessly with the AngularJS framework. To use the $interval service, it is first needed to
4 min read
Angular ng serve When Creating an Angular Application, it is very important to have a robust and efficient development environment. Angular CLI provides several commands to make the development process easy.One of the most used commands is ng serve. This command allows you to build and serve the application locally.
5 min read
AngularJS $controller Service AngularJS applications depend on a controller to control the flow of data through an AngularJS application. AngularJS architecture uses the MVC model i.e the Model View Controller. The model is responsible for maintaining the application data, the View for displaying data or some part of data to the
5 min read
AngularJS $window Service The $window service refers to the browser window object. It is globally available in JavaScript, so it causes testability problems. In AngularJS, it is not globally available. It includes various methods like alert box, prompt box, confirms box, etc. Now let us see the actual implementation of the $
2 min read
AngularJS $cacheFactory Service The $cacheFactory service in AngularJS is a factory function that creates new instances of the Cache object, which is a simple in-memory cache that stores key-value pairs. The Cache object is useful for storing data that is expensive to retrieve, such as data that comes from a server or data that is
5 min read