Angular UI Notification 开源项目教程

Angular UI Notification 开源项目教程

angular-ui-notificationAngular.js service providing simple notifications using Bootstrap 3 styles with css transitions for animating项目地址:https://gitcode.com/gh_mirrors/an/angular-ui-notification

1. 项目的目录结构及介绍

angular-ui-notification/
├── dist/
│   ├── angular-ui-notification.css
│   ├── angular-ui-notification.min.css
│   ├── angular-ui-notification.js
│   └── angular-ui-notification.min.js
├── src/
│   ├── directives/
│   │   └── notification.js
│   ├── services/
│   │   └── notification.js
│   ├── styles/
│   │   └── notification.scss
│   └── index.js
├── examples/
│   ├── basic/
│   │   ├── index.html
│   │   └── script.js
│   ├── custom-template/
│   │   ├── index.html
│   │   └── script.js
│   └── webpack/
│       ├── index.html
│       └── script.js
├── test/
│   ├── karma.conf.js
│   ├── spec/
│   │   └── notification.spec.js
│   └── webpack.test.config.js
├── .editorconfig
├── .gitignore
├── .jshintrc
├── .travis.yml
├── CHANGELOG.md
├── LICENSE
├── README.md
├── bower.json
├── gulpfile.js
├── package.json
└── webpack.config.js

目录结构介绍

• dist/: 包含编译后的 CSS 和 JS 文件，适用于生产环境。
• src/: 包含项目的源代码，包括指令、服务和样式文件。
• examples/: 包含多个示例项目，展示如何使用 Angular UI Notification。
• test/: 包含测试配置文件和测试用例。
• 根目录下的文件包括项目配置、文档和构建脚本。

2. 项目的启动文件介绍

项目的启动文件主要是 src/index.js，它负责初始化 Angular 模块并注册通知服务和指令。

// src/index.js
import angular from 'angular';
import NotificationDirective from './directives/notification';
import NotificationService from './services/notification';

const ngModule = angular.module('ui-notification', []);

ngModule.directive('uiNotification', NotificationDirective);
ngModule.service('Notification', NotificationService);

export default ngModule.name;

3. 项目的配置文件介绍

package.json

package.json 文件包含了项目的元数据和依赖项。

{
  "name": "angular-ui-notification",
  "version": "0.3.6",
  "description": "Angular.js service for displaying notifications",
  "main": "dist/angular-ui-notification.js",
  "scripts": {
    "test": "karma start test/karma.conf.js",
    "build": "gulp build"
  },
  "repository": {
    "type": "git",
    "url": "git+https://github.com/alexcrack/angular-ui-notification.git"
  },
  "keywords": [
    "angular",
    "notification",
    "notify",
    "message"
  ],
  "author": "Alex_Crack",
  "license": "MIT",
  "bugs": {
    "url": "https://github.com/alexcrack/angular-ui-notification/issues"
  },
  "homepage": "https://github.com/alexcrack/angular-ui-notification#readme",
  "devDependencies": {
    "angular": "^1.5.8",
    "angular-mocks": "^1.5.8",
    "gulp": "^3.9.1",
    "gulp-concat": "^2.6.0",
    "gulp-cssmin": "^0.1.7",
    "gulp-rename": "^1.2.2",
    "gulp-sass": "^2.3.2",
    "gulp-uglify": "^1.5.3",
    "jasmine-core": "^2.4.1",
    "karma": "^0.13.22",
    "karma-jasmine": "^1.0.2",
    "karma-phantomjs-launcher": "^1.0.0",
    "phantomjs-prebuilt": "^2.1.7",
   

angular-ui-notificationAngular.js service providing simple notifications using Bootstrap 3 styles with css transitions for animating项目地址:https://gitcode.com/gh_mirrors/an/angular-ui-notification