Angular UI Sortable 项目教程

Angular UI Sortable 项目教程

ui-sortableangular-ui/ui-sortable: AngularJS UI Sortable是一个基于jQuery UI Sortable功能的AngularJS指令，使开发者能够轻松地在AngularJS应用中创建可拖拽排序的列表元素。项目地址:https://gitcode.com/gh_mirrors/ui/ui-sortable

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

angular-ui/ui-sortable/
├── demo/
│   └── ...
├── src/
│   └── ...
├── test/
│   └── ...
├── .gitignore
├── .jshintrc
├── .npmignore
├── .prettierrc
├── .travis.yml
├── API.md
├── CONTRIBUTING.md
├── LICENSE
├── README.md
├── bower.json
├── gruntFile.js
├── package.json
└── publish.js

目录结构介绍

• demo/: 包含项目的演示文件。
• src/: 包含项目的源代码文件。
• test/: 包含项目的测试文件。
• .gitignore: Git 忽略文件配置。
• .jshintrc: JSHint 配置文件。
• .npmignore: NPM 忽略文件配置。
• .prettierrc: Prettier 代码格式化配置文件。
• .travis.yml: Travis CI 配置文件。
• API.md: API 文档。
• CONTRIBUTING.md: 贡献指南。
• LICENSE: 项目许可证。
• README.md: 项目说明文档。
• bower.json: Bower 包管理配置文件。
• gruntFile.js: Grunt 任务配置文件。
• package.json: NPM 包管理配置文件。
• publish.js: 发布脚本文件。

2. 项目的启动文件介绍

项目的启动文件主要涉及 package.json 和 gruntFile.js。

package.json

package.json 文件包含了项目的元数据和依赖项。以下是一些关键字段：

{
  "name": "ui-sortable",
  "version": "1.0.0",
  "scripts": {
    "start": "grunt serve"
  },
  "dependencies": {
    "angular": "^1.2.0",
    "jquery": "^3.1.0",
    "jquery-ui": "^1.12.0"
  },
  "devDependencies": {
    "grunt": "^1.0.0",
    "grunt-contrib-connect": "^2.0.0"
  }
}

• scripts.start: 定义了启动命令 grunt serve。
• dependencies: 项目运行所需的依赖项。
• devDependencies: 开发环境所需的依赖项。

gruntFile.js

gruntFile.js 文件定义了 Grunt 任务。以下是一些关键任务：

module.exports = function(grunt) {
  grunt.initConfig({
    connect: {
      server: {
        options: {
          port: 9000,
          base: '.'
        }
      }
    }
  });

  grunt.loadNpmTasks('grunt-contrib-connect');

  grunt.registerTask('serve', ['connect:server']);
};

• connect: 配置了一个简单的服务器。
• serve: 注册了一个启动服务器的任务。

3. 项目的配置文件介绍

项目的配置文件主要包括 .jshintrc、.prettierrc 和 .travis.yml。

.jshintrc

.jshintrc 文件定义了 JSHint 的配置选项：

{
  "esversion": 6,
  "globals": {
    "angular": false,
    "jquery": false
  }
}

• esversion: 指定 ECMAScript 版本。
• globals: 定义全局变量。

.prettierrc

.prettierrc 文件定义了 Prettier 的代码格式化选项：

{
  "singleQuote": true,
  "trailingComma": "all"
}

• singleQuote: 使用单引号。
• trailingComma: 在多行逗号分隔的语法结构中尽可能添加尾随逗号。

.travis.yml

.travis.yml 文件定义了 Travis CI 的配置：

language: node_js
node_js:
  - "12"
script

ui-sortableangular-ui/ui-sortable: AngularJS UI Sortable是一个基于jQuery UI Sortable功能的AngularJS指令，使开发者能够轻松地在AngularJS应用中创建可拖拽排序的列表元素。项目地址:https://gitcode.com/gh_mirrors/ui/ui-sortable