AngularJs 应用程序通知服务

引言

在上一篇文章中，我解释了如何使用 AngularJs 拦截器来显示基于 Http 方法的通用通知。 在本文中，我将解释通知服务的实际实现。 我正在使用 Typescript 与 AngularJs。 

背景

以下用例是必需的

• 根据操作向最终用户显示消息，例如保存、更新、删除、加载以及阻塞/取消阻塞 UI
• 按需显示带有消息的加载指示器
• 使用 toast 显示业务/系统异常

以下是通知示例

 

使用代码

我正在使用以下 Angular / jQuery 插件来实现通知服务

1. 为了显示消息并阻塞 UI，我使用 jQuery.BlockUI 库。
2. 对于按需加载指示器，我使用 Angular-Loading 库
3. 为了显示业务异常消息，我使用流行的 Toastr 库

完整的通知服务代码如下

  
  module CRM.Common {

    export interface INotificationService {
        blockUi(message?: string): void;
        unblockUi(): void;
        showError(message): void;
        showSucesss(message: string): void;
        showProgress(): void;
        showInfo(message: string): void;
        showSpinner(name): void;
        showMainPageSpinner(): void;
        hideSpinner(name): void;
        hideMainPageSpinner(): void;
    }

    export class NotificationService implements INotificationService {
        private toaster: any;

        static $inject = [
            "toaster",
            "$loading"
        ];

        constructor(
            toaster: ngtoaster.IToasterService,
            private $loading: any
        ) {
            this.toaster = toaster;
        }

        blockUi(message?: string): void {
            if (message) {
                $.blockUI({ message:  message });
            } else {
                $.blockUI({ message: 'Please Wait' });
            }
        }

        unblockUi(): void {
            $.unblockUI();
        }

        showError(message: string): void {
            this.toaster.error(message);
        }

        showSucesss(message: string): void {
            this.toaster.success(message);
        }

        showProgress(): void {
            $.blockUI({ message: 'Please Wait ...' });
        }

        showInfo(message: string): void {
            this.toaster.info(message);
        }

        showSpinner(name:string): void {
            this.$loading.start();
        }

        showMainPageSpinner(): void {
            this.$loading.start("main-page-spinner");
        }

        hideMainPageSpinner(): void {
            this.$loading.finish("main-page-spinner");
        }

        hideSpinner(name): void {
            this.$loading.finish(name);
        }
    }

    angular.module("CRM").service("CRM.Common.NotificationService", NotificationService);
    
}

这是在控制器中使用该服务的方法

• 注入服务

    
        static $inject = [
            "CRM.Common.NotificationService"];

        constructor(private popupService: CRM.Common.INotificationService) {

        }
        

• 调用函数

    
    this.popupService.showError(error.data.message);
    
    Or
    
    this.popupService.showSuccess("Record is saved successfully.");

 

想知道大家都在使用什么？

节日快乐！