美文网首页
Angular4-学习笔记-2-概念梳理

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

作者: 小镭Ra | 来源:发表于2017-04-18 16:21 被阅读234次

    学习资料来自 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 的难点在于对编程思想和概念的理解。

    相关文章

      网友评论

          本文标题:Angular4-学习笔记-2-概念梳理

          本文链接:https://www.haomeiwen.com/subject/wzbfzttx.html