El servicio $log en Angular.js simplemente se usa para fines de registro en la consola del navegador. Se utiliza para la depuración y solución de problemas del error en el código. Tiene varias implementaciones como registro, advertencia, información, error y depuración, y todos los nombres sugieren. Se utiliza para fines de registro, advertencia, información, visualización de errores y mensajes de depuración, respectivamente.
Ahora veamos la implementación real del servicio $log en Angular JS.
Métodos usados:
1. Método log(): Este método se usa para escribir el mensaje de registro en la consola.
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>
Producción:
2. Método warn(): este método se utiliza para mostrar el mensaje de advertencia en la pantalla de la consola.
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>
Producción:
3. Método info(): Este método se utiliza para mostrar el mensaje de información en la pantalla de la consola.
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>
Producción:
4. Método error(): Este método se utiliza para escribir un mensaje de error en la pantalla de la consola.
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>
Producción:
5. Método debug(): Este método se utiliza para escribir el mensaje de depuración en la pantalla de la consola.
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>
Producción:
Publicación traducida automáticamente
Artículo escrito por jimishravat2802 y traducido por Barcelona Geeks. The original can be accessed here. Licence: CCBY-SA