之前我在 Simon Reimler 的博客上发表了一篇关于 使用 Ionic Framework 进行本地通知的 文章。但是，您可以在应用程序中使用另一种通知。在 iOS 和许多不同风格的 Android（不是全部）中，您有机会在启动器图标上使用徽章指示器。虽然这不会通过提示通知用户，但它仍会在主屏幕上通知他们需要注意的事项。
Sebastián Katzer 创建了一个名为 cordova-plugin-badge 的漂亮的 Apache Cordova 插件，它可以让我们轻松地将此功能添加到我们的 Ionic Framework 移动应用程序中。
如果您是一名 Android 开发人员，请注意并非所有 Android 版本都支持徽章，在此之前请注意。不要让这个概念驱动您的 Android 应用程序的功能。
让我们首先通过终端或命令提示符创建一个新的 Ionic Framework Android 和 iOS 项目：
ionic start IonicProject blank
cd IonicProject
ionic platform add ios
ionic platform add android
创建新的 Ionic 项目 Shell 1 2 3 4 ionic start IonicProject blank cd IonicProject ionic platform add ios ionic platform add android
与往常一样，请注意，如果您不使用 Mac，您将无法为 iOS 平台添加和构建。
下一步是为 Apache Cordova 安装徽章插件。将 Ionic 项目作为终端或命令提示符中的当前工作目录，运行以下命令：
ionic start IonicProject blank
cd IonicProject
ionic platform add ios
ionic platform add android
安装Apache Cordova Badge Plugin Shell 1 cordova plugin 添加https://github.com/katzer/cordova-plugin-badge.git
这将允许您现在使用原始 JavaScript 将徽章计数添加到您的启动器图标。但是，因为我们使用的是基于 AngularJS 构建的 Ionic Framework，所以只有安装 AngularJS 扩展集 ngCordova 才能使我们的开发过程更简单一些才有意义。
因为 ngCordova 经常更改，所以我将参考我使用的是来自 GitHub 上的提交 c3634c 的版本。欢迎您大胆尝试并使用最新版本，但请注意它可能不再适用于本教程。
将 ng-cordova.min.js 复制到项目的 www/js 目录中，然后打开 www/index.html 文件以将其包含在代码中，如下所示：
ionic start IonicProject blank
cd IonicProject
ionic platform add ios
ionic platform add android
请注意，我在 cordova.js 之上包含了 ng-cordova.min.js 。这很重要，因为如果您不这样做，事情可能无法进行。
接下来我们要做的是打开 www/js/app.js 文件并添加一些用于设置徽章计数的逻辑：
ionic start IonicProject blank
cd IonicProject
ionic platform add ios
ionic platform add android
请注意，在我们的
ExampleController
中，我们将所有内容都包装在
$ionicPlatform.ready()
方法中。这是因为插件使用本机代码，在我们尝试使用它之前必须准备好。
插件准备就绪后，我们首先需要征求用户的许可。无论用户是接受还是拒绝，更改此决定的唯一方法是通过设备设置进行更改。
接下来的
setBadge
方法是从
www/index.html
文件中调用的。将
<ion-content>
标签换成这样：
ionic start IonicProject blank
cd IonicProject
ionic platform add ios
ionic platform add android
现在，当设备获得许可时，如果您单击该按钮，它将为启动器图标分配一个标志编号 5。
结论
徽章编号是通知用户需要注意某事的另一种方式。使用 Apache Cordova 插件，通过 Ionic Framework 将它们添加到您的 iOS 和 Android（某些）应用程序并不复杂。
可以在下面看到本文的视频版本。