Implementing notification alerts in angularjs

Question

I was wondering how an error alert would be implemented using angularjs.

Required functionality:

• An alertQueue consists of all the alerts to be displayed to the user. These alerts are deleted from the queue after a span of 3 seconds. The user himself can close the alert by clicking the close button.
• This AlertService must be the core service. Alerts are rendered in the view as <alert-list></alert-list>i.e using a component alertList.
• Should be able to update alerts from other controllers like: AlertService.alert("my alert").

so far what I have done?

angular.
  module('core').
  factory('AlertService', [function() {
    var alertQueue = [];

    var addAlert = function(message, type){
      message = {message: message, type: type};
      alertQueue.push(message)
    };

    var deleteAlert = function(alert){
      alertQueue.splice(alertQueue.indexOf(alert), 1);
    };

    return{
      warning: function(msg){
        addAlert(msg, "warning");
      },
      success: function(msg){
        addAlert(msg, "success");
      },
      removeAlert: function(alert){
        deleteAlert(alert);
      },
      getAlerts: function(){
        return alertQueue;
      }
    }

}]);

angular.
  module('alertApp').
  component('alertList', {
    templateUrl: '/static/js/app/aurora-alert/aurora-alert.template.html',
    controller: ['$routeParams','$scope', 'Aurora',
      function AlertController($routeParams, $scope, AlertService) {
        var self = this;
        self.alertQueue = AlertService.alertQueue;
        self.alert = function(){
          var message = arguments[0];
          AlertService.warning(message);
        };
        self.removeAlert = function(alert) {
          AlertService.removeAlert(alert);
        };
      }
    ]
  });

I know that I'm doing something wrong in the above code and in its logic. I said above that I require the <alert-list></alert-list> component. So the alertService is injected as a dependency into alertController. But how am I going to raise the alert from other controllers? I know we can use $scope.$broadcast but that doesn't feel right.

Please explain how to achieve this? No third party libraries are to be used.

Answer 1

I think you are going about it only slightly incorrectly. Your alert-list should be responsible only for displaying and removing alerts, not for creating them. Leave the creation of alerts to your controllers

So for example, if you run into an error with an ApiSerivce:

DemoCtrl(AlertService, ApiService) {
  ApiService.submitForm({some:data}).then(function() {
    //something successfull happened
  }).catch(function(error) {
    AlertService.warning("Something bad happened calling the API serivce");
 });
}

Then you can change your AlertService to broadcast an event when a new alert is created that the alert-list can listen to:

  factory('AlertService', ["$rootScope", function($rootScope) {
    var alertQueue = [];

    var addAlert = function(message, type){
      message = {message: message, type: type};
      alertQueue.push(message)
      $rootScope.$broadcast("new-alert"); //notify the list that there are new alerts
    };

This is how you would listen to it in your alert-list:

$scope.$on("new-alert", function() {
  self.alertQueue = AlertService.alertQueue;
});

This way, as soon as an alert is created, the alert-list is instantly updated with the latest queue of alerts.

You would probably want to do the same thing for alert deletion.