Angular学习笔记(一)

本文包含: Angular4架构、模板与数据绑定、生命周期

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. 模板与数据绑定

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

数据方向

语法

绑定类型

单向从数据源到视图目标

[target]=”expression”bind-target=”expression”

表达式PropertyAttribute类样式

单向从视图目标到数据源

(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 - 对列表中的每个条目重复套用同一个模板

模板引用变量

  • # var

3. 生命周期

ngOnChanges()

当 Angular 重新设置数据绑定输入属性时响应。该方法接受当前和上一属性值的 SimpleChanges 对象。 当被绑定的输入属性的值发生变化时调用,首次调用一定会发生在 ngOnInit() 之前。

ngOnInit()

在 Angular 第一次显示数据绑定和设置指令/组件的输入属性之后,初始化指令/组件。 在第一轮 ngOnChanges() 完成之后调用,只调用一次。

ngDoCheck()

检测,并在发生 Angular 无法或不愿意自己检测的变化时作出反应。 在每个 Angular 变更检测周期中调用,ngOnChanges()ngOnInit() 之后。

ngAfterContentInit()

当把内容投影进组件之后调用。 第一次 ngDoCheck() 之后调用,只调用一次。 只适用于组件。

ngAfterContentChecked()

每次完成被投影组件内容的变更检测之后调用。 ngAfterContentInit() 和每次 ngDoCheck() 之后调用。 只适合组件。

ngAfterViewInit()

初始化完组件视图及其子视图之后调用。 第一次 ngAfterContentChecked() 之后调用,只调用一次。 只适合组件。

ngAfterViewChecked()

每次做完组件视图和子视图的变更检测之后调用。 ngAfterViewInit() 和每次 ngAfterContentChecked() 之后调用。 只适合组件。

ngOnDestroy

在 Angular 销毁指令/组件之前调用。

本文参与腾讯云自媒体分享计划,欢迎正在阅读的你也加入,一起分享。

发表于

我来说两句

0 条评论
登录 后参与评论

相关文章

来自专栏河湾欢儿的专栏

探究 css touch-action 属性

今天在写vue项目的时候碰到一个 Unable to preventDefault inside passive event listener due to ...

15610
来自专栏全栈之路

vue项目引入markdown

git地址:https://github.com/showdownjs/showdown 其实引入markdown挺简单的:

84210
来自专栏Jerry的SAP技术分享

使用DOM Breakpoints找到修改属性的Javascript代码

使用Chrome开发者工具的DOM断点功能可以让您快速找到修改了某一个DOM元素的Javascript代码。

20490
来自专栏Youngxj

杨小杰工具箱图标版网页源码带后台

21720
来自专栏每日一篇技术文章

微信小程序_04 数据绑定

69220
来自专栏小俊博客

Windows10中的键盘快捷方式

Windows 徽标键 + Shift + C打开超级按钮菜单Windows 徽标键 + D显示和隐藏桌面Windows 徽标键 + Alt + D显示和隐藏桌...

15320
来自专栏IMWeb前端团队

图片上传前预处理,等比缩放、裁剪 (html5 + canvas)

本文作者:IMWeb capricorncd 原文出处:IMWeb社区 未经同意,禁止转载 ? Image pre processing for up...

73960
来自专栏JetpropelledSnake

Vue学习笔记之表单绑定输入

单向绑定非常简单,就是把Model绑定到View,当我们用JavaScript代码更新Model时,View就会自动更新。

7010
来自专栏liuchengxu

使用 Vim 的 jump list 看代码

Vim 可以记录我们最近访问的位置(location)。每个位置(position)(position 包括了文件名,列号,行号)会被一个 jump list ...

8320
来自专栏macOS 开发学习

一步一步,开始上手Mac 开发(二)

2.2 选中MasterViewController.xib 选中view,然后把它拖动的更宽更高,不必在意具体的尺寸细节,要能够放下新的控件就可以。

14020

扫码关注云+社区

领取腾讯云代金券