Angular-popups 开源项目教程

1. 项目介绍

Angular-popups 是一个基于 AngularJS 的浮层组件库，由 artDialog 演进而来。它严格遵循 AngularJS 架构与 web 标准，提供了丰富的浮层指令和功能，支持 ARIA 规范、无障碍焦点管理、快捷键关闭等特性。Angular-popups 完全基于 HTML 标签（指令），无需在控制器中进行配置，支持模态浮层，对移动端支持友好，并且轻量（css+js=7kb），不依赖 jQuery 等外部库。

2. 项目快速启动

安装

首先，通过 npm 安装 Angular-popups：

npm install angular-popups

引入和使用

在你的 AngularJS 项目中引入 Angular-popups：

<script src="lib/angular.js"></script>
<script src="dist/angular-popups.js"></script>
<script>
  var app = angular.module('app', ['angular-popups']);
</script>

示例代码

以下是一个简单的对话框示例：

<dialog ng-if="dialog.open" close="dialog.open=false">
  <div dialog-title>消息</div>
  <div dialog-content>hello world</div>
</dialog>

在控制器中初始化对话框状态：

app.controller('testCtrl', function($scope) {
  $scope.dialog = {
    open: true
  };
});

3. 应用案例和最佳实践

应用案例

1. 通知消息：使用 notice 指令创建通知消息浮层。

   <notice ng-if="notice.open" duration="2000" close="notice.open=false">
     hello world
   </notice>
   

2. 气泡浮层：使用 bubble 指令创建气泡浮层。

   <button id="btn" ng-click="bubble.open = true">打开气泡</button>
   <bubble ng-if="bubble.open" for="btn" close="bubble.open=false">
     hello world
   </bubble>
   

最佳实践

• 无障碍焦点管理：确保浮层打开时，焦点自动转移到浮层内部，关闭时焦点返回原位置。
• 快捷键关闭：支持通过 ESC 键关闭浮层，提升用户体验。
• 模态浮层：使用 modal 参数创建模态浮层，阻止用户与背景内容交互。

4. 典型生态项目

• Angular Material：Angular 官方的 Material Design 组件库，提供了丰富的 UI 组件，与 Angular-popups 结合使用可以构建现代化的 Web 应用。
• Ng-bootstrap：基于 Bootstrap 的 Angular 组件库，提供了与 Bootstrap 风格一致的 UI 组件，适合快速开发响应式 Web 应用。
• PrimeNG：功能强大的 Angular UI 组件库，提供了丰富的 UI 组件和主题，适合企业级应用开发。

通过结合这些生态项目，可以进一步提升 Angular-popups 的功能和用户体验。