# Angular - SPA单页Web应用

通过HTML、CSS及JavaScript学习及实践应用，为了进一步提高工作效率、数据信息渲染、用户体验等等诸多“借口”，进而衍生出web前端框架，Angular就是其中之一，这里就不对angular1.x（angularJs）做说明了，我们就从Angular2 开始，目前已经Angular21.x，升级的目的也是与时俱进，为其表现得更为友好而已；这也就说所谓的单页Web应用（SPA）,市面上的前端框架很多，不论学习哪一个，HTML、CSS与JavaScript依然是基础，基础扎实了，能够进一步学好每一个前端框架。

Canonical: https://www.deathghost.cn/catalog/angular

Keywords: Angular, NG(ng), Angular2.x, Angular22.x, Angular.dev, 最新Angular, SPA, 单页面, 单页面应用框架, 前端框架, web框架, web前端框架

## Angular

SPA单页Web应用

- [Angular自定义预加载策略](https://www.deathghost.cn/article/angular/88)
  2021-01-07 20:52:43 - 预加载是介于直接加载与懒加载的一种方式。懒加载是为了降低初始化所需时间，预加载是为了提升即将进入路由模块时间。
- [Angular CDK 工具包 Clipboard 剪贴板](https://www.deathghost.cn/article/angular/87)
  2020-12-22 22:08:08 - Web页面中偶尔会使用到快捷复制功能操作，更常见的可能是后台数据管理项目中。如用户姓名、电话与地址，因布局结构设计，不便于一次性复制这些数据，这时就需要一个复制按钮（小图标）进行操作。下面看看Angular工具里的Clipboard包应用。
- [Angular 组件交互 ngOnChanges 监听某一属性值变更](https://www.deathghost.cn/article/angular/82)
  2020-09-08 20:23:40 - 我们在实际项目中会拆分各个功能模块，以便页面复用，避免重复工作。那么，这里就涉及到组件之间的交互问题。例如常使用的，输入型数据绑定、setter截听、ngOnChanges()截听以及通过创建引入服务来通讯。这篇文章着重看下关于ngOnChanges()方法监听数据变更。
- [初略Angular应用安装@angular/pwa](https://www.deathghost.cn/article/angular/76)
  2020-06-02 21:51:24 - PWA（Progressive web apps，渐进式 Web 应用）运用现代的 Web API 以及传统的渐进式增强策略来创建跨平台 Web 应用程序。这些应用无处不在、功能丰富，使其具有与原生应用相同的用户体验优势。
- [Angular路由预加载](https://www.deathghost.cn/article/angular/73)
  2020-05-06 23:25:23 - 我们知道Angular路由能让用户从一个视图导航到另一个视图，随着项目的发展会生产N多个模块，我们通过惰性加载（懒加载）将其处理，而预加载是介于二者之间，就是在初始化工作完成后所需的模块预先加载完成，可供用户快速访问。
- [Angular 装饰器 HostListener 监听DOM事件](https://www.deathghost.cn/article/angular/71)
  2020-04-17 17:45:47 - Angular 装饰器 HostListener 监听DOM事件，本例监听回车键（Enter）与换行按键（Ctrl Enter）事件处理发送消息示例。
- [Angular 管道之异步数据读取转换](https://www.deathghost.cn/article/angular/58)
  2019-09-22 01:00:49 - async 管道会订阅一个 Observable 或 Promise，并返回它发出的最近一个值。 当新值到来时，async 管道就会把该组件标记为需要进行变更检测。当组件被销毁时，async 管道就会自动取消订阅，以消除潜在的内存泄露问题。
- [Angular日期在TypeScript中格式化转换应用](https://www.deathghost.cn/article/angular/54)
  2019-07-25 21:48:55 - 组件模板中我们常常使用Angular内置管道DatePipe将其日期格式化，如同{{ startTime | date:'yyyy-MM-dd' }}这般操作，即可转换为字符串格式。那么在TS文件中我们也可以通过DatePipe或formatDate方法将其格式化。
- [Angular 父组件与子组件通讯之共享服务](https://www.deathghost.cn/article/angular/50)
  2019-06-28 22:32:36 - 父组件和它的子组件共享同一个服务，利用该服务在组件家族内部实现双向通讯。该服务实例的作用域被限制在父组件和其子组件内。这个组件子树之外的组件将无法访问该服务或者与它们通讯。
- [通过 angular CDK 实现页面元素拖放](https://www.deathghost.cn/article/angular/46)
  2019-03-30 16:00:04 - 通过导入@angular/cdk/drag-drop模块我们可以轻松实现元素在页面中得拖放功能，如元素在页面中随意拖动、在特定区域内拖动亦或对列表进行拖放排序等等。
- [angular操作DOM中的滚动条 自动滚动到底部示例](https://www.deathghost.cn/article/angular/39)
  2018-11-01 21:20:45 - 实例应用中根据需求对DOM进行操作，这篇文章主要介绍angular如何操作DOM中元素的方法。本篇文章以发送消息为例，让滚动条实时滑动到最新消息位置（即最底部）。
- [Angular前端应用中HttpParams以json格式进行http多参数传递示例](https://www.deathghost.cn/article/angular/36)
  2018-09-11 23:25:27 - 大多数前端应用都需要通过 HTTP 协议与后端服务器通讯。现代浏览器支持使用两种不同的 API 发起 HTTP 请求：XMLHttpRequest 接口和 fetch() API。HttpClient 类基于浏览器提供的 XMLHttpRequest 接口，为 angular 应用程序提供了一个简化的 api 来实现 http 客户端功能；这里记录下项目中实际应用的基础方法使用。
- [Angular应用中通过socket.io-client搭建实时通信 前端实例安装配置方法](https://www.deathghost.cn/article/angular/35)
  2018-09-06 22:23:56 - WebSocket是HTML5开始提供的一种在单个 TCP 连接上进行全双工通讯的协议，通过它，我们可以双向会话；本篇文章主要介绍socket.io-client在angular项目中的应用，也就是WebSocket的一种集成封装式应用。
- [Angular6.x安装配置本地加载汉化版TinyMCE Angular集成配置HTML富文本编辑器方法](https://www.deathghost.cn/article/angular/31)
  2018-08-07 22:28:32 - 项目中时常会应用到HTML富文本编辑器，例如：后台项目中文章内容管理、产品详情信息管理、评论回复等功能版块都会多多少少应用到；所以在这里整理下配置安装过程，TinyMCE相对配置简单，仅供参考。
- [Angular路由惰性加载实例运用 懒加载路由配置 提升加载速度 优化用户体验](https://www.deathghost.cn/article/angular/29)
  2018-07-30 20:55:15 - 在angular实际项目应用中，随着业务需求的不断增加，难免整个项目模块变的比较庞大，致使在首次加载过程中比较耗时，等待时间过长影响用户体验；因此呢，我们就需要运用angular中的惰性加载路由配置使其按需加载，也就是说，当我们导航到该路由时再对其动态加载。
- [Angular 路由快照 使用RouteReuseStrategy路由复用策略暂存路由状态](https://www.deathghost.cn/article/angular/28)
  2018-07-21 00:36:44 - Angular(angular2 ) RouteReuseStrategy使用情景，后台数据信息管理类系统往往会用到页面临时状态存储，通常表现为Tab切换形式；临时性离开页面存储当前页面状态，以便重新返回该页面恢复其状态；也就是进入路由时，是否初始化组件。