qrcode

马上订阅,开启修仙之旅

RxJS 处理多个Http请求

有时候进入某个页面时,我们需要从多个 API 获取数据然后进行页面显示。管理多个异步数据请求会比较困难,但我们可以借助 Angular Http 服务和 RxJS 库提供的功能来实现上述的功能。处理多个请求有多种方式,使用串行或并行的方式。 基础知识mergeMapmergeMap 操作符用于从内部的 Observable 对象中获取值,然后返回给父级流对象。 合并 Observable ...

玩转 Angular 环境变量

对于 “程序猿” 来说,在日常开发过程中,我们经常要与不同的开发环境打交道。在实际的项目的开发过程中,一般至少会有两个环境:开发环境和线上环境,这是很简单的情形。但对于一些项目来说,仅有两个环境是不够,除了开发环境和线上环境之外,可能还会包含测试环境和预发布环境等等。 随着前后端分离开发方式的普及,越来越多的公司采用 Angular、React 和 Vue 等前端的 MV* 框架来开发 SP...

Angular 异常处理

对于 Angular 应用程序,默认的异常处理是在控制台中输出异常,这对于本地开发和测试阶段,是很方便。但这对于线上环境来说,输出到控制台没有多大的意义。一般情况下,我们希望能自动收集线上环境抛出的异常,并上报到指定的异常收集服务器上,以便于对异常信息进行汇总和分析。 针对上述的需求,我们可以利用 Angular 为我们提供的钩子,来实现自定义异常处理器: 12345678910class ...

Ionic 开发之 Ionic Storage 详解

Ionic Storage 是一款基于 localForage 用于 Ionic 应用程序的简单 “键-值” 存储模块,支持 SQLite 开箱即用。该工具可以根据平台自动选择最佳的存储引擎,而不用用户关系具体的使用细节。模块内存储引擎的默认选择顺序是 SQLite,IndexedDB,WebSQL 和 LocalStorage。 在原生应用程序环境中运行时,存储方式会优先使用 SQLite...

RxDB 异常机制

RxDB 是一个由 JavaScript 实现,拥有响应式,离线优先等特性的数据库。它拥有以下特性: 多平台支持:浏览器、Node.js、Electron、Cordova、React-Native 和其它 JavaScript 运行时; 基于 RxJS 的响应式数据处理; 支持客户端与服务端之间的数据备份,兼容 PouchDB,CouchDB 和 IBM Cloudant; 基于易于学习的...

Angular JSONP 详解

一、什么是 JSONPJSONP(JSON with Padding)是数据格式JSON的一种 “使用模式”,可以让网页从别的网域要数据。另一个解决这个问题的新方法是跨来源资源共享。 由于同源策略,一般来说位于 server1.example.com 的网页无法与 server2.example.com 的服务器沟通,而HTML的 script 元素是一个例外。利用 script 元素的这个...

Angular 工具篇之Storybook

Angular 工具篇之Storybook

Storybook 是一个 UI 组件的开发环境。它允许你能够浏览一个组件库,查看每个组件的不同状态,以及支持交互式的方式开发和测试组件。 Storybook 在你的应用程序之外运行。这允许你能够独立的开发 UI 组件,你可以提高组件的可重用性、可测试性和开发速度。你可以快速构建,而无需担心应用程序特定的依赖项。 这里有一些可以参考的特色示例,可以了解 Storybook 的工作原理。Sto...

Angular Title Service 详解

Title Service 简介Angular Title Service 用于获取和设置当前 HTML 文档的标题。Title Service 提供了以下方法: setTitle() getTitle() 首先要使用 Title 服务,我们需要从 @angular/platform-browser 库导入 Title 类,然后利用 Angular 依赖注入的机制,通过构造注入的方式注入...

Angular HttpClient 拦截器

在之前的 Angular 6 HttpClient 快速入门 文章中,我们已经简单介绍了 Http 拦截器。本文将会进一步分析一下 Http 拦截器。拦截器提供了一种用于拦截、修改请求和响应的机制。这个概念与 Node.js 的 Express 框架中间件的概念类似。拦截器提供的这种特性,对于日志、缓存、请求授权来说非常有用。 AuthInterceptor接下来我们先来回顾一下 Angul...

Angular 工具篇之国际化处理

在日常开发过程中,某些项目会要求支持国际化。对于使用 Angular 框架的项目来说,我们可以利用以下第三方库,快速支持国际化: ngx-translate/core ngx-translate/http-loader ngx-translate-extract 环境配置本文将基于上述三个库,简单的介绍一下国际化的处理流程。首先我们来使用 Angular CLI 创建一个新的项目: 1$...