Angular 4.0学习教程之架构详解

前言

前段时间谷歌发布了广受欢迎的Angular JavaScript框架的4.0版本，该版本致力于缩小生成代码的体积，以及保持框架的简化发布计划。

很久没写这种比较偏概念类的东西了，不过我觉得没有形成一个知识架构，学习效率会大打折扣。在这里把我的所理解的知识分享给大家，部分内容引用自官方文档。下面进入主题

Angular架构概览

先来看一下官方放出的架构图。

架构概览

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

• 模块 (module)
• 组件 (component)
• 模板 (template)
• 元数据 (metadata)
• 数据绑定 (data binding)
• 指令 (directive)
• 服务 (service)
• 依赖注入 (dependency injection)

接下来我按顺序并结合图来讲解一下。

1.模块 (module)

Angular 或者 ionic 新建的项目，都会存在一个根模块，默认名是 AppModule。如果你使用了模块化来创建应用，包括 AppModule，每个都会存在一个 @NgModule 装饰器的类(虽然他很像 java 中的注解，但是他的官方命名叫装饰器)。我们新建的页面，如果不使用懒加载，都要在 @NgModule 中先声明后使用。

下面举个例子，简单介绍一下 @NgModule 中的内容

//app.module.ts

import { NgModule }  from '@angular/core';
import { BrowserModule } from '@angular/platform-browser';
@NgModule({
 imports:  [ BrowserModule ],
 providers: [ Logger ],
 declarations: [ AppComponent ],
 exports:  [ AppComponent ],
 bootstrap: [ AppComponent ]
})
export class AppModule { }

• imports 本模块声明的组件模板需要的类所在的其它模块。
• providers 服务的创建者，并加入到全局服务列表中，可用于应用任何部分。
• declarations 声明本模块中拥有的视图类。Angular 有三种视图类：组件、指令和管道。
• exports declarations 的子集，可用于其它模块的组件模板。
• bootstrap 指定应用的主视图（称为根组件），它是所有其它视图的宿主。只有根模块才能设置 bootstrap 属性。

在图中的意义：看图左上角，模块是用来接收一个用来描述模块属性元数据对象的。

2.组件 (component)、模板 (template)、元数据 (metadata)

这次我们把这三点一起来讲，先看一下这段代码

//hero-list.component.ts

@Component({
selector: 'hero-list',
templateUrl: './hero-list.component.html',
providers: [ HeroService ]
})
export class HeroListComponent implements OnInit {
/* . . . */
}

Component

组件是一个装饰器，他能接受一个配置对象， Angular 会基于这些信息创建和展示组件及其视图。

