Angular standlone引入angular-in-memory-web-api
<p><strong>1. 安装angular-in-memory-web-api</strong></p><details>
<summary>点击查看代码</summary>
<pre><code>npm i angular-in-memory-web-api --save
</code></pre>
</details>
版本选择与自己相同的angular版本
!(https://img2024.cnblogs.com/blog/3674671/202507/3674671-20250712130148013-1877103602.png)
例如我的angular是18版本
<details>
<summary>点击查看代码</summary>
<pre><code>npm i angular-in-memory-web-api@0.18.0 --save
</code></pre>
</details>
<p><strong>2.项目内配置</strong><br>
standlone没有app.module.ts文件<br>
直接在app.config.ts文件中配置即可</p>
<details>
<summary>点击查看代码</summary>
<pre><code>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 }))
]
};
</code></pre>
</details>
<p>引入<br>
import { provideHttpClient } from '@angular/common/http';<br>
import { InMemoryBackendConfig, InMemoryWebApiModule } from 'angular-in-memory-web-api';</p>
<p>importProvidersFrom(InMemoryWebApiModule.forRoot(MemoryDataService, { delay: 3000 }))<br>
这里forRoot里面的service是自己编写的服务文件</p>
<details>
<summary>点击查看代码</summary>
<pre><code>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 };
}
}
</code></pre>
</details>
<p><strong>3.请求格式</strong></p>
<details>
<summary>点击查看代码</summary>
<pre><code>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)
}
}
</code></pre>
</details><br><br>
来源：https://www.cnblogs.com/uly22/p/18980465
頁:
[1]