Abstract: How to effectively use angular.js service to implement alerts

  • Angular-ui Bootstrap Alert Service for angular.js
  • Translator: Fundebug

To ensure readability, free translation rather than literal translation is used in this paper. In addition, the copyright of this article belongs to the original author, and translation is for study only.

Angular-ui Bootstrap provides many components that can be ported from popular Bootstrap projects to Angular directives (with significantly less code). If you plan to use the Bootstrap component in your Angular application, I recommend careful review. Having said that, Bootstrap should work just as well.

Angular Controllers can share service code. Alerts are a good example of sharing service code to controllers.

The Angular-UI Bootstrap document provides the following example:

view

<div ng-controller="AlertDemoCtrl">
  <alert ng-repeat="alert in alerts" type="alert.type" close="closeAlert($index)">{{alert.msg}}</alert>
  <button class='btn' ng-click="addAlert()">Add Alert</button>
</div>
Copy the code

controller

function AlertDemoCtrl($scope) { $scope.alerts = [ { type: 'error', msg: 'Oh snap! Change a few things up and try submitting again.' }, { type: 'success', msg: 'Well done! You successfully read this important alert message.' } ]; $scope.addAlert = function() { $scope.alerts.push({msg: "Another alert!" }); }; $scope.closeAlert = function(index) { $scope.alerts.splice(index, 1); }; }Copy the code

Since we are creating alerts in different controllers in our app and the code across controllers is not easy to refer to, we will move it to the Service.

alertService

'use strict';

/* services.js */

// don't forget to declare this service module as a dependency in your main app constructor!
var appServices = angular.module('appApp.services', []);

appServices.factory('alertService', function($rootScope) {
    var alertService = {};

    // create an array of alerts available globally
    $rootScope.alerts = [];

    alertService.add = function(type, msg) {
      $rootScope.alerts.push({'type': type, 'msg': msg});
    };

    alertService.closeAlert = function(index) {
      $rootScope.alerts.splice(index, 1);
    };

    return alertService;
  });
Copy the code

view

<div>
  <alert ng-repeat="alert in alerts" type="alert.type" close="closeAlert($index)">{{ alert.msg }}</alert>
</div>
Copy the code

Finally, we need to bind the closeAlert() method in alertService’s to $globalScope.

controller

function RootCtrl($rootScope, $location, alertService) {
  $rootScope.changeView = function(view) {
    $location.path(view);
  }

  // root binding for alertService
  $rootScope.closeAlert = alertService.closeAlert; 
}
RootCtrl.$inject = ['$scope', '$location', 'alertService'];
Copy the code

I’m not entirely in favor of this global binding. What I want is to call the service method directly from the close data property in the alert directive, and I’m not sure why not.

Now creating an alert simply calls the AlertService.add () method from either of your controllers.

function ArbitraryCtrl($scope, alertService) { alertService.add("warning", "This is a warning."); alertService.add("error", "This is an error!" ); }Copy the code

Hope this introduction to Angular.js services has been helpful.