Angular Generic Table 使用教程

Angular Generic Table 使用教程

angular-generic-tableA generic table for Angular 2+. Generic table uses standard markup for tables ie. table, tr and td elements etc. and has support for expanding rows, global search, filters, sorting, pagination, export to CSV, column clicks, custom column rendering, custom export values.项目地址:https://gitcode.com/gh_mirrors/an/angular-generic-table

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

angular-generic-table/
├── e2e/
│   ├── src/
│   │   ├── app.e2e-spec.ts
│   │   └── app.po.ts
│   ├── protractor.conf.js
│   └── tsconfig.json
├── src/
│   ├── app/
│   │   ├── app.component.css
│   │   ├── app.component.html
│   │   ├── app.component.spec.ts
│   │   ├── app.component.ts
│   │   └── app.module.ts
│   ├── assets/
│   ├── environments/
│   │   ├── environment.prod.ts
│   │   └── environment.ts
│   ├── index.html
│   ├── main.ts
│   ├── styles.css
│   ├── test.ts
│   ├── tsconfig.app.json
│   ├── tsconfig.spec.json
│   └── tslint.json
├── .editorconfig
├── .gitignore
├── .npmignore
├── .prettierignore
├── .travis.yml
├── CHANGELOG.md
├── CODE_OF_CONDUCT.md
├── LICENSE
├── README.md
├── angular.json
├── cypress.json
├── karma.conf.js
├── package-lock.json
├── package.json
├── prettier.config.js
├── tsconfig.json
└── tslint.json

目录结构介绍

• e2e/: 端到端测试目录，包含测试脚本和配置文件。
• src/: 源代码目录，包含应用的主要代码。
  • app/: 应用的主要组件和模块。
  • assets/: 静态资源文件。
  • environments/: 环境配置文件。
  • index.html: 应用的入口HTML文件。
  • main.ts: 应用的入口TypeScript文件。
  • styles.css: 全局样式文件。
  • test.ts: 测试配置文件。
• .editorconfig: 编辑器配置文件。
• .gitignore: Git忽略文件配置。
• .npmignore: npm忽略文件配置。
• .prettierignore: Prettier忽略文件配置。
• .travis.yml: Travis CI配置文件。
• CHANGELOG.md: 更新日志。
• CODE_OF_CONDUCT.md: 行为准则。
• LICENSE: 许可证文件。
• README.md: 项目说明文档。
• angular.json: Angular CLI配置文件。
• cypress.json: Cypress测试配置文件。
• karma.conf.js: Karma测试运行器配置文件。
• package-lock.json: npm锁文件。
• package.json: 项目依赖和脚本配置文件。
• prettier.config.js: Prettier格式化配置文件。
• tsconfig.json: TypeScript配置文件。
• tslint.json: TSLint配置文件。

2. 项目的启动文件介绍

• main.ts: 这是Angular应用的入口文件，负责引导Angular模块。

import { enableProdMode } from '@angular/core';
import { platformBrowserDynamic } from '@angular/platform-browser-dynamic';

import { AppModule } from './app/app.module';
import { environment } from './environments/environment';

if (environment.production) {
  enableProdMode();
}

platformBrowserDynamic().bootstrapModule(AppModule)
  .catch(err => console.error(err));

3. 项目的配置文件介绍

• angular.json: Angular CLI的配置文件，包含项目构建、开发服务器、测试等配置。

{
  "$schema": "./node_modules/@angular/cli/lib/config/schema.json",
  "version": 1,
  "newProjectRoot": "projects",
  "projects": {
    "angular-generic-table": {
      "projectType": "application",
      "schematics": {},
      "root": "",
      "sourceRoot": "src",
      "prefix": "app",
      "architect": {
        "build": {
          "builder": "@angular-devkit/build-angular

angular-generic-tableA generic table for Angular 2+. Generic table uses standard markup for tables ie. table, tr and td elements etc. and has support for expanding rows, global search, filters, sorting, pagination, export to CSV, column clicks, custom column rendering, custom export values.项目地址:https://gitcode.com/gh_mirrors/an/angular-generic-table