【angular 实务总结00】2023年11月篇

【依赖，依赖注入是什么意思】

“依赖” 和 “依赖注入” 是软件开发中常用的概念，特别是在面向对象编程和模块化设计中。让我们来了解一下它们的含义：

1. 依赖：
   在软件开发中，一个模块或组件可能依赖于其他模块或组件，这表示一个模块需要使用其他模块提供的功能、数据或服务。依赖描述了模块之间的关系，以及它们之间如何协同工作。

例子：
假设你有一个电子商务应用程序，购物车模块可能依赖于产品列表模块，因为购物车需要展示可供购买的产品信息。

2. 依赖注入：
   依赖注入是一种设计模式，用于处理模块或组件之间的依赖关系。在依赖注入中，一个模块不负责直接获取它所依赖的其他模块，而是由外部的容器（通常是框架或容器）负责在需要的时候将依赖项注入到模块中。

例子：
在 Angular 框架中，依赖注入用于自动将服务注入到组件中。例如，一个组件可以通过依赖注入获取一个数据服务，而不必直接实例化这个服务。这使得组件更加解耦和可测试，因为它不需要直接知道和创建它所依赖的服务。

在依赖注入中，通常会有一个容器（如 Angular 的注入器）来管理依赖项的创建和注入。这种方式提高了代码的可维护性、可测试性，同时也支持代码的重用和解耦。

总结：
依赖是指一个模块或组件需要另一个模块或组件提供的功能。依赖注入是一种设计模式，通过外部容器负责将依赖项注入到模块中，从而使得代码更加模块化、可维护和可测试。这种模式在许多现代的软件框架和库中都得到了广泛应用。

import { HttpClient } from ‘@angular/common/http’;
import { Observable, of } from ‘rxjs’;
import { ErrorDto } from ‘…/dto/error-dialog-dto’;
ChatGPT
这是一些 Angular 应用中常见的 TypeScript 导入语句，让我们逐一解释：

import { HttpClient } from ‘@angular/common/http’;：

从 @angular/common/http 模块导入 HttpClient 类。HttpClient 是 Angular 提供的用于进行 HTTP 请求的服务，它提供了一组方法，如 get、post 等，用于与服务器进行通信。
import { Observable, of } from ‘rxjs’;：

从 rxjs 库中导入 Observable 类和 of 操作符。
Observable 是 RxJS（Reactive Extensions for JavaScript）库中的核心类，用于表示一系列异步事件或值。
of 操作符用于创建一个 Observable，它会发出指定的值，然后完成。
import { ErrorDto } from ‘…/dto/error-dialog-dto’;：

从相对路径 …/dto/error-dialog-dto 导入 ErrorDto 类。
这个语句假设在项目的目录结构中存在一个 dto 目录，其中包含一个名为 error-dialog-dto 的 TypeScript 文件，该文件定义了 ErrorDto 类。
这些导入语句显示了一个 Angular 应用中可能会使用的一些核心模块和第三方库，用于处理 HTTP 请求、处理异步操作（使用 RxJS 的 Observable），以及引入自定义的数据传输对象（DTO）。

牢记创建服务后在app。mudle中引入和providers中注册 服务。

1 创建db.json 模拟数据库 可以写自己的数据结构
db.json模拟数据库
{
“posts”: [
{ “id”: 1, “title”: “json-server”, “author”: “typicode” }
],
“comments”: [
{ “id”: 1, “body”: “some comment”, “postId”: 1 }
],
“test204”: [],
“profile”: { “name”: “typicode” }
}

/middleware.JS自定义中间件中
module.exports = (req, res, next) => {
if (req.method === ‘GET’ && req.path === ‘/test204’) {
// 生成一个随机数来决定响应的状态码
const random = Math.random();
if (random < 0.33) {
res.status(204).send(); // 无内容
} else if (random < 0.66) {
res.status(400).send({ message: ‘Bad Request’ }); // 错误请求
} else {
res.status(403).send({ message: ‘Forbidden’ }); // 禁止访问
}
} else {
// 对于所有其他请求，继续使用json-server的默认行为
next();
}
};

、server.js json启动和配置代码

