angularjs custom messages and logging

Question

What is the best way to store and access custom messages in Angularjs ?. Example:

$scope.alert.msg = "Delete successful !!";

$scope.alert.msg = "Error deleting record.";

Instead of hard coding the custom messages , I would like to store in a single file ALL types of messages and access it by a KEY value.Any recommendation ?

Also how can I set up a logger for Angularjs so that all logs happen at one place. This what I have done.

Instead of $log.debug('Data saved!')

I created a service as logService with methods like below

logData.logInfo = function(logMessage) {
    // information log me
    if (config.logLevel == 10) {
        $log.debug(logMessage);
        //TODO save logMessage to database
    }
}
logData.logError = function(logMessage) {
    if (config.emailError) {
        // log and email the error
        $log.debug(logMessage);
        //TODO Email
        //TODO save logMessage to database
    } else {
        // log only
        //TODO save logMessage to database
        $log.debug(logMessage);
    }
}

I then inject the logService to controllers and log the messages like below

logService.logError(error.error_description);

I am sure there can be better ways of logging. Any help is greatly appreciated ?.

Answer 1

You could use a factory to centralize your alerts.

.factory('Alerts', function() {
    return {
        "success": {
            "delete": "Delete succesful"
        },
        "error": {
            "delete": "Delete unsuccesful"
        }
    };
})

You can simply use you're alerts as in a component Alerts.success.delete.

As for the logging of the messages, you can turn the $log.debug on and off based on a variable in the config of the application.

.config(function($logProvider){
  $logProvider.debugEnabled(false);
})

You can add a global variable with a logging level and based on that level decide if you email or write to a database. I added a JSFiddle where I demonstrate how I would implement a logger. Don't forget to open your console to view the results.

I will also paste the content of the jsfiddle just incase.

angular.module('myApp', [])
    .constant('LOG_LEVEL', 1)
    .config(function($logProvider){
      $logProvider.debugEnabled(true);
    })
    .factory('Alerts', function() {
        return {
            "success": {
                "delete": "Delete succesful"
            },
            "error": {
                "delete": "Delete unsuccesful"
            }
        };
    })
    .factory('LogService', function($log, LOG_LEVEL) {
            function writeToDB () {
            //Write to db
        };
        function email () {
            //Email someone
        }
        return {
            error: function(msg) {
                $log.error(msg);
                if (LOG_LEVEL > 0) writeToDB(msg);
                if (LOG_LEVEL > 1) email(msg);
            },
            success: function(msg) {
                $log.log(msg);
            },
            debug: function (msg) {
                    $log.debug(msg);
            }
        }
    })
    .run(function(LogService, Alerts) {
        LogService.error(Alerts.error.delete);
        LogService.success(Alerts.success.delete);
        LogService.debug("Turn me on and off in the config!")
    })