Angular 项目框架更新

Photo by Harley-Davidson on Unsplash

Angular 作为一个版本变化比较快的框架,其所应用的项目保持相应的更新是非常重要的一个任务。新的版本往往带来了新的功能,修补了一些漏洞,官方文档也建议及时对 Angular 项目进行更新。

安装 @angular/cli

@angular/cli 可以让更新变得更加容易。首先,我们需要安装 @angular/cli 的最新版本,这样我们可以拥有此工具的最新功能。

ng update 更新项目

使用 @angular/cli 的 ng update 指令可以方便地更新项目。键入此指令时,由于一些包的依赖与即将升级的 Angular 版本有冲突,此时它会提示你是否需要强制执行。这边推荐使用 ng update –force 指令强制升级,然后再依次更新有冲突的依赖包,最后检查一下项目运行是否正常。

推荐使用 nrm taobao 来加快更新的速度。

Angular 指令快速入门

Photo by Daniel Radford on Unsplash

声明

本文重点不再讨论 Angular 中内置指令以及如何自定义指令。而是想让读者知道 Angular 中指令的作用,它解决了什么问题,以及指令与组件的区别。

何为指令

Angular 中指令是一个非常特殊的存在,从使用方法来看,指令类似元素的一个自定义属性,为元素或者组件提供特定的功能。在大多数场景下,指令不对作用的宿主元素本身的类型做任何假设,它无需知道宿主元素中包含了那些内容,宿主元素上有哪些属性,也不依赖宿主上的其他功能。换句话说,若我们想给 HTML 元素或者组件拓展某项功能,且这项功能相对独立,就可以采用指令来实现。

继续阅读Angular 指令快速入门

Angular 指令之 NgFor 教程

声明

NgFor 内建指令可以帮助开发者快速迭代某个数组来创建多个 DOM 元素。在实际开发中,我发现全面掌握 NgFor 的用法可以很好地帮助我们应对更加复杂的场景,甚至能实现性能的提升。此教程中涉及到了 Angular 变化检测机制的内容,对于这一部分感兴趣的朋友可以参看我其他的博文

继续阅读Angular 指令之 NgFor 教程

浅谈 Angular 变化检测机制

Photo by Roman Kraft on Unsplash

声明

变化检测(Change Detection)也叫脏值检测(Dirty Detection),都是指 Angular 中检测组件中数据变化的机制。由于变化检测与 Angular 若干生命周期有很强的关联,本文会结合两者做出说明。

继续阅读浅谈 Angular 变化检测机制

Angular NgIf 指令原理

Photo by Olivier Collet on Unsplash

声明

本节内容假设您具有基本的组件概念、了解 Angular 内置组件的基本用法以及结构型指令与属性型指令的区别。关于指令是什么/有什么作用,可以参看这篇指令二三问

前言

在 Angular 入门系列教程中,已经提到 Angular 的一些内建指令。其中利用内建的结构型指令,我们可以方便地来控制视图的创建和销毁。本文从 ngIf 源码入手,带你了解 ngIf 的解析过程、页面视图增删原理,从而掌握动态增删视图的基本方法。

继续阅读Angular NgIf 指令原理

Angular 路由快速教程

Photo by Harley-Davidson on Unsplash

声明

这个教程的目标是让初学者快速掌握 Angular 路由的基本使用方法,避免复杂的概念影响对路由基本用法的认识,只涉及路由模块导入、路由匹配算法、路由跳转指令,并不涉及守护路由、子路由,解析路由(resolver),路由参数的获取等高级路由知识 。

前言

路由是一个 Web 应用不可缺少的一环, 路由的存在可以让用户对应用中感兴趣的内容进行收藏方便下次访问。 在单页应用程序(SPA)中,路由必须由前端来处理。Angualr 提供了功能强大的路由模块,可以帮我们完成复杂的页面路由需求。

对于一个正常的 Web 应用来说,当一个路由发生时,会触发两个方面的变化,一是浏览器中的地址会发生改变,二是页面局部或者全部会发生改变。为了做到这两点,Angular 通过监听浏览器地址的改变来触发页面的渲染。这其中的关键要数 “占位符” 和路由匹配的用法!

那就让我们开始吧~

继续阅读Angular 路由快速教程

Agular 组件交互(三)投影

Photo by Cristofer Jeschke on Unsplash

@Input @Output 解决了组件中控制层数据传递的问题,但是在很多场合,我们需要解决组件中视图层(模板)传递的问题。比如,我们希望将父组件的模板内容传递给子组件,由子组件进行展示或者处理。在 Angular 中,这种视图层(模板)传递的方法也被称为投影(Project)。

继续阅读Agular 组件交互(三)投影