LearnKode

2 Example(s) of AngularJS $log


Description :

In AngularJS $log is used to display message in browser console and there are four type of log messages: a) error b) log c) warn d) info. Example will show all for type of log and these error will show in console window. You can open console by pressing F12 in google chrome. See the code snippet:


AngularJS $log Example - 1 
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <title>WWelcome to LearnKode - A code learning platform</title>
    <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.4.2/angular.min.js"></script>
</head>
<body ng-app="app">
    <div ng-controller="$logController">
        <input type="radio" ng-model="q" value="log" ng-click="log.log(message)">log
        <input type="radio" ng-model="q" value="warn" ng-click="log.warn(message)">warn
        <input type="radio" ng-model="q" value="info" ng-click="log.info(message)">info
        <input type="radio" ng-model="q" value="error" ng-click="log.error(message)">error
        <input type="radio" ng-model="q" value="debug" ng-click="log.debug(message)">debug
    </div>
</body>
</html>
<script>
    var app = angular.module("app", []);
    app.controller('$logController', ['$scope', '$log', function ($scope, $log) {
        $scope.log = $log;
        $scope.message = 'LearnKode error in console';
    }]);

</script>
Try it » Download Example »

Output

Description :

In this example, It will compare two values and generate log message according to condition as if values are equal log message is info and if val1 is greater than val2, code generate error message and so on. See the code snippet:


AngularJS $log Example - 2 
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <title>Welcome in the AngularJS</title>
    <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.4.2/angular.min.js"></script>
</head>
<body ng-app="app">
    <div ng-controller="$logController">
        <label>
            Number1:
            <input type="number" ng-model="val1" ng-change="logMessage()" />
            Number2:<input type="number" ng-model="val2" ng-change="logMessage()" />
        </label>
    </div>
</body>
</html>
<script>
    var app = angular.module("app", []);
    app.controller('$logController', ['$scope', '$log', function ($scope, $log) {
        $scope.$log = $log;
        $scope.val2 = 9;
        $scope.val1 = 10;
        $scope.logMessage = function () {
            if ($scope.val1 == $scope.val2) {
                $log.info("Both values are equal")
            }
            else if ($scope.val1 >= $scope.val2) {
                $log.error($scope.val1 + " is greater than value " + $scope.val2)
            }
            else if ($scope.val1 <= $scope.val2) {
                $log.warn($scope.val1 + " is lesser than " + $scope.val2)
            }
            else if ($scope.val1 != $scope.val2) {
                $log.info($scope.val1 + " is not equal to " + $scope.val2)
            }
        }
    }]);
  
</script>
Try it » Download Example »

Output