Ngx Loading Bar 项目教程

Ngx Loading Bar 项目教程

ngx-loading-barAutomatic page loading / progress bar for Angular项目地址:https://gitcode.com/gh_mirrors/ng/ngx-loading-bar

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

Ngx Loading Bar 项目的目录结构如下：

ngx-loading-bar/
├── e2e/
│   ├── src/
│   │   ├── app.e2e-spec.ts
│   │   └── app.po.ts
│   ├── protractor.conf.js
│   └── tsconfig.json
├── projects/
│   ├── ngx-loading-bar/
│   │   ├── src/
│   │   │   ├── lib/
│   │   │   │   ├── core/
│   │   │   │   ├── http-client/
│   │   │   │   ├── router/
│   │   │   │   └── index.ts
│   │   │   ├── public-api.ts
│   │   │   └── test.ts
│   │   ├── ng-package.json
│   │   ├── package.json
│   │   └── tsconfig.lib.json
│   └── demo/
│       ├── src/
│       │   ├── app/
│       │   │   ├── app.component.html
│       │   │   ├── app.component.scss
│       │   │   ├── app.component.spec.ts
│       │   │   ├── app.component.ts
│       │   │   └── app.module.ts
│       │   ├── assets/
│       │   ├── environments/
│       │   ├── index.html
│       │   ├── main.ts
│       │   ├── styles.scss
│       │   └── test.ts
│       ├── angular.json
│       ├── package.json
│       ├── tsconfig.app.json
│       └── tsconfig.json
├── src/
│   ├── app/
│   │   ├── app.component.html
│   │   ├── app.component.scss
│   │   ├── app.component.spec.ts
│   │   ├── app.component.ts
│   │   └── app.module.ts
│   ├── assets/
│   ├── environments/
│   ├── index.html
│   ├── main.ts
│   ├── styles.scss
│   └── test.ts
├── angular.json
├── package.json
├── tsconfig.json
└── tsconfig.spec.json

目录结构介绍

• e2e/: 包含端到端测试的文件。
• projects/: 包含多个子项目，其中 ngx-loading-bar/ 是核心库，demo/ 是示例应用。
  • ngx-loading-bar/src/lib/: 包含核心库的主要功能模块。
  • demo/src/app/: 包含示例应用的主要组件和模块。
• src/: 包含主应用的源代码。
• angular.json: Angular 项目的配置文件。
• package.json: 项目的依赖和脚本配置文件。
• tsconfig.json: TypeScript 编译配置文件。

2. 项目的启动文件介绍

主应用启动文件

• src/main.ts: 主应用的入口文件，负责引导 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));

示例应用启动文件

• projects/demo/src/main.ts: 示例应用的入口文件，负责引导示例应用。

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 配置文件

• `angular.

ngx-loading-barAutomatic page loading / progress bar for Angular项目地址:https://gitcode.com/gh_mirrors/ng/ngx-loading-bar