05
2017
10

Angular学习笔记(一)

本文为原创文章,转载请标明出处

目录

  1. 架构
    • 模块
    • 组件
    • 模板
    • 元数据
    • 数据绑定
    • 指令
    • 服务
    • 依赖注入
  2. 模板与数据绑定

1. 架构

模块

Angular 应用是模块化的,并且 Angular 有自己的模块系统,它被称为 Angular 模块NgModules
Angular 模块都是一个带有 @NgModule 装饰器的类。
NgModule 是一个装饰器函数,它接收一个用来描述模块属性的元数据对象。其中最重要的属性是:

`declarations` - 声明本模块中拥有的视图类。Angular 有三种视图类:组件、指令和管道。
`exports` - declarations 的子集,可用于其它模块的组件模板。
`imports` - 本模块声明的组件模板需要的类所在的其它模块。
`providers` - 服务的创建者,并加入到全局服务列表中,可用于应用任何部分。
`bootstrap` - 指定应用的主视图(称为根组件),它是所有其它视图的宿主。只有根模块才能设置 `bootstrap` 属性。

组件

组件负责控制视图,通过一些由属性和方法组成的 API 与视图交互。

模板

模板以 HTML 形式存在,告诉 Angular 如何渲染组件。

元数据

元数据告诉 Angular 如何处理一个类。
@Component 装饰器能接受一个配置对象, Angular 会基于这些信息创建和展示组件及其视图。
@Component 里面的元数据会告诉 Angular 从哪里获取你为组件指定的主要的构建块。
@Component 的配置项包括:

`selector` - CSS 选择器,它告诉 Angular 在父级 HTML 中查找标签,创建并插入该组件。
`templateUrl` - 组件 HTML 模板的模块相对地址。
`providers` - 组件所需服务的依赖注入提供商数组。

数据绑定

Angular 支持数据绑定,一种让模板的各部分与组件的各部分相互合作的机制。 往模板 HTML 中添加绑定标记,来告诉 Angular 如何把二者联系起来。

指令

Angular 模板是动态的。当 Angular 渲染它们时,它会根据指令提供的操作对 DOM 进行转换。

服务

服务是一个广义范畴,包括:值、函数,或应用所需的特性。

依赖注入

大多数依赖都是服务。 Angular 使用依赖注入来提供新组件以及组件所需的服务。

2. 模板与数据绑定

绑定的类型可以根据数据流的方向分成三类: 从数据源到视图、从视图到数据源以及双向的从视图到数据源再到视图。

数据方向 语法 绑定类型
单向
从数据源到视图目标
{{ expression }}
[target]="expression"
bind-target="expression"
插值表达式
Property
Attribute

样式
单向
从视图目标到数据源
(target)="statement"
on-target="statement"
事件
双向 [(target)]="expression"
bindon-target="expression"
双向

数据绑定的目标是 DOM 中的某些东西。 这个目标可能是(元素 | 组件 | 指令的)property、(元素 | 组件 | 指令的)事件,或(极少数情况下) attribute 名。 下面是的汇总表:

绑定类型 目标 范例
Property 元素的 property
组件的 property
指令的 property
<img [src]="heroImageUrl">
<app-hero-detail [hero]="currentHero"></app-hero-detail>
<div [ngClass]="{'special': isSpecial}"></div>
事件 元素的事件
组件的事件
指令的事件
<button (click)="onSave()">Save</button>
<app-hero-detail (deleteRequest)="deleteHero()"></app-hero-detail>
<div (myClick)="clicked=$event" clickable>click me</div>
双向 事件与 property <input [(ngModel)]="name">
Attribute attribute <button [attr.aria-label]="help">help</button>
CSS 类 class property <div [class.special]="isSpecial">Special</div>
样式 style property <button [style.color]="isSpecial ? 'red' : 'green'"></button>

内置属性型指令

  • NgClass - 添加或移除一组CSS类
  • NgStyle - 添加或移除一组CSS样式
  • NgModel - 双向绑定到HTML表单元素

内置结构型指令

  • NgIf - 根据条件把一个元素添加到DOM中或从DOM移除
  • NgSwitch - 一组指令,用于切换一组视图
  • NgFor - 对列表中的每个条目重复套用同一个模板

如有不当之处,请予指正,谢谢~

上一篇:AndroidGPS和基站定位 下一篇:Swift:"奇怪"的事件响应链