Angular架构概览(截取部分)

 原文链接：https://angular.cn/docs/ts/latest/guide/architecture.html

 

我们是这样写 Angular 应用的：用 Angular 扩展语法编写 HTML 模板， 用组件类管理这些模板，用服务添加应用逻辑， 用模块打包发布组件与服务。

然后，我们通过引导根模块来启动该应用。 Angular 在浏览器中接管、展现应用的内容，并根据我们提供的操作指令响应用户的交互。

 

全景图

 

 

这个架构图展现了 Angular 应用中的 8 个主要构造块：

• 模块 (module)

• 组件 (component)

• 模板 (template)

• 元数据 (metadata)

• 数据绑定 (data binding)

  Data binding

• 指令 (directive)

• 服务 (service)

• 依赖注入 (dependency injection)

 

模块

根模块在一些小型应用中可能是唯一的模块，大多数应用会有很多特性模块，每个模块都是一个内聚的代码块专注于某个应用领域、工作流或紧密相关的功能。

 

组件

组件负责控制屏幕上的一小块区域，我们称之为视图。

 

模板

通过组件的自带的模板来定义组件视图。模板以 HTML 形式存在，告诉 Angular 如何渲染组件。模板除了可以使用像<h2>和<p>这样的典型的 HTML 元素，还能使用其它元素。 例如，像*ngFor、{{hero.name}}、(click)、[hero]和<hero-detail>这样的代码使用了 Angular 的模板语法。

 

元数据

告诉 Angular 如何处理一个类。

 

数据绑定

• {{hero.name}}插值表达式在<li>标签中显示组件的hero.name属性的值。

• [hero]属性绑定把父组件HeroListComponent的selectedHero的值传到子组件HeroDetailComponent的hero属性中。

• (click) 事件绑定在用户点击英雄的名字时调用组件的selectHero方法。

双向数据绑定是重要的第四种绑定形式，它使用ngModel指令组合了属性绑定和事件绑定的功能。

 

指令

服务

依赖注入

MVVM

VI