• Live2D 看板娘


    一、组件(Components):

      组件是构成 Angular 应用的基础和核心,它是一个模板的控制类,用于处理应用和逻辑页面的视图部分。组件知道如何渲染自己及配置依赖注入,并通过一些由属性和方法组成的 API 与视图进行交互,每个组件都能独立完成各自的功能。

      我们可以通过一张图来理解一下组件:

      组件要素:JavaScript、HTML、CSS

      创建 Angular 组件的方法有三步:

        ① 从 @angular/core 中引入 Component 修饰器

        ② 建立一个普通的类,并用 @Component 修饰它

        ③ 在 @Component 中,设置 selector 自定义标签,以及 template 模板

      组件示例:

      

      元数据与装饰器:

     

      模板:

      数据绑定:

      

      数据流向:


    二、指令

      Angular模板是动态的 。当 Angular 渲染它们时,它会根据指令对 DOM 进行修改。

      指令是一个带有"指令元数据"的类。在 TypeScript 中,要通过 @Directive 装饰器把元数据附加到类上。

      在Angular中包含以下三种类型的指令:

    • 属性指令:以元素的属性形式来使用的指令。
    • 结构指令:用来改变DOM树的结构
    • 组件:作为指令的一个重要子类,组件本质上可以看作是一个带有模板的指令。

      示例:


    三、服务

      服务是实现单一目的的逻辑单元,封装了某一特定功能,比如日志服务。服务可以通过注入的方式供他人使用的独立模块。

      这是一个日志服务示例,用于把日志记录到浏览器的控制台:


    四、依赖注入

      组件引入外部构建(如服务)的一种机制。最常用的是引入实例。

      当 Angular 创建组件时,会首先为组件所需的服务找一个注入器( Injector ) 。

      注入器是一个维护服务实例的容器,存放着以前创建的实例。

      如果容器中还没有所请求的服务实例,注入器就会创建一个服务实例,并且添加到容器中,然后把这个服务返回给 Angular 。

      当所有的服务都被解析完并返回时, Angular 会以这些服务为参数去调用组件的构造函数。 这就是依赖注入 。

      示例:

      

      备注:依赖注入可以实现分层注入。


    五、模块

      模块有两层含义:

      框架代码以模块形式组织(文件模块)

      文件模块的使用方法:

      

      功能单元以模块形式组织(应用模块)

    图例说明:本模块内部的指令可以用于组件,但是不可以跨模块使用。

       模块之间的关系:

    图示说明:模块A和模块C是相互独立的两个模块,当模块C暴露了它的组件后,模块A可以引入并使用模块C的组件,但是模块C没有暴露的其他部分,如模块C的指令,模块A是不能够访问和使用的,特殊的是服务,因为服务是全局的,所以模块C的服务,模块A也可以访问。

       Angular 2 模块最佳实践:


    核心概念总览图:

  • 相关阅读:
    Python面向对象
    Python函数
    Linux之路
    Python之路
    函数
    动态参数
    python模块的运行机制以及time模块格式转换
    Python PEP8代码规范_20180614
    Oracle 分页查询方法和效率分析
    oracle 12c数据库启动(包含CDB和PDB)以及常见异常处理
  • 原文地址:https://www.cnblogs.com/jiangtengteng/p/6822824.html
Copyright © 2020-2023  润新知