简介
ng-notifications 是一个用于 AngularJS 应用中构建通知消息的 npm 包。它的设计目的是为了让开发者能够方便地处理各种通知，如 Toast、Alert、Modal 等。ng-notifications 包含了很多内置的样式以及复杂的自定义特性，方便实现诸如自动关闭等功能，从而让开发者感到更加舒适。
安装
安装 npm 包很简单，只需要在终端中执行以下命令即可：
npm install ng-notifications
此时，ng-notifications 就会被安装到当前项目的 node_modules 目录下。
使用
使用 ng-notifications 有两个主要部分：
1. 配置
在 AngularJS 应用中，需要在我们的模块中引入依赖，例如：
angular.module('myApp', ['ngNotificationsBar']);2. 在控制器中使用
在 AngularJS 应用中，我们需要在控制器中使用 ngNotify ，如下所示：
-- -------------------- ---- -------
-------------------------------------------------- ---------------- --------- -
-------------------- - ---------- -
-------------------- -
----- ---------
---
--
------------------ - ---------- -
-------------------- -
----- -------
---
--
-------------------- - ---------- -
-------------------- -
----- ------
---
--
---此时，我们就可以在 HTML 中使用 ng-click 指令来调用这些函数。例如：
<button ng-click="successNotify()">成功通知</button> <button ng-click="errorNotify()">失败通知</button> <button ng-click="warningNotify()">警告通知</button>
此时，您就可以在按下按钮之后，在页面中看到对应的信息通知了。
参数
山有木兮水有泉，ngNotify 的特性也非常丰富。
- 您可以设置通知内容、类型、持续时间以及关闭按钮（默认为 false）等。
ngNotify.set('操作成功', {
type: 'success',
duration: 3000, // 单位为毫秒
button: true // 显示关闭按钮
});- 您可以设置通知的位置，并可通过 $rootScope 注入更改该全局位置选项。
$rootScope.ngNotifyConfig.position = 'top-right';
- 您可以通过 ng-click 方法关闭通知。
HTML：
<button ng-click="closeNotify($event)">close</button>
JS：
$scope.closeNotify = function($event) {
$event.preventDefault();
$event.stopPropagation();
ngNotify.dismiss();
};总结
ng-notifications 包含了许多强大、灵活和易于使用的功能。此外，它还非常轻量级，只需要一些简单的使用和配置，就可以创建您需要的通知。希望通过本篇文章，您可以学习如何通过使用 ng-notifications 构建 AngularJS 应用中的通知模块。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/60055ab181e8991b448d8468