标签:

Study

上一章我们实现了待办事项 app 的基本功能,也就是回车添加新的待办。现在,我们要继续完善这个应用。 我们要求,在添加新的待办之后,输入框应该清空。我们当然可以直接通过input的引用,将其value属性设置为空来实现。这在 jQuery 时代是标准做法。但 Angular 应该是数据驱动的,更好的做法是,将input的值绑定到一个变量,通过对这个变量的操作,影响到input的行为。 下面我们在H ...

0 个评论 1.6K 次阅读

前面我们已经说过,Angular 的指令分为组件指令、结构指令和属性指令。我们已经详细介绍过 Angular 为我们内置的三种结构指令:ngIf、ngFor以及ngSwitch。但是,现实世界千变万化,区区几种内置指令不可能满足所有的需求。所以,Angular 也提供了自定义指令的方法。本章我们将介绍如何自定义指令。 自定义属性指令 虽然 Angular 提供了ngClass指令,将 CSS cl ...

1 个评论 1.7K 次阅读

上一章我们介绍了ngIf,这是一个条件选择的指令。与此类似,Angular 还提供了用于循环的指令:ngFor。ngFor指令遍历一个数据集合,;例如数组、列表等,然后在 HTML 模板中为每一个数据项创建一个 HTML 元素。这个指令可以帮助我们以一种优雅的方式,构建一个列表或表格。本章,我们将详细介绍ngFor指令。 ngFor语法 ngFor语法如下: 其中,<html-element ...

0 个评论 1.6K 次阅读

前面的章节我们详细介绍了很多数据绑定,这些数据绑定的方法都是单向数据绑定。除了前面介绍的那些,Angular 还提供了双向数据绑定。 双向数据绑定 双向数据绑定意味着数据是双向流动的:既可以从组件流向视图,又可以从视图流向组件。当我们在组件中修改了数据时,修改后的数据会自动显示在视图;当用户在视图修改了数据时,修改后的数据会自动同步到组件。这一技术对于页面表单尤其有用。 不过仔细回想一下,双向数据 ...

0 个评论 1.5K 次阅读

前面我们已经使用三个章节介绍了从组件到视图的单向数据绑定,本章我们将介绍从视图到组件的单项数据绑定。 从视图到组件 从视图到组件的数据改变,通常是由用户直接或间接触发的,比如用户的键盘输入、鼠标点击等动作,因此这类数据绑定实际就是事件绑定。 事件绑定 Angular 事件绑定使用如下语法: target-event使用()包围,是事件的名字;TemplateStatement是模板语句。当targ ...

0 个评论 1.6K 次阅读

之前反复强调过,Angular 属性绑定使用 property。除此之外,Angular 也提供了几种特殊的绑定:class 和 style 的绑定以及 attribute 绑定。 绑定到 class 和 style 很特殊,是因为它们通常包含 CSS 类列表和其它的样式。这种绑定必须非常灵活,以满足页面的各种样式需要。普通的属性绑定覆盖了全部的 property,但不包括 HTML attrib ...

0 个评论 1.5K 次阅读

上一章我们简单介绍了 Angular 数据绑定。Angular 数据绑定分为单向数据绑定和双向数据绑定。单向数据绑定又包括从组建到视图和从视图到组件;前者又分为插值和属性绑定。 前面我们已经介绍过插值。插值仅接受字符串类型,如果我们需要传递boolean、Array或object就无能为力了。为解决这一问题,Angular 又引入了属性绑定。 属性绑定 属性绑定允许我们将组件的字段绑定到 HTML ...

1 个评论 1.6K 次阅读

本章我们将阐述关于数据绑定的内容。如果没有数据绑定,Angular 组件就没什么用处,因为它不能显示动态数据。除了显示数据,组件还应该能够对用户操作做出响应。数据绑定能够使组件的显示与组件类的数据保持一致:也就是你在界面上看到的数据就是组件保存的数据。 什么是数据绑定? 数据绑定是一种视图与组件之间的数据能够保持一致的技术。用户在界面更新数据,Angular 将变更同步到视图绑定的组件类;组件类的 ...

0 个评论 1.6K 次阅读

本章将介绍 Angular 是如何引导的:我们将知道 Angular 内部是如何工作的。前面我们已经利用 Angular CLI 创建了一个完整的 Angular 项目。这个项目有模板式的代码以及一对配置文件。当我们使用ng serve命令运行时,我们可以看到一个还算不错的页面。那么,从开始启动到这个页面显示到浏览器,Angular 究竟做了什么呢? 引导是初始化或者加载 Angular 应用的技 ...

1 个评论 1.8K 次阅读

上一章我们介绍了 Angular CLI 为我们生成的那些除了源代码的项目相关文件。这一章我们将简单介绍源代码文件。 组件 app.component.ts 是 Angular CLI 为我们生成的组件文件,位于 src/app 目录下,其内容为: 组件是我们应用中最重要的部分。它们代表了应用的视图。所谓视图,就是屏幕上可以看到的区域。以 app.component.ts 为例,这个文件通常包含三 ...

2 评论 1.8K 次阅读
  • 1
  • 2

关于我

devbean

devbean

豆子,生于山东,定居南京。毕业于山东大学软件工程专业。软件工程师,主要关注于 Qt、Angular 等界面技术。

主题 Salodad 由 PenciDesign 提供 | 静态文件存储由又拍云存储提供 | 苏ICP备13027999号-2