• selector：CSS 选择器，它告诉 Angular 在父级 HTML 中查找 <hero-list> 标签，创建并插入该组件。
• templateUrl：组件 HTML 模板的模块相对地址，如果使用 template 来写的话是用“`”这个符号来直接编写 HTML 代码。
• providers：组件所需服务的依赖注入。

template

模板就是那段 HTML 代码，可以用 templateUrl 引入外面的，也可以用 template`` 直接写。

metadata

元数据装饰器用类似的方式来指导 Angular 的行为。 例如 @Input、@Output、@Injectable 等是一些最常用的装饰器，用法就不在这里展开了。

在图中的意义：看图中间那一块，模板、元数据和组件共同描绘出这个视图。

3.数据绑定 (data binding)

这里一共展示四种数据绑定，看一下示例代码：

//插值表达式 显示组件的hero.name属性的值
<li>{{hero.name}}</li>

//属性绑定 把父组件selectedHero的值传到子组件的hero属性中
<hero-detail [hero]="selectedHero"></hero-detail>

//事件绑定 用户点击英雄的名字时调用组件的selectHero方法
<li (click)="selectHero(hero)"></li>

//双向绑定 数据属性值通过属性绑定从组件流到输入框。用户的修改通过事件绑定流回组件，把属性值设置为最新的值
<input [(ngModel)]="hero.name">

可能大家对各种括号看的眼花了，总结一下：

• 双花括号是单向绑定，传递的是值。方向是 组件 -> 模板。
• 方括号是单向绑定，传递的是属性。方向是 父组件 -> 子组件。
• 圆括号是事件绑定，处理点击等活动（action）。
• 方括号套圆括号是双向绑定，方向是 组件 <-> 模板。

在图中的意义：看图中间那一块，数据绑定给模板和组件提供数据交互的方式。

4.指令 (directive)

严格来说组件就是一个指令，但是组件非常独特，并在 Angular 中位于中心地位，所以在架构概览中，我们把组件从指令中独立了出来。

我们这里提到的指令有两种类型：

结构型 structural 指令和属性 attribute 型指令。

放一下原文证明一下组件确实算是一个指令：

While a component is technically a directive, components are so distinctive and central to Angular applications that this architectural overview separates components from directives.

Two other kinds of directives exist: structural and attribute directives.

结构型指令是 ngFor、ngIf 这种的，通过在 DOM 中添加、移除和替换元素来修改布局。

属性型指令是 ngModel 这种的，用来修改一个现有元素的外观或行为。

Angular 还有少量指令，它们或者修改结构布局（例如 ngSwitch ）， 或者修改 DOM 元素和组件的各个方面（例如 ngStyle 和 ngClass）。之后我会单独写一篇讲他们用法的文章。

在图中的意义：看图右上角那一块，组件是一个带模板的指令，只是扩展了一些面向模板的特性。

5.服务 (service)

官方文档的概念：

服务是一个广义范畴，包括：值、函数，或应用所需的特性。服务没有什么特别属于 Angular 的特性。Angular 对于服务也没有什么定义，它甚至都没有定义服务的基类，也没有地方注册一个服务。

这就像你在 iOS 或者 Android 里单独建了一个类叫 httpService ，封装了网络请求服务一样，不是具体的什么东西，就是一个概念了解下就行。

在图中的意义：看图左下角角那一块，服务是用来封装可重用的业务逻辑。

6.依赖注入 (dependency injection)

依赖注入是提供类的新实例的一种方式，还负责处理类所需的全部依赖。大多数依赖都是服务。 Angular 使用依赖注入来提供新组件以及组件所需的服务。

比如我们要给某组件导入 HomeService 这个服务，看这段代码：

constructor(private service: HeroService) { 
 ...
}

这个constructor就是构造函数，依赖注入在 constructor 中进行。你也许会觉得前面写上 private、public 之类的很怪，这是 TypeScript 语法比较特殊，习惯就好。

当 Angular 创建组件时，会首先为组件所需的服务请求一个注入器 injector。我们必须先用注入器 injector 为 HeroService 注册一个提供商 provider。

看一下下面的代码，意思就是我们必须在 providers 写上才能用

@Component({
 selector: 'hero-list',
 templateUrl: './hero-list.component.html',
 providers: [ HeroService ]
})

在图中的意义：看图左下角角那一块，依赖注入主要用来导入服务。

总结

以上就是这篇文章的全部内容了，希望本文的内容对大家的学习或者工作具有一定的参考学习价值，如果有疑问大家可以留言交流，谢谢大家对的支持。

# angularjs  # 架构  # angular架构  # 架构图  # AngularJS入门教程之MVC架构实例分析  # Angular2入门--架构总览  # 绑定  # 所需  # 图中  # 看图  # 是一个  # 的是  # 看一下  # 在这里  # 可以用  # 这段  # 我们必须  # 写上  # 都是  # 这是  # 有什么  # 如果你  # 文档  # 我会  # 可用于  # 我觉得 

相关文章： 如何在IIS中配置站点IP、端口及主机头？  如何选择高效便捷的WAP商城建站系统？  jQuery 常见小例汇总  网站制作企业,网站的banner和导航栏是指什么？  如何零成本快速生成个人自助网站？  建站之星如何实现网站加密操作？  网站专业制作公司有哪些,做一个公司网站要多少钱？  清除minerd进程的简单方法  胶州企业网站制作公司,青岛石头网络科技有限公司怎么样？  建站之星安装提示数据库无法连接如何解决？  实现点击下箭头变上箭头来回切换的两种方法【推荐】  如何通过PHP快速构建高效问答网站功能？  如何通过虚拟主机空间快速建站？  如何选择高效稳定的ISP建站解决方案？  Android滚轮选择时间控件使用详解  云南网站制作公司有哪些,云南最好的招聘网站是哪个？  如何在阿里云ECS服务器部署织梦CMS网站？  深圳网站制作设计招聘,关于服装设计的流行趋势，哪里的资料比较全面？    佛山网站制作系统,佛山企业变更地址网上办理步骤？  如何自定义建站之星模板颜色并下载新样式？  香港服务器部署网站为何提示未备案？  如何通过WDCP绑定主域名及创建子域名站点？  如何在Golang中使用encoding/gob序列化对象_存储和传输数据  攀枝花网站建设,攀枝花营业执照网上怎么年审？  如何设置并定期更换建站之星安全管理员密码？  rsync同步时出现rsync: failed to set times on “xxxx”: Operation not permitted  高防服务器：AI智能防御DDoS攻击与数据安全保障  如何在阿里云购买域名并搭建网站？  专业制作网站的公司哪家好,建立一个公司网站的费用.有哪些部分,分别要多少钱？  想学网站制作怎么学,建立一个网站要花费多少？  一键网站制作软件,义乌购一件代发流程？  成都网站制作公司哪家好,四川省职工服务网是做什么用？  详解jQuery中基本的动画方法  建站主机选哪种环境更利于SEO优化？  建站之星导航如何优化提升用户体验？  香港服务器WordPress建站指南：SEO优化与高效部署策略  建站之星后台密码如何安全设置与找回？  网站制作网站,深圳做网站哪家比较好？  网站制作员失业,怎样查看自己网站的注册者？  一键制作网站软件下载安装,一键自动采集网页文档制作步骤？  香港服务器网站推广：SEO优化与外贸独立站搭建策略  如何在建站之星网店版论坛获取技术支持？  浙江网站制作公司有哪些,浙江栢塑信息技术有限公司定制网站做的怎么样？  如何用AWS免费套餐快速搭建高效网站？  c# Task.Yield 的作用是什么 它和Task.Delay(1)有区别吗  制作网站的过程怎么写,用凡科建站如何制作自己的网站？  如何通过IIS搭建网站并配置访问权限？  如何确认建站备案号应放置的具体位置？  建站之星后台搭建步骤解析：模板选择与产品管理实操指南