Zone.js 入门

Photo by Sebastian Unrau on Unsplash

声明

本文是 Zone.js 源码解析的前置章节。在这里,我会简单介绍 Zone.js 要解决

的问题、简单原理以及基本用法。我相信这是我们探索源码前的必备工作。假

如您已经有了 Zone.js 的相关应用经验,就可以轻松加愉快的直接略过本章,

和我一起来探索 Zone.js 的具体实现。

继续阅读Zone.js 入门

Angular 结构型指令原理

Photo by Olivier Collet on Unsplash

声明

本节内容假设您具有基本的组件概念、了解 Angular 内置组件的基本用法以及

结构型指令与属性型指令的区别。

前言

在 Angular 入门系列教程中,已经提到 Angular 的一些内建指令。其中利用

内建的结构型指令,我们可以方便地来控制视图的创建和销毁。本文从 ngIf 源

码入手,带你了解 ngIf 的解析过程、页面视图增删原理,从而掌握动态增删视

图的基本方法。

继续阅读Angular 结构型指令原理

Angular Resolver 教程

Photo by Kristine Weilert on Unsplash

声明

本教程是 Angular 路由快速教程的后续章节。假设您已经拥有了一些 Angular

相关的基础路由知识,了解了 Angular 路由模块常见路由组件以及路由匹配的

基本方法,尚不清楚的同学建议复习一下相关知识

Resolver —— 路由的新机制

在很多时候,我们会在组件初始化的时候(ngOnInit 消息钩子)中预先抓取数

据。但是假如数据抓取耗时较长,会导致在组件渲染的时候数据还没拿到渲染

的数据(多数情况会在控制台报错)。为了避免这种情况,就要用到 Resolver

在路由到组件之前做数据的预抓取。

同时,相比于直接在组件中注入服务,Resolver 还可以将数据抓取与其他业务

逻辑分离开来,更加利于项目的维护和扩展。这种做法也被称为遵循 “单一职责

原则(single responsibility principle )”。

Angular(6+) 中配置一个 Resolver 也非常简单。只需在路由匹配表中,为

某一条路由的 resolve 属性指定一个满足某种格式的服务,就可以轻松实现数

据的预抓取。

继续阅读Angular Resolver 教程