Introduction
In my previous articles I told you about:
This article will exlaini logging using AngularJS.
Logging means recording the application actions and state in a Secondary Interface, this action can be recorded in an external file, email or anything else, we just need to ensure that it is a secondary interface. For example the Console of our browsers are a secondary interface, so whenever we see output in the console then we are actually logging.
AngularJS provides a service named $log service, this service is used for logging, we can provide any normal message, any error message, any information message or any warning message using the $Log Service.
Here I will create an application that will help you understand this service in a convenient way.
Step 1
First of all you need to add an external Angular.js file to your application, in other words "angular.min.js".
For this you can go to the AngularJS official Site or can download my source code and then fetch it or you can click on this link and download it: ANGULARJS.
After downloading the external file now you need to add this file to the Head section of your application.
<head runat="server">
<title></title>
<script src="angular.min.js"></script>
</head>
Step 2
Now after adding the external JS file the first thing you need to do is to add ng-app in the <HTML> Tag otherwise your application will not run.
<html ng-app xmlns="http://www.w3.org/1999/xhtml">
Now I will create a JavaScript function in which $log will be defined along with a default value that will be displayed in the console:
<script>
function x($scope, $log) {
$scope.$log = $log;
$scope.consoleMessage = 'Check Your Console';
}
</script>
Here I have created a function named "x", in this function $scope and $log are defined.
An initial value is passed to a variable named "consoleMessage".
Now our work on the View is completed so we can work on the ViewModel.
Step 3
<body>
<form id="form1" runat="server">
<div ng-controller="x">
<input type="text" ng-model="consoleMessage"/>
<input type="button" ng-click="$log.log(consoleMessage)" value="log" />
<input type="button" ng-click="$log.warn(consoleMessage)" value="Warning" />
<input type="button" ng-click="$log.info(consoleMessage)" value="Info" />
<input type="button" ng-click="$log.error(consoleMessage)" value="Error" />
</div>
</form>
</body>
Here I took a Div bound to the function "x" using ng-controller.
In this Div I took one TextBox and four buttons, the TextBox is bound to the variable consoleMessage using the ng-model so it will be congaing the initial value that was provided in the function.
The first button click is bound to t $log.log(consoleMessage), in other words a click of this button will show the TextBox message in the console but this message will be a normal message.
The second button click is bound to $log.warn(consoleMessage), in other words a click of this button will show the TextBox message in the console but this message will be a warning message with a warning sign.
The third button click is bound to $log.info(consoleMessage), in other words a click of this button will show the TextBox message in the console but this message will be an info message with an information sign.
At the end I took a button that is bound to the $log.error(consoleMessage), in other words a click of this button will show the TextBox message in the console but this message will be an error message with error sign.
Now our application is ready for execution.
Output
Run your application and for your application output in the Browser you need to open the console in that browser, this can be done either by clicking "F12" or by right-clicking on the browser and then choosing to inspect the element. So your browser will look like this:
![logging using angularjs]()
You can see that right now my console is clean, the TextBox contains the default value and four buttons are available.
Now if I click on the first button then a simple message will be displayed in the console:
Now I am changing the message in the TextBox and then I will click on the second button that is a warning button:
![logging using angularjs]()
You can see that I changed the message and the same message is displayed in warning mode.
Now I will again change the text and this time click on the third button, in other words the Info Button:
![logging using angularjs]()
You can see that the Info message is displayed.
Now I will again change the text and this time I will click on the fourth button, in other words the Error Button:
![logging using angularjs]()
You can see that all types of the messages are shown, also the count of error and warning messages has increased by one in the right hand corner of the console.
The complete code of this application is as follows:
<html ng-app xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
<title></title>
<script src="angular.min.js"></script>
<script>
function x($scope, $log) {
$scope.$log = $log;
$scope.consoleMessage = 'Check Your Console';
}
</script>
</head>
<body>
<form id="form1" runat="server">
<div ng-controller="x">
<input type="text" ng-model="consoleMessage"/>
<input type="button" ng-click="$log.log(consoleMessage)" value="log" />
<input type="button" ng-click="$log.warn(consoleMessage)" value="Warning" />
<input type="button" ng-click="$log.info(consoleMessage)" value="Info" />
<input type="button" ng-click="$log.error(consoleMessage)" value="Error" />
</div>
</form>
</body>
</html>