前言
在前端开发中，我们经常需要使用一些通知提示的功能来提醒用户操作结果或者在页面中展示一些提示信息。而这种操作在每个项目中都会用到，因此在使用过程中，我们可以通过 import 引入一些优秀的第三方库来快速实现。
这次我们要介绍的是一个非常实用的第三方库——notify-angular。
notify-angular 简介
notify-angular 是一款基于 AngularJS 的通知提示库，它可以在页面中快捷地创建各种各样的通知提示，如成功提示、警告提示、错误提示等。
notify-angular 非常轻量化且易于使用，它提供了简洁明了的 API 接口，同时还兼容了所有主流浏览器。
安装
要使用 notify-angular，我们需要先安装它。
使用 npm 进行安装：
npm install --save notify-angular
操作示例
下面我们将演示如何使用 notify-angular 来创建一些通知提示。
基本操作
首先，我们需要在项目中引入 notify-angular：
import angular from 'angular'; import 'notify-angular';
在 HTML 中添加以下代码：
<body ng-app="myApp"> <notify></notify> <button ng-click="showSuccess()">Success</button> <button ng-click="showError()">Error</button> <button ng-click="showWarning()">Warning</button> </body>
在 JS 中，新增一个 myApp 模块，并注入 notify 应用，在控制器中添加以下代码：
-- -------------------- ---- -------
-------
---------------- -----------
--------------------- ---------- --------- -------- -------- ------- -
------------------ - ---------- -
--------
-------- -----------
--------- -----
--------- ---------
-------- ---------------
---
--
---------------- - ---------- -
--------
-------- ---------
--------- -----
--------- ---------
-------- --------------
---
--
------------------ - ---------- -
--------
-------- -----------
--------- -----
--------- ---------
-------- ---------------
---
--
----至此，我们已经给按钮添加了 Success、Error、Warning 的提示功能。
更多操作
除此之外，notify-angular 还提供了许多其他的操作方式，如：
- 在通知上添加链接，点击链接可以跳转到指定的页面；
- 添加图标或者图片，并支持自定义图片；
- 指定通知的位置及样式；
- 设置通知的持续时间等。
更多操作详见 notify-angular 官网。
总结
notify-angular 是一款实用易用的通知提示库，它不仅仅能够给用户带来更好的体验，同时也为我们的开发工作提供了便利。
在实际开发中，我们可以根据需求来选择合适的操作方式，并灵活使用相应的 API，以达到更好的效果。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/6005671181e8991b448e3571