Angular 2 架构概览

最新推荐文章于 2024-11-13 16:03:36 发布

原创最新推荐文章于 2024-11-13 16:03:36 发布 · 1k 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#Angular 2

AngularJS 专栏收录该内容

18 篇文章

订阅专栏

本文介绍Angular应用架构，包括模块、组件、服务等八大核心构造块，以及动画、表单、HTTP等特性服务。通过理解这些概念，开发者可以更好地构建和维护Angular应用。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

网址：https://angular.cn/docs/ts/latest/guide/architecture.html
------------------------------第一部分：Angular应用中8个主要构造块------------------------------
这个架构图展现了 Angular 应用中的 8 个主要构造块：

模块 (Modules)

组件 (Components)

模板 (Templates)

元数据 (Metadata)

数据绑定 (Data Binding)

指令 (Directives)

服务 (Services)

依赖注入 (Dependency Injection)
---------------------------------------------------------------

------------------------------模块 (Modules)---------------------------------
1、Angular应用是模块化的，并且Angular有自己的模块系统，它被称为Angular模块或NgModules 。

2、每个Angular应用至少有一个模块（根模块），习惯上命名为 AppModule 。

3、根模块在一些小型应用中可能是唯一的模块，不过大多数应用可能会有很多“特性模块” ，
它们由一组领域类、工作流、或紧密相关的功能聚合而成。

4、Angular模块（无论是“根”模块还是“特性模块”）都是一个带有 @NgModule 装饰器的类。

5、NgModule是一个装饰器函数，它接收一个用来描述模块属性的元数据对象。
其中最重要的属性是：
declarations （声明） - 本模块中拥有的视图类。Angular有三种视图类：组件、指令、管道。

    exports - 声明（ declaration ）的子集，它可用于其它模块中的组件模板。

    imports - 本模块组件模板中需要由其它模块导出的类。

    providers - 服务的创建者。本模块把它们加入全局的服务表中，让它们在应用中的任何部分都可被访问到。

    bootstrap - 标识出应用的主视图（被称为根组件），它是所有其它视图的宿主。只有根模块才能设置 bootstrap 属性。

------------------------------组件 (Components)------------------------------

------------------------------模板 (Templates)-------------------------------

------------------------------元数据 (Metadata)------------------------------

------------------------------数据绑定 (Data Binding)------------------------

------------------------------指令 (Directives)------------------------------

------------------------------服务 (Services)--------------------------------

------------------------------依赖注入 (Dependency Injection)----------------

---------------------------------------------------------------
------------------------------第二部分：Angular 特性和服务------------------------------
Angular 特性和服务

动画：用 Angular 的动画库让组件动起来，而不需要对动画技术或 CSS 有深入的了解。

变更检测：“变更检测”文档会告诉你 Angular 是如何决定组件的属性值变化和什么时候该更新到屏幕的。以及它是如何用 zones 来拦截异步行为并执行变更检测策略。

事件：“事件”文档会告诉你如何使用组件和服务触发支持发布和订阅的事件。

表单：通过基于 HTML 的验证和脏检查机制支持复杂的数据输入场景。

HTTP：通过这个 HTTP 客户端，可以与服务器通讯，以获得数据、保存数据和触发服务端动作。

生命周期钩子：通过实现生命周期钩子接口，可以切入组件生命中的几个关键点：从创建到销毁。

管道：在模板中使用管道转换成可显示的值，以增强用户体验。

路由器：在应用程序客户端导航，并且不离开浏览器。

测试：使用 Angular 测试工具运行单元测试，在你的应用与 Angular 框架交互时进行测试。