Angular4-学习笔记-2-概念梳理

学习资料来自 Angular.cnAngular.io

开发指南-词汇表

Angular 模块 (Angular module)

Angular 模块是带有 @NgModule 装饰器函数的类,它帮助我们将一个应用程序组织成内聚的功能模块群。

@NgModule 接收一个元数据对象,该对象告诉 Angular 如何编译和运行模块代码。@NgModule 标记出该模块拥有的组件、指令和管道, 并把它们的一部分公开出去,以便外部组件使用它们。@NgModule 可以向应用的依赖注入器中添加服务提供商 (service providers)。

一个 Angular 模块还包含应用程序需要的外部 Angular 模块的列表,例如 FormsModule

每个 Angular 应用程序都有一个应用程序根模块类。按规约这个类的名字为 AppModule,存放在名为 app.module.ts 的文件。

参考 NG 模块
参考 NgModule INTERFACE

启动/引导 (bootstrap)

通过应用程序根 Angular 模块来启动 Angular 应用程序。启动过程标识应用的顶级“根”组件 (component),也就是应用加载的第一个组件。

你可以在同一个 index.html 中引导多个应用,每个应用都有它自己的顶级根组件。

组件 (component)

组件是一个 Angular 类,用于把数据展示到视图 (view),并处理几乎所有的视图显示和交互逻辑。

组件是 Angular 系统中最重要的基本构造块之一。它其实是一个拥有模板 (template) 的指令 (directive)。

需要将 @Component 装饰器应用到一个组件类,从而把必要的组件元数据附加到类上。 Angular 会需要元数据来创建一个组件实例,并把组件的模板作为视图渲染出来。

根据 "MVC" 和 "MVVM" 模式,组件充当了“控制器 (controller) ”和“视图模型 (view model) ”的角色。

装饰器 (decorator | decoration)

装饰器是一个函数,它将元数据添加到类、类成员(属性、方法)和函数参数。

装饰器的作用域会被限制在它所装饰的语言特性(the language feature that it decorates)。在同一文件中,装饰器不会“泄露”到它后面的其它类。

永远别忘了在装饰器后面加括号()。

依赖注入 (dependency injection)

依赖注入既是设计模式,同时又是一种机制:当应用程序的一些部件需要另一些部件时, 利用依赖注入来创建被请求的部件,并将它们注入到发出请求的部件中。

Angular 开发者构建应用程序时的首选方法是:定义许多简单部件, 每个部件只做一件事并做好它,然后在运行时把它们装配在一起组成应用程序。

这些部件通常会依赖其它部件。一个 Angular 组件 (component) 可能依赖一个服务部件来获取数据或执行运算。

如果部件 “A” 要靠另一个部件 “B” 才能工作,我们称 “A” 依赖 “B” ,“B” 是 “A” 的依赖。
可以要求“依赖注入系统”为我们创建 “A” 并处理所有依赖。如果 “A” 需要 “B” ,“B” 需要 “C ”, 系统将解析这个依赖链,返回一个完全准备好的 “A” 实例。

在 Angular 内核中有一个注入器 (injector),当请求时返回依赖值。表达式 injector.get(token) 返回与该 token(令牌)参数相关的值。令牌是一个 Angular 中的类型 (InjectionToken)。

我们很少直接处理令牌。 绝大多数方法都接受类名 (Foo) 或字符串 ("foo"), Angular 会把这些类名称和字符串转换成令牌。当调用 injector.get(Foo) 时,注入器返回用Foo类生成的令牌所对应的依赖值,该依赖值通常是 Foo 类的实例。

注入器 (Injector) 维护一个令牌到依赖值的映射表。 如果注入器找不到给定令牌对应的依赖值,它会使用提供商 (Provider) 创建一个依赖值。提供商 (provider)是一个“菜谱”,用于创建特定令牌对应的依赖实例。

只有当注入器内部提供商注册表中存在与令牌对应的提供商时, 注入器才能为这个令牌创建一个依赖值。所以注册提供商是一个非常关键的准备步骤。

更多信息参见依赖注入 (dependency injection)

指令 (directive)

指令是一个 Angular 类,负责创建和重塑浏览器 DOM 中的 HTML 元素,并与之互动。 指令是 Angular 中最基本的特性之一。

