Angular 使用可观察对象作为处理各种常用异步操作的接口。比如： EventEmitter 类派生自 Observable。 HTTP 模块使用可观察对象来处理 AJAX 请求和响应。 路由器和表单模块使用可观察对象来监听对用户输入事件的响应。 EventEmitter Angular 提供了一个 EventEmitter 类，它用来通过组件的 @Output() 装饰器 发送一些值。EventEmitter 扩展了 RxJS Subject，并添加了一个 emit() 方法，这样它就可以发送任意值了。当你调用…

简介 RxJS是ReactiveX编程理念的JavaScript版本。ReactiveX来自微软，它是一种针对异步数据流的编程。简单来说，它将一切数据，包括HTTP请求，DOM事件或者普通数据等包装成流的形式，然后用强大丰富的操作符对流进行处理，使你能以同步编程的方式处理异步数据，并组合不同的操作符来轻松优雅的实现你所需要的功能。 RxJS 提供了一种对 Observable 类型的实现，直到 Observable 成为了 JavaScript 语言的一部分并且浏览器支持它之前，它都是必要的。这个库还提供了一些工具…

简介 可观察对象（Observable）支持在应用中的发布者和订阅者之间传递消息。 可观察对象（Observable）可以发送多个任意类型的值 —— 字面量、消息、事件。 基本用法和词汇 Observable 用于在发送方和接收方之间传输消息。在创建 Observable 对象时，需要传入一个函数作为构造函数的参数，这个函数叫订阅者函数，这个函数也就是生产者向消费者推送消息的地方。在被消费者 subscribe（订阅）之前，订阅者函数不会被执行，直到subscribe()函数被调用，该函数返回一个 subscrip…

在 Angular知识学习（一）中有讲述到表单的知识，不过那是最基础的演示，在之后的学习中又了解到模板驱动表单，所以考虑对之前的表单案例进行重构，完善表单功能，让案例更接近应用。 根据官网模板驱动表单的知识内容，我们重新构建人员登记表单，主要分为以下步骤： 创建 Uuser 模型类 创建控制此表单的组件 创建具有初始表单布局的模板。 使用 ngModel 双向数据绑定语法把数据属性绑定到每个表单输入控件。 往每个表单输入控件上添加 name 属性 (attribute)。 添加自定义 CSS 来提供视觉反馈。 显示…

NgForm 创建一个顶级的 FormGroup 实例，并把它绑定到一个表单，以跟踪表单的聚合值及其验证状态。 官方文档说明： 只要你导入了 FormsModule，该指令就会默认在所有 < form>标签上生效。你不需要再添加任何特殊的选择器。 > 你可以以 ngForm 作为 key 把该指令导出到一个局部模板变量（如 #myForm="ngForm"）。这是可选的，但很有用。 来自本指令背后的 FormGroup 实例的很多属性，都被复制到了指令自身，所以拿到一个对该指令的引用就可以让你访问此表单的聚合…

NgModel 指令使用场景比较多，还会和 NgForm 结合使用，所以非常有必要单独写一篇学习笔记。 NgModel 根据领域对象创建一个 FormControl 实例，并把它绑定到一个表单控件元素上。 官方说明： 这个 FormControl 实例将会跟踪值、用户交互和控件的验证状态，以保持视图与模型的同步。 如果用在某个父表单中，该指令还会把自己注册为这个父表单的子控件。 这个指令可以单独使用，也可以用作一个大表单的一部分。你所要做的一切就是用 ngModel 选择器来激活它。 它可以接受一个领域模型作为可选…

在 Angular 中有三种类型的指令： 组件 — 拥有模板的指令 结构型指令 — 通过添加和移除 DOM 元素改变 DOM 布局的指令 属性型指令 — 改变元素、组件或其它指令的外观和行为的指令。 组件是这三种指令中最常用的。 你在快速上手例子中第一次见到组件。 结构型指令修改视图的结构。例如，NgFor 和 NgIf。 要了解更多，参见结构型指令 guide。 属性型指令改变一个元素的外观或行为。例如，内置的 NgStyle 指令可以同时修改元素的多个样式。 创建一个简单的属性型指令 在命令行窗口下用 CLI …

路由 简单路由案例 1、命令创建项目 ng new angualrdemo04 执行该命令时，会有这么一段内容询问你是否需要创建路由。 Would you like to add Angular routing? (y/N) 输入 y 便可给项目中增加路由设置，新建的项目文件结构如下： 查看 app-routing.module.ts 文件内容： import {NgModule} from '@angular/core'; import {Routes, RouterModule} from '@angular/…

服务 创建服务之后，我们在 StorageService.service.ts 中定义一个测试方法： export class StorageService { constructor() { } test() { alert('调用服务方法'); } } 我们重新建立一个 home 组件，来测试服务调用。 <p>home works!</p> <button (click)="getService()">获取服务</button> import { Componen…

属性、元素操作以及指令 普通数据 新建 news 组件，首先在 news.component.ts 文件中定义变量： import { Component, OnInit } from '@angular/core'; @Component({ selector: 'app-news', templateUrl: './news.component.html', styleUrls: ['./news.component.css'] }) export class NewsComponent implements …