Angular

前面我们已经完成了一个简单的演示项目，大致了解了 Angular 的开发流程。现在，我们要回过头来，看看 Angular 程序是如何从代码显示到浏览器中的。 引导就是把 Angular 程序初始化并且加载到浏览器显示的过程。 总体来说，Angular 程序的引导过程大致分为一下几个步骤： 下面我们一步一步看，整个引导过程是怎样的。 首先，index.html 被浏览器下载到本地并且开始解析。经过编 ...

前面我们介绍了有关 Angular 路由的基本内容。现在，我们就可以完成我们所需要的部分了： 这应该是我们之前的需求列表中最后一部分了。 为了添加路由，首先，我们应该创建一个路由模块。 这里，我们将空路由''映射到TodoListComponent，同时添加了一个:status路由，也映射到这一组件。之所以这样设计，是因为按照需求里面的要求，路由只是为了切换待办事项的列表显示。那么，这意味着路由应 ...

最初，每个网页的都是独立的 HTML 页面。当我们打开一个网页时，浏览器需要向服务器请求页面，并把接收到的 HTML 文档渲染显示出来。当你点击一个链接，跳转到另外的页面时，浏览器需要向服务器请求新的页面，然后再渲染显示出来。 不过现在这种传统的显示已经不那么常见了。越来越多的网站使用 JavaScript 去动态加载页面内容。当你在站点内部点击按钮导航时，并不会重新获取整个页面，而是仅仅去请求内 ...

上一章我们实现了 Mark all as completed 选择框的相关操作。接下来，我们要实现的是另外一个需求： 很明显，计数器的值应该根据todoService.#todoList数组计算而来。那么，我们就在TodoService里面增加一个属性： 这里，我们使用了 TypeScript 的 getter 函数，返回#todoList中所有completed属性为false的待办事项的个数。 ...

上一章我们完成了待办事项的增加、删除、修改、完成等操作。在开始下面的需求之前，我们要解决一个之前遗留的 bug。 bug 的触发方式是，首先添加若干待办事项，然后利用删除按钮全部删除，此时，不能再添加新的待办事项。输入之后，列表始终为空。 下面我们先看一下增加待办事项的操作： 我们看到，每次新增待办事项，其实是向this.todoService.todoList数组追加元素。这样没有问题，而且符合 ...

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

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

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