// module.exports = (req, res, next) => {
// // 检查是否是对特定路径的GET请求
// if (req.method === ‘GET’ && req.path === ‘/test204’) {
// // 返回204 No Content响应
// res.status(403).send();
// } else {
// // 对于所有其他请求，继续使用json-server的默认行为
// next();
// }
// };

// module.exports = (req, res, next) => {
// // 检查是否是对特定路径的GET请求
// if (req.method === ‘GET’ && req.path === ‘/test204’) {
// // 返回204 No Content响应
// res.status(403).send();
// } else {
// // 对于所有其他请求，继续使用json-server的默认行为
// next();
// }
// };

// 引入必要的模块
const jsonServer = require(‘json-server’);
const server = jsonServer.create();
const router = jsonServer.router(‘db.json’); // 指向您的 JSON 数据文件
const middlewares = jsonServer.defaults();

// 引入您的自定义中间件
const customMiddleware = require(‘./middleware’); // 假设您的中间件文件名为 custom-middleware.js

// 使用默认中间件
server.use(middlewares);

// 使用您的自定义中间件
server.use(customMiddleware);

// 使用 JSON Server 路由器
server.use(router);

// 设置服务器监听的端口
const PORT = 3000;
server.listen(PORT, () => {
console.log(JSON Server is running on http://localhost:${PORT});
});

2

• 安装json server
  ·需要在上述文件夹中进行安装
  ·np install -g json-server

3 启动模拟服务器

cd 到上述文件的目录 node serve.JS 或者json-server --watch db.json --minddleware.js server.js–port 3000
(可以指定端口)

4 db.JSON 中的每一个数组 视为一个资源

可以通过api访问 或修改

5 local host 3000/test204
·如果test204资源存在 按中间件定义处理
·不存在 返回404 Notfound 错误
【http拦截器】
1 json server 模拟返回http错误代码
2 用一个button 绑定触发器 triggerError()来调用data service 向http发送get请求
3 DataService 是负责发送get请求，使用angular中的httpclient 来实现
4 http拦截器 创建了拦截器来处理及响应
5 用httpInterceptor 接口实现了 intercept方法
并调用了Rxjs中tap catchError操作符来处理正常相应和错误，而且调用了错误处理服务。
6 错误处理服务 定义了一个错误映射
根据http代码，映射到特定的错误消息，id–》当拦截器捕到错误时，调用此服务并显示一个对话框

【装饰器】

装饰器是一种特殊类型的声明，它可以附加到类声明、方法、访问器、属性或参数上，以修改其行为。在 TypeScript 和 Angular 中，装饰器经常用于注释和扩展类、方法、属性等的功能。

在 TypeScript 中，装饰器由 @ 符号后跟一个表达式组成，该表达式被求值为一个函数，该函数在运行时会被调用。在 Angular 中，装饰器主要用于实现依赖注入、组件元数据配置以及其他一些 Angular 特有的功能。

以下是一些常见的 TypeScript 装饰器和 Angular 装饰器的示例：

在 Angular 中，装饰器主要用于配置和增强组件、服务、指令等 Angular 相关的元素。
以下是一些常见的 Angular 装饰器：

1·@Component 装饰器：

用于将类标记为一个 Angular 组件，并提供组件的元数据配置。

import { Component } from ‘@angular/core’;

@Component({
selector: ‘app-my-component’,
template: ‘

My Component

’,
})
export class MyComponent {
// 组件的定义
}
2·@Injectable 装饰器：

用于将类标记为一个可注入的 Angular 服务，并提供服务的元数据配置。
import { Injectable } from ‘@angular/core’;

@Injectable({
providedIn: ‘root’,
})
export class MyService {
// 服务的定义
}

3·@Input 装饰器：

用于声明一个输入属性，使得该属性的值可以从外部传递给组件或指令。
import { Component, Input } from ‘@angular/core’;

@Component({
selector: ‘app-child’,
template: ‘

{{ childMessage }}

’,
})
export class ChildComponent {
@Input() childMessage: string;
}

4·@Output 装饰器：

用于声明一个输出属性，使得组件或指令可以触发事件并向外部传递数据。

import { Component, Output, EventEmitter } from ‘@angular/core’;

@Component({
selector: ‘app-child’,
template: ‘Send Message’,
})
export class ChildComponent {
@Output() messageSent = new EventEmitter();

sendMessage() {
this.messageSent.emit(‘Hello from Child!’);
}
}