指令几乎总与 HTML 元素或属性 (attribute) 相关。 我们通常把这些关联到的 HTML 元素或者属性 (attribute) 当做指令本身。 当 Angular 在 HTML 模板中遇到一个指令的时候, 它会创建匹配的指令类的实例,并把浏览器中这部分 DOM 的控制权交给它。

你可以自定义 HTML 标签(例如 <my-directive>)来关联自定义指令。 然后,可以像写原生 HTML 一样把这些自定义标签放到 HTML 模板里。 这样,指令就变成了 HTML 本身的拓展。

指令分为三类:

  • 组件 (component)

  • 属性型指令 (attribute directive)
    可以监控和修改其它 HTML 元素、 HTML 属性 (attribute)、 DOM 属性 (property)、组件等行为。它们通常表示为 HTML 属性 (attibute),故名。

  • 结构型指令 (structural directive)
    负责塑造或重塑 HTML 布局。这一般是通过添加、删除或者操作 HTML 元素及其子元素来实现的。

生命周期钩子 (lifecycle hook)

指令 (directive) 和组件 (component) 具有生命周期,由 Angular 在创建、更新和销毁它们的过程中进行管理。
你可以通过实现一个或多个生命周期钩子接口,切入到生命周期中的关键时间点。
每个接口只有一个钩子方法,方法名是接口名加前缀 ng。例如,OnInit 接口的钩子方法名为 ngOnInit

更多信息见生命周期钩子 (lifecycle hook)

模块 (module)

模块是一个内聚的代码块,具有单一用途。
Angular 应用程序是模块化的。
一般来说,我们用模块来组装应用程序,这些模块包含自己编写的模块和从其它地方获取的模块。
模块会导出 (export) 代码中的某些值,最典型的就是类。 模块如果需要什么东西,那就导入 (import) 它。

Angular 的模块结构和导入/导出语法是基于 ES2015 模块标准的。
采用这个标准的应用程序需要一个模块加载器来按需加载模块,并解析模块间的依赖关系。 Angular 不附带模块加载器,也不偏爱任何第三方库(虽然大多数例子使用SystemJS)。
模块一般与它定义导出物的文件同名。例如 date_pipe 模块位于 date_pipe.ts 文件中。
你很少需要直接访问 Angular 的特性模块。 而通常会从一个 Angular 范围化包 (scoped package)中导入它们,例如 @angular/core

服务 (service)

服务是一个具有特定功能的类,它用于封装不与任何特定视图相关的数据和逻辑,或者用于在组件之间共享数据和逻辑。

模板 (template)

模板是一大块 HTML。Angular 会在指令 (directive) 特别是组件 (component) 的支持和指导下,用它来渲染视图 (view)。

视图 (view)

视图是屏幕中一小块,用来显示信息并响应用户动作,例如点击、移动鼠标和按键。
Angular 在一个或多个指令 (directive) 的控制下渲染视图, 尤其是组件 (component) 指令及其模板 (template)。 组件扮演着非常重要的角色,我们甚至经常会为了方便, 直接用视图作为组件的代名词。

视图一般包含其它视图,在用户在应用程序中导航时, 任何视图都可能被动态加载或卸载,这一般会在路由器 (router) 的控制下进行。

总结

Angular 的难点在于对编程思想和概念的理解。

