上一章我们简单地把 TodoMVC 的组件进行了拆分。 TodoMVC 很明显是一个以数据为中心的应用：整个系统围绕着待办列表，界面上几乎所有操作都是针对待办列表进行一系列操作。因此，我们可以使用数组保存这个待办列表，将页面显示绑定到列表中的数据，通过修改数据实现页面显示的修改。这个数组应该是全局可用的，方便我们对其进行管理。虽然 JavaScript 提供了全局变量供我们使用，但本着能不用就不用 ...

前面我们已经简单学习过 Angular 的一些核心内容，下面我们将完成一个演示项目，来看看在实际工程中，这些内容如何有机的整合在一起。 我们选择的是 TodoMVC。TodoMVC 是一个开源 JavaScript 项目框架。不同于一个项目或者一个开发库，TodoMVC 提供了一个应用程序的标准范本需求，要求使用各种不同的 MV* 框架实现这么一个 Todo 应用。 TodoMVC 是一个开源 J ...

前面我们已经介绍过组件。我们说过，组件是 Angular 的核心概念之一。Angular 的一切都是围绕着组件构建的。Angular 将组件定义为一种展示手段：用户看到的就是组件。但是，对于一个完整的应用，仅有展示显然是不够的：我们还有一系列业务逻辑和与之相匹配的数据。Angular 建议，组件应该只是对数据的展示，不应该持有数据。数据和业务逻辑应该交给服务。 所谓服务 service，是一个典型 ...

前面我们介绍了ngIf和ngFor，作为某种一一对应的关系，今天我们将介绍另外一个结构指令：ngSwitch。ngSwitch完全可以使用ngIf替代，只不过在某一条件具有多种情形的时候，ngSwitch会更加方便使用。ngSwitch允许根据定义好的条件显示一个或多个 DOM 元素。 ngSwitch实际包含了三个指令，下面展示了ngSwitch的基本语法： ngSwitch作用于contain ...

Angular 的指令用于维护 DOM 结构。使用指令，你可以改变 DOM 元素的样式、行为或者布局。Angular 提供了三种指令： 组件指令 结构指令 属性指令 我们前面介绍过的组件，就是一种特殊的指令。如果你去阅读 Angular 的源代码，在 packages/core/src/metadata/directives.ts 中有这么一段足以说明问题： 结构指令用于改变 DOM 结构，比如增 ...