Angular standlone引入angular-in-memory-web-api

1. 安装angular-in-memory-web-api

点击查看代码

npm i angular-in-memory-web-api --save

版本选择与自己相同的angular版本  例如我的angular是18版本

点击查看代码

npm i angular-in-memory-web-api@0.18.0 --save

2. 项目内配置
standlone没有app.module.ts文件
直接在app.config.ts文件中配置即可

点击查看代码

import { ApplicationConfig, importProvidersFrom, provideZoneChangeDetection } from '@angular/core';
import { provideRouter } from '@angular/router';

import { routes } from './app.routes';
import { MemoryDataService } from './MemoryData';
import { provideHttpClient } from '@angular/common/http';
import { InMemoryBackendConfig, InMemoryWebApiModule } from 'angular-in-memory-web-api';


export const appConfig: ApplicationConfig = {
  providers:
    [
      provideZoneChangeDetection({ eventCoalescing: true }),
      provideRouter(routes),
      provideHttpClient(),
      importProvidersFrom(InMemoryWebApiModule.forRoot(MemoryDataService, { delay: 3000 }))

    ]
};

引入
import { provideHttpClient } from '@angular/common/http';
import { InMemoryBackendConfig, InMemoryWebApiModule } from 'angular-in-memory-web-api';

importProvidersFrom(InMemoryWebApiModule.forRoot(MemoryDataService, { delay: 3000 }))
这里forRoot里面的service是自己编写的服务文件

点击查看代码

import { Injectable } from '@angular/core';
import { InMemoryDbService } from 'angular-in-memory-web-api';

@Injectable({
    providedIn: 'root',
})
export class MemoryDataService implements InMemoryDbService {
    createDb() {
        const users = [
            { id: 1, name: 'Alice' },
            { id: 2, name: 'Bob' },
            { id: 3, name: 'Charlie bob' },
            { id: 4, name: 'Charlie test' },
            { id: 5, name: 'Charlie hong' },
            { id: 6, name: 'Charlie emial' },
            { id: 7, name: 'Charlie apple' },
            { id: 8, name: 'Charlie lo' },
            { id: 9, name: 'Charlie ee' },
            { id: 10, name: 'Charlie av' },
            { id: 11, name: 'Charlie sds' },
            { id: 12, name: 'Charlie sdsq' },
            { id: 13, name: 'Charliea sa' },
            { id: 14, name: 'Charlie asasxq' },
        ];
        return { users };
    }
}

3. 请求格式

点击查看代码

import { Injectable, Optional } from '@angular/core';
import { User } from '../entity/User';
import { Observable, of, pipe } from 'rxjs';
import { MessageService } from './message.service';
import { HttpClient, HttpHeaders } from '@angular/common/http';

import { catchError, map, tap } from 'rxjs/operators'

@Injectable({
  providedIn: 'root'

})
export class UserService {

  private usersURL = "api/users";  //url
  private httpOptions: Optional = {
    Headers: new HttpHeaders({ 'Content-type': 'application/json' })
  }

  constructor(private messageService: MessageService, private http: HttpClient) { }

  //获取用户列表
  getUsers(): Observable<User[]> {
    // this.messageService.add('Userservice: 已经获取到用户列表！')
    // return of(USERS);

    // this.log('已经获取到用户列表')
    return this.http.get<User[]>(this.usersURL)
      .pipe(
        tap(users => this.log('fetched users')),
        catchError(this.handleError('getUsers', []))
      )
  }

  private handleError<T>(operation = 'operation', result?: T) {
    return (error: any): Observable<T> => {
      console.log(error);
      this.log(`${operation} failed: ${error.message}`)
      return of(result as T)

    }
  }
  //根据id获取指定用户
  getUsersById(id: number): Observable<User> {
    // this.messageService.add('已经获取到用户！')
    const url = `${this.usersURL}/${id}`
    return this.http.get<User>(url)
      .pipe
      (
        tap(user => this.log(`已找到用户！ ${user.id}`)),
        catchError(this.handleError<User>(`getUsersById(${id})`))
      )
  }
  //修改用户数据
  updateUser(user: User): Observable<any> {
    return this.http.put(this.usersURL, user, this.httpOptions)
      .pipe(
        tap(_ => this.log(`update user id=${user.id}`)),
        catchError(this.handleError<any>('updateUser'))
      )
  }
  //添加用户
  addUser(user: User): Observable<User> {
    return this.http.post<User>(this.usersURL, user, this.httpOptions)
      .pipe(
        tap(user => this.log(`added user id=${user.id}`)),
        catchError(this.handleError<User>('addUser'))
      )
  }
  //删除用户
  deleteUser(user: User | number): Observable<User> {
    const id = typeof user === 'number' ? user : user.id
    const url = `${this.usersURL}/${id}`
    return this.http.delete<User>(url, this.httpOptions)
      .pipe(
        tap(_ => this.log(`deleted user id=${id}`)),
        catchError(this.handleError<User>('deleteUser'))
      )
  }
  //搜索用户数据
  search(term: string): Observable<User[]> {
    if (!term.trim()) return of([])
    return this.http.get<User[]>(`${this.usersURL}/?name=${term}`)
      .pipe(
        tap(_ => this.log(`search user term=${term}`)),
        catchError(this.handleError<User[]>('search', []))
      )
  }
  private log(message: string) {
    this, this.messageService.add('userservice:' + message)
  }
}