ng-notify, 在你的AngularJS应用程序中,一个简单的轻量级模块用于显示通知

分享于 

17分钟阅读

GitHub

  繁體 雙語
A simple, lightweight module for displaying notifications in your AngularJS app.
  • 源代码名称:ng-notify
  • 源代码网址:http://www.github.com/matowens/ng-notify
  • ng-notify源代码文档
  • ng-notify源代码下载
  • Git URL:
    git://www.github.com/matowens/ng-notify.git
    Git Clone代码到本地:
    git clone http://www.github.com/matowens/ng-notify
    Subversion代码到本地:
    $ svn co --depth empty http://www.github.com/matowens/ng-notify
    Checked out revision 1.
    $ cd repo
    $ svn up trunk
    
    通知(。现场演示插件)Build StatusCode Climate

    一个简单的,轻量级的MODULE,用于在你的AngularJS应用程序中显示通知。

    ngNotify Demo

    JS和CSS文件都结合了 ~5.5 kBs。

    IE9+ ( AngularJS v1.3. x 不再支持 IE8 ) 和 Chrome。Firefox 和Safari的最新版本已经被测试并支持。 在遇到问题时,请提交一个新问题,我将查看- 或者更好的- 提交一个公关补丁,我将把它合并在一个项目。

    你可以查看其中的关键内容并演示: http://matowens.github.io/ng-notify

    最新添加

    有了v0.8.0个新特性。 第一,能够为你的通知指定一个特定容器,用于显示更多模块化的样式显示。 为此,只要设置一个 target 选项,设置消息或者设置初始配置时,将值设置为CSS选择器字符串。 更多关于那个 below。 这里外,你现在可以提供一个回调,该回调将在发生淡出后消失,通知已经从视图中移除。 这里回调可以在调用 set() 方法时作为可选的第三个参数添加。 在这里更多的是 随着这些变化,使用了通知实例的重构,因为我们希望引入新的特性,比如 Angular 2.

    实现

    要求

    AngularJS是唯一的依赖。 动画是用纯JS实现的,不需要 jQuery。

    安装

    你可以使用 Bower 安装ng通知。

    
    bower install ng-notify --save
    
    
    
    

    你还可以使用npm安装ng通知。

    
    npm install ng-notify --save
    
    
    
    

    如果你愿意的话,ng通知现在可以通过CDN提供。

    
    //cdn.jsdelivr.net/angular.ng-notify/{version.number.here}/ng-notify.min.js
    
    
    //cdn.jsdelivr.net/angular.ng-notify/{version.number.here}/ng-notify.min.css
    
    
    
    

    例如:

    
    //cdn.jsdelivr.net/angular.ng-notify/0.6.0/ng-notify.min.js
    
    
    //cdn.jsdelivr.net/angular.ng-notify/0.6.0/ng-notify.min.css
    
    
    
    

    像往常一样,你可以直接从 repo 下载源文件- 它们位于 dist 目录中。 一定要包括js和css文件的缩小版本。

    用法

    在包括 ng-notify.min.js 和 ng-notify.min.css 之后,将ng通知提供程序注入到项目中。

    var app =angular.module('demo', ['ngNotify']);

    现在你可以从应用程序的任何地方触发通知。 若要显示通知,只需使用 set 方法。

    ngNotify.set('Your notification message goes here!');

    若要指定要显示的通知的类型,请提供可选的类型参数。 ( 对于可用类型,请检查下面的定义。)

    ngNotify.set('Your error message goes here!', 'error');
    高级用法

    默认配置

    你可以使用 config 方法覆盖所有通知的默认选项。 不需要这些选项。 ( 对于可用选项,请检查下面的定义。)

    ngNotify.config({
     theme:'pure',
     position:'bottom',
     duration:3000,
     type:'info',
     sticky:false,
     button:true,
     html:false});

    可以在 run() block 中设置默认配置选项。 如果应用程序使用全局控制器,那么配置选项也可以在这里设置。 有关本主题的讨论和工作示例,请检查这里注释的

    单个配置

    你还可以将选项的对象传递给单个通知。 你可以在这里通过我们的可用选项的任意组合。 ( 对于可用选项,请检查下面的定义 ) 例如:

    ngNotify.set('Your first message.', {
     position:'top',
     sticky:true});ngNotify.set('Your second message.', {
     type:'error',
     duration:2000});ngNotify.set('Your third message.', 'error'); // Original use case still works, too.ngNotify.set('Your <i>fourth</i> message.', {
     theme:'pitchy',
     html:true});

    电子邮件通知

    粘滞通知允许你设置一个不会消失的持久通知。 为此,只需将 sticky 属性设置为 true:

    ngNotify.set('This is sticky.', {
     sticky:true});

    这将为用户提供关闭通知的选项。 如果需要手动取消通知,则可以使用 dismiss 方法这样做,如下所示:

    ngNotify.dismiss();

    如果你希望以编程方式取消通知并阻止用户这样做,你可以添加一个选项来删除该按钮:

    ngNotify.set('This is sticky without a button.', {
     sticky:true,
     button:false});

    注意:通知设置为粘滞时,由于通知不会自动消失,所以持续时间属性将被忽略。

    HTML通知

    HTML通知将允许你在其中显示带有HTML内容的消息。 为此,你需要将 html 属性设置为 true:

    ngNotify.set('This has <b>HTML</b> content!', {
     html:true});

    还可以通过如下所示将ngNotify配置添加到所有通知,以便为所有通知启用HTML通知:

    ngNotify.config({
     html:true});

    在HTML通知中,需要在你的应用中包含 ngSanitize 脚本( 例如通过 Google。Bower 或者 code.angular.org).,不需要将它添加到ngNotify中)。 如果ngNotify找到了ngSanitize脚本,它将把它作为一个依赖,动态地添加到 ngNotify MODULE 中。 包括之后,只需将 html 属性切换到 true,MODULE 就会处理其余的。

    如果没有包含 ngSanitize,并且将 html 设置为 true,ngNotify将会优化回默认消息显示并打印调试消息。

    模块通知

    通过指定 target 选项,你可以控制显示通知的位置。 默认情况下,目标设置为 body 标记,但是你可以提供任何其他CSS选择器来控制通知的附加位置。 例如:

    ngNotify.set('This message has a specific container!', {
     target:'#new-container'});

    你还可以通过将所有通知添加到ngNotify配置中,为所有通知指定默认目标,例如:

    ngNotify.config({
     target:'#new-container'});

    指定自定义目标的** 通知设置为以绝对定位显示,替代默认的固定定位。 在每个应用程序中都不可能调整ngnotify的样式,因此在不将通知附加到 body 标签时,你可能需要调整样式,而不是使用默认目标。

    通知回调

    你有一个在通知完成时调用函数的选项。 只能通过 set() 方法调用这里回调,并作为可选的第三个参数传递。 例如:

    varcallback=function() {};ngNotify.set('This message has a callback.', {}, callback);

    每次指定该回调时,该回调都将触发,即使该通知早于dismiss方法 dismissed。 当通知淡出后,回调将激发。

    你自己

    还有另外两种方法可以让你创建自己的类型和主题。

    自定义通知类型

    创建自定义类型将允许你在整个应用程序中添加其他类型的通知。 若要创建新类型,请使用 addType 方法。 第一个参数是名称你将使用它来引用新类型。 第二个参数是类,你将使用它来样式化新的通知类型。

    ngNotify.addType('notice', 'my-notice-type');

    然后,你可以将任何通知设置为使用该类型,并使用你提供的NAME 触发它。

    ngNotify.set('This notification is using our new type!', 'notice');

    要样式化新类型,请选择要使用的颜色并将它的设置为新样式的background 颜色。

    .my-notice-typebackground-color: #ABC123
    自定义主题

    创建自定义主题将允许你利用现有的通知类型构建全新的通知消息。 若要创建新主题,请使用 addTheme 方法。 第一个参数是名称你将使用它来引用新主题。 第二个参数是类,你将使用它来对主题类型的新通知进行样式化。

    ngNotify.addTheme('newTheme', 'my-new-theme');

    现在你可以通过配置方法激活新主题,使用前面分配给它的NAME。

    ngNotify.config({
     theme:'newTheme'});

    为了样式化你的新主题,选择要用于每个通知类型的颜色集合并将它的设置为每个类型的background。

    .my-new-theme.ngn-infobackground-color: #0033CC.my-new-theme.ngn-errorbackground-color: #FF0000.my-new-theme.ngn-successbackground-color: #00CC00.my-new-theme.ngn-warnbackground-color: #FF9900.my-new-theme.ngn-grimacebackground-color: #660099
    自定义样式

    位置。大小。颜色。对齐和更多都基于通知类,并且都在CSS文件中指定。 查看样式定义 below 查看哪些类可以用于覆盖你自己的应用程序中的任何样式。

    定义

    方法

    设置( 消息,type|config,回调)

    显示通知消息并设置这里通知的格式/行为选项。

    • 消息: 字符串 - 必需- 显示在通知中的消息。
    • 收费类型: string|object - 可选optional显示( 字符串) 或者选项的对象的通知类型。
      • 类型:
        • 信息 ( 默认值)
        • 错误
        • 成功
        • 警告
        • 鬼脸
      • 选项:( 请参阅下面的配置)
    • 向CSS添加通知可选 - target string optional optional optional target target target target。
    配置( 选项)

    设置显示时要考虑的所有通知的默认设置。

    • 选项 对象 override替代默认设置的选项的对象。
      • 主题: 字符串 - 可选sets设置要使用的主题,修改每个通知类型的样式。
        • 纯 ( 默认值)
        • 素数
        • 柔和
        • 音调音调
      • 类型: 字符串 - 可选sets当类型未显式设置时设置默认通知类型。
        • 信息 ( 默认值)
        • 错误
        • 成功
        • 警告
        • 鬼脸
      • 小数点 : 字符串 - 可选- 设置通知在应用程序中显示的位置。
        • 底部 ( 默认值)
        • 顶端
      • 持续时间: 整数 - 可选optional通知对用户可见的持续时间,以毫秒计。
      • 如果消息在持续时间结束时消失,则确定消息是否会褪色,或者消息是否会持续,直到用户关闭它自身。 当 true,持续时间将不会被设置,即使它有一个值。 ( 默认情况下为 false )。
      • 按钮: bool - optional可选 determines确定dismiss按钮是否会显示在置顶通知上。 当 true 时,按钮将显示。 当 false 时,按钮将不会显示。 要控制关闭按钮的可见性,必须将粘滞键设置为 true。 ( 默认情况下为 true )。
      • 目标: 字符串 - 可选- CSS选择器,其中应该将通知附加到 selector。 ( 默认情况下为正文)。
    ( )

    手动取消所有可能仍然被设置的置顶通知。

    ( 名称,类)

    允许开发人员创建新的通知类型,以便在它的应用程序中使用。

    • 在中触发这里通知类型的NAME 所需的名称:字符串required required required。
    • : 字符串 - 必需- 用于在样式表中针对这里类型的类。
    addTheme ( 名称,类)

    允许开发人员为每个通知类型创建一组新的样式。

    • 名称: 字符串 required required required在配置对象中设置主题时使用的NAME。
    • : 字符串 - 必需- 用于在样式表中针对这里主题的类。

    样式

    • 对每个通知和控制所有主样式都存在的所有通知都提供了

      • 。ngn
    • 位置: 完全负责显示通知的位置。 默认设置为 bottom,每个通知中都有一个。

      • 。ngn顶级服务
      • 。ngn底层
    • 类型: 设置类型颜色的每个通知 background的默认类。 默认设置为信息,每个通知中都有一个。

      • 。ngn信息服务
      • 。ngn错误消息
      • 。ngn成功案例
      • 。ngn警告你
      • 。ngn鬼脸
    • 主题: 与类型类链接在一起以覆盖默认 background 颜色的主题特定类。 不总是存在,默认排除所有这些。

      • 。ngn-prime
      • 。ngn-pastel
      • ,ngn-pitchy
    • : 负责显示sticky通知的取消按钮。

      • :当启用粘滞时,ngn的粘性显示取消按钮。
      • 。ngn关闭 - styles取消 dismissal。
    插件开发

    如果你有分叉或者克隆项目,并想做任何调整,有几项需要注意。 首先,你的系统需要有以下位:

    • node &协议
    • Grunt
    • Ruby
    • Sass

    它的次,有一些眩人的任务,你可以利用它帮助验证和准备你的更改使用。

    你可以在任何时候手动关闭 grunt 或者 grunt build 命令到 lint,缩小,并设置你的演示( 在_gh-pages目录中构建) 进行测试。

    grunt (or grunt build)

    此外,你可以运行 grunt dev 到 lint,缩小和准备你的演示测试。 一旦构建完成,它还会激发一个 watch,以便。js和文件的任何更改都会自动触发构建脚本。

    grunt dev

    若要运行已经配置的单元测试,可以运行 grunt test。 这将消除一系列测试,检查所有的默认选项是否正确设置,所有的方法都可以执行。 如果你所做的任何更新对已经存在的功能有负面影响,这些测试应该让你知道。 同时,测试完成后,将生成测试覆盖报告并存储在 coverage 目录中。

    grunt test

    接下来,你将希望在三个位置完成所有开发。 如果在其他位置添加更改,则在生成过程中可能会覆盖它们。 这些位置包括:

    src/scripts/ng-notify.js - 用于任何脚本修改。

    src/styles/ng-notify.sass - 用于任何样式修改。

    demo/* - 对演示文稿进行任何修改。

    在完成更改并运行适当的任务之后,你的更改应该被烘焙,并准备好在 dist 目录下作为 minified js和css文件 consume。


    相关文章