开源项目 ng-table 使用教程-CSDN博客

本文链接：https://blog.csdn.net/gitblog_00231/article/details/141076660

开源项目 ng-table 使用教程

ng-tableSimple table with sorting and filtering on AngularJS项目地址:https://gitcode.com/gh_mirrors/ng/ng-table

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

ng-table/
├── demo/
│   ├── app/
│   ├── assets/
│   ├── index.html
│   └── systemjs.config.js
├── dist/
│   ├── ng-table.css
│   ├── ng-table.js
│   └── ng-table.min.js
├── src/
│   ├── modules/
│   │   ├── ng-table.js
│   │   └── ng-table.spec.js
│   └── styles/
│       └── ng-table.css
├── .gitignore
├── .jshintrc
├── .travis.yml
├── bower.json
├── gulpfile.js
├── karma.conf.js
├── package.json
├── README.md
└── tsconfig.json

目录结构介绍

demo/: 包含项目的演示代码和配置文件。
- app/: 演示应用的源代码。
- assets/: 静态资源文件。
- index.html: 演示应用的入口文件。
- systemjs.config.js: SystemJS 配置文件。
dist/: 编译后的文件，包含 CSS 和 JS 文件。
src/: 项目的源代码。
- modules/: 核心模块代码和测试代码。
- styles/: 样式文件。
.gitignore: Git 忽略文件配置。
.jshintrc: JSHint 配置文件。
.travis.yml: Travis CI 配置文件。
bower.json: Bower 包管理配置文件。
gulpfile.js: Gulp 任务配置文件。
karma.conf.js: Karma 测试配置文件。
package.json: npm 包管理配置文件。
README.md: 项目说明文档。
tsconfig.json: TypeScript 配置文件。

2. 项目的启动文件介绍

`index.html`

<!DOCTYPE html>
<html>
<head>
  <title>ng-table Demo</title>
  <link rel="stylesheet" href="../dist/ng-table.css">
</head>
<body ng-app="app">
  <script src="systemjs.config.js"></script>
  <script>
    System.import('app');
  </script>
</body>
</html>

`systemjs.config.js`

(function(global) {
  System.config({
    paths: {
      'npm:': 'node_modules/'
    },
    map: {
      app: 'app',
      '@angular/core': 'npm:@angular/core/bundles/core.umd.js',
      '@angular/common': 'npm:@angular/common/bundles/common.umd.js',
      '@angular/compiler': 'npm:@angular/compiler/bundles/compiler.umd.js',
      '@angular/platform-browser': 'npm:@angular/platform-browser/bundles/platform-browser.umd.js',
      '@angular/platform-browser-dynamic': 'npm:@angular/platform-browser-dynamic/bundles/platform-browser-dynamic.umd.js',
      'ng-table': 'dist/ng-table.js'
    },
    packages: {
      app: {
        main: './main.js',
        defaultExtension: 'js'
      }
    }
  });
})(this);

3. 项目的配置文件介绍

`package.json`

{
  "name": "ng-table",
  "version": "1.0.0",
  "description": "Angular table directive",
  "main": "dist/ng-table.js",
  "scripts": {
    "build": "gulp build",
    "test": "karma start karma.conf.js"
  },
  "repository": {
    "type": "git",
    "url": "git+https://github.com/esvit/ng-table.git"
  },
  "author": "Vitalii Savchuk <esvit666@gmail.com>",
  "license": "MIT",
  "bugs": {
    "url": "https

ng-tableSimple table with sorting and filtering on AngularJS项目地址:https://gitcode.com/gh_mirrors/ng/ng-table