最后编辑于
©著作权归作者所有,转载或内容合作请联系作者
  • 序言:七十年代末,一起剥皮案震惊了整个滨河市,随后出现的几起案子,更是在滨河造成了极大的恐慌,老刑警刘岩,带你破解...
    沈念sama阅读 215,539评论 6 497
  • 序言:滨河连续发生了三起死亡事件,死亡现场离奇诡异,居然都是意外死亡,警方通过查阅死者的电脑和手机,发现死者居然都...
    沈念sama阅读 91,911评论 3 391
  • 文/潘晓璐 我一进店门,熙熙楼的掌柜王于贵愁眉苦脸地迎上来,“玉大人,你说我怎么就摊上这事。” “怎么了?”我有些...
    开封第一讲书人阅读 161,337评论 0 351
  • 文/不坏的土叔 我叫张陵,是天一观的道长。 经常有香客问我,道长,这世上最难降的妖魔是什么? 我笑而不...
    开封第一讲书人阅读 57,723评论 1 290
  • 正文 为了忘掉前任,我火速办了婚礼,结果婚礼上,老公的妹妹穿的比我还像新娘。我一直安慰自己,他们只是感情好,可当我...
    茶点故事阅读 66,795评论 6 388
  • 文/花漫 我一把揭开白布。 她就那样静静地躺着,像睡着了一般。 火红的嫁衣衬着肌肤如雪。 梳的纹丝不乱的头发上,一...
    开封第一讲书人阅读 50,762评论 1 294
  • 那天,我揣着相机与录音,去河边找鬼。 笑死,一个胖子当着我的面吹牛,可吹牛的内容都是我干的。 我是一名探鬼主播,决...
    沈念sama阅读 39,742评论 3 416
  • 文/苍兰香墨 我猛地睁开眼,长吁一口气:“原来是场噩梦啊……” “哼!你这毒妇竟也来了?” 一声冷哼从身侧响起,我...
    开封第一讲书人阅读 38,508评论 0 271
  • 序言:老挝万荣一对情侣失踪,失踪者是张志新(化名)和其女友刘颖,没想到半个月后,有当地人在树林里发现了一具尸体,经...
    沈念sama阅读 44,954评论 1 308
  • 正文 独居荒郊野岭守林人离奇死亡,尸身上长有42处带血的脓包…… 初始之章·张勋 以下内容为张勋视角 年9月15日...
    茶点故事阅读 37,247评论 2 331
  • 正文 我和宋清朗相恋三年,在试婚纱的时候发现自己被绿了。 大学时的朋友给我发了我未婚夫和他白月光在一起吃饭的照片。...
    茶点故事阅读 39,404评论 1 345
  • 序言:一个原本活蹦乱跳的男人离奇死亡,死状恐怖,灵堂内的尸体忽然破棺而出,到底是诈尸还是另有隐情,我是刑警宁泽,带...
    沈念sama阅读 35,104评论 5 340
  • 正文 年R本政府宣布,位于F岛的核电站,受9级特大地震影响,放射性物质发生泄漏。R本人自食恶果不足惜,却给世界环境...
    茶点故事阅读 40,736评论 3 324
  • 文/蒙蒙 一、第九天 我趴在偏房一处隐蔽的房顶上张望。 院中可真热闹,春花似锦、人声如沸。这庄子的主人今日做“春日...
    开封第一讲书人阅读 31,352评论 0 21
  • 文/苍兰香墨 我抬头看了看天上的太阳。三九已至,却和暖如春,着一层夹袄步出监牢的瞬间,已是汗流浃背。 一阵脚步声响...
    开封第一讲书人阅读 32,557评论 1 268
  • 我被黑心中介骗来泰国打工, 没想到刚下飞机就差点儿被人妖公主榨干…… 1. 我叫王不留,地道东北人。 一个月前我还...
    沈念sama阅读 47,371评论 2 368
  • 正文 我出身青楼,却偏偏与公主长得像,于是被迫代替她去往敌国和亲。 传闻我的和亲对象是个残疾皇子,可洞房花烛夜当晚...
    茶点故事阅读 44,292评论 2 352

推荐阅读更多精彩内容

  • 学习资料来自 Angular.cn 与 Angular.io。 模板语法 在线例子 在 Angular 中,组件扮...
    小镭Ra阅读 3,730评论 0 3
  • 版本:Angular 5.0.0-alpha AngularDart(本文档中我们通常简称 Angular ) 是...
    soojade阅读 832评论 0 4
  • Angular 2架构总览 - 简书http://www.jianshu.com/p/aeb11061b82c A...
    葡萄喃喃呓语阅读 1,485评论 2 13
  • Angular 2是一个帮助我们使用HTML和JavaScript构建客户端应用的框架。这个框架包含几个互相协作的...
    JasonQiao阅读 7,109评论 1 48
  • 从教学楼走下来,漫步在操场一侧。难得这样一个没有自习的傍晚,我可以放慢脚步,在风中,看天。 天黑漆漆的,没有星星。...
    眼里的湖阅读 1,206评论 50 7