Angular-Ngrx-Nx 真实世界示例应用教程

Angular-Ngrx-Nx 真实世界示例应用教程

angular-ngrx-nx-realworld-example-appReal world application built with Angular 17, NgRx 17, nrwl/nx 17项目地址:https://gitcode.com/gh_mirrors/an/angular-ngrx-nx-realworld-example-app

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

angular-ngrx-nx-realworld-example-app/
├── apps/
│   └── conduit/
│       ├── src/
│       │   ├── app/
│       │   │   ├── app.component.ts
│       │   │   ├── app.component.html
│       │   │   ├── app.component.css
│       │   │   └── ...
│       │   └── ...
│       └── ...
├── libs/
│   ├── auth/
│   │   ├── data-access/
│   │   │   ├── auth.store.ts
│   │   │   ├── local-storage-jwt.service.ts
│   │   │   └── ...
│   │   └── ...
│   └── ...
├── tools/
│   └── ...
├── editorconfig
├── env
├── eslintignore
├── eslintrc.json
├── gitignore
├── prettierignore
├── prettierrc
├── LICENSE.txt
├── README.md
├── jest.config.ts
├── jest-preset.js
├── logo.png
├── migrations.json
├── nx.json
├── package-lock.json
├── package.json
├── renovate.json
└── tsconfig.base.json

目录结构介绍

• apps/: 包含主要的应用程序，例如 conduit。
• libs/: 包含共享的库，例如 auth 库。
• tools/: 包含项目使用的工具和脚本。
• editorconfig, env, eslintignore, eslintrc.json, gitignore, prettierignore, prettierrc: 配置文件。
• LICENSE.txt, README.md: 许可证和项目说明文档。
• jest.config.ts, jest-preset.js: Jest 测试配置。
• logo.png: 项目图标。
• migrations.json: 迁移配置。
• nx.json: Nx 配置文件。
• package-lock.json, package.json: npm 包管理文件。
• renovate.json: Renovate 配置文件。
• tsconfig.base.json: TypeScript 配置文件。

2. 项目的启动文件介绍

启动文件

• apps/conduit/src/app/app.component.ts: 应用程序的根组件。

import { AsyncPipe } from '@angular/common';
import { ChangeDetectionStrategy, Component, OnInit, inject } from '@angular/core';
import { RouterModule } from '@angular/router';
import { AuthStore, LocalStorageJwtService } from '@realworld/auth/data-access';
import { filter, take } from 'rxjs/operators';
import { FooterComponent } from ' /layout/footer/footer.component';
import { NavbarComponent } from ' /layout/navbar/navbar.component';

@Component({
  selector: 'cdt-root',
  standalone: true,
  templateUrl: ' /app.component.html',
  styleUrls: [' /app.component.css'],
  imports: [FooterComponent, NavbarComponent, RouterModule, AsyncPipe],
  changeDetection: ChangeDetectionStrategy.OnPush,
})
export class AppComponent implements OnInit {
  private authStore = inject(AuthStore);
  private localStorageJwtService = inject(LocalStorageJwtService);

  ngOnInit() {
    this.localStorageJwtService.getItem().pipe(
      filter(token => !!token),
      take(1)
    ).subscribe(token => this.authStore.login(token));
  }
}

启动文件介绍

• app.component.ts: 定义了应用程序的根组件，包含路由、认证状态管理和布局组件。

3. 项目的配置文件介绍

配置文件

• nx.json: Nx 工作区配置文件。
• tsconfig.base.json: TypeScript 基础配置文件。
• package.json: npm 包管理文件。
• jest.config.ts: Jest 测试配置文件。
• eslintrc.json: ESLint 配置文件。
• prettierrc: Prettier 代码格式化配置文件。

配置文件介绍

angular-ngrx-nx-realworld-example-appReal world application built with Angular 17, NgRx 17, nrwl/nx 17项目地址:https://gitcode.com/gh_mirrors/an/angular-ngrx-nx-realworld-example-app