Enable logging with $log in AngularJS

Question

I've recently started working on an application that uses, among other things, AngularJS. One task, which seemed somewhat simple at first, is turning out to be quite the headache.

We have a lot of console.log() in our JS code. I am to replace them with the using Angular's $log. I thought that it would be fairly straightforward, but it's not, probably because I am not familiar with Angular at all in the first place.

I've read the documentation, and the $log, $logProvider and $service pages in particular. I tried to apply the examples given to my code, to no avail.

From what I've understood from the app code (I just started working on it), we use a "main" module dedicated to configuration. It looks like this:

var mainApp = angular.module('mainApp'
['ui.router','datatables','ngMockE2E', 'ngResource','angularSpinner', 'ngCookies',
'pascalprecht.translate','ui.bootstrap', 'ngFileUpload', 'angular-jwt']);

mainApp.config(function($stateProvider, $urlRouterProvider, $httpProvider, $translateProvider) {

// Example of what we can find here
$translateProvider.useStaticFilesLoader(fileNameConvention);
$translateProvider.useSanitizeValueStrategy('escaped');

};

Each HTML file we have (or almost all) is linked to a controller, in which mainApp is referenced, like this:

mainApp.controller('ContractsController', ContractsController);

From what I've understood, to avoid calling log in each controller, I should inject it in mainApp. The thing is, I've tried several methods, none of them working (actually, I've even tried using $log directly in a controller, and it didn't work either).

If someone could be so kind as to point me in the right direction, I would really appreciate it.

Answer 1

Injecting $log in your controller should work. Did you see this example

 angular.module('app', [])

.controller('MainCtrl', ['$log', function($log){
    $log.debug('Hello Debug!');
}]);