五分钟理解Angular的整体架构

尽管现在被称为Angular5，实际上它只是这个诞生于2012年的前端框架 的的第四个版本.

看起来差不多半年就发布一个新版本，不过实际上从重写的版本2开始，开发 接口与核心思想就稳定下来了，并基本保持着与前序版本的兼容性。

我们看官方文档的时候,上面介绍一大堆, 如果你不是深入实践的使用,仅仅去看那些文字, 你肯定会被那些文字给绕晕,现在 ,我们把那些关键字给列出来, 从大到小,给大家串起来看一下.

Angular框架的核心是组件化，同时它的设计目标是适应大型应用的开发。因此，在 应用开发中引入了模块（NgModule）的概念来组织不同的组件（及服务），一个 Angular应用至少需要创建一个模块。

架构概览:   模块---组件---模板---元数据---数据绑定---指令---服务---依赖注入.

一个完整项目  我们把它看做最大的部分,或者称之为一个整体. (可以理解成一个根模块)

一个根模块(整体)又是由很多模块去构成的 (比如一个app,有很多的模块构成)

一个模块又是由很多组件构成. (比如多个页面构成了一个模块.  当然,组件的定义:组件代表着一些具有图形界面，并且具有内在逻辑能力的 程序单元，我们称之为视图.   它不一定非要是一个页面)

一个组件再细分,其实是由 类 与 元数据构成 .( 组件其实就是一个类,但我们得告诉 Angular 如何处理一个类。NgModule装饰器声明了一些关键的元数据，来通知框架需要载入哪些NG模块、 编译哪些组件以及启动引导哪些组件)

至此, 我们从大到小, 就描述了一个网站的完整组成部分. 画个图就是

编译器的概念:       开发Angular的出发点，是为了实现用HTML来编写用户界面，想想一个静态网页有多 容易开发，你就知道这是多么好的想法.     原生HTML的问题在于，首先它需要借助于JavaScript才能实现过得去的用户交互，其次 它只有那么多标签可用，难以担当开发用户界面的大任。既然浏览器不能直接解释<stw-button>这样的自定义标签, Angular团队就引入了编译器的概念： 在送给浏览器之前，先把有扩展标签的HTML翻译成浏览器支持的原生HTML. 

比如 :

  <div class="stw-button">

         <button >.....</button>

         <image src="....."></image>

   </div>

很多地方需要用到这个公共组建, 我们可以单独的抽取出来, 一直在模板用引用的时候,可以直接写

<stw-button></stw-button>  那么这是什么?  在送给浏览器之前，先把有扩展标签的HTML翻译成浏览器支持的原生HTML,也就是上面那段代码了. 

至此 angular 的关键词 我们提到了 模块---组件---模板---元数据.

这时,我们的这个完整的网站只是由一个个的静态页面构成. 应用需要 动起来，而不是像文档一样静静地呈现着.  显然, 需要让编译器做更多的工作：把模板和数据模型结合起来，生成 动态的用户界面.

下面就提到了 数据绑定, 指令, 服务, 依赖注入 相关的东西

数据绑定，一种让模板的各部分与组件的各部分相互合作的机制。它的语法有四种形式, 或者可以暂且理解成 由angular封装的dom操作吧. 

{{hero.name}}插值表达式  ;    [hero]属性绑定 ;  (click)事件绑定 ;   [(ngModel)]="hero.name" 双向数据绑定.     

(如果没有框架，我们就得自己把数据值推送到 HTML 控件中，并把用户的反馈转换成动作和值更新。 如果手工写代码来实现这些推/拉逻辑，肯定会枯燥乏味、容易出错，读起来简直是噩梦 —— 写过 jQuery 的程序员大概都对此深有体会 。  -----本段来自官方文档).

至此算是实现了一部分的dom操作的东西. 比如dom 操作的,取值,赋值,事件绑定等等.

那dom操作中还有控制元素的显示,隐藏,动态插入等等的操作呢. 这是后提涉及到了指令的概念.

 

指令:   Angular 模板是动态的。当 Angular 渲染它们时，它会根据指令提供的操作对 DOM 进行转换。 

比如 一些常用的内部指令, *ngIf="isTrue"   根据isTrue的值,控制是否要显示. 

<li  *ngFor="let  hero  of  heroes"></li>   会遍历生成多个li

当然这还可以自定义一些指令等等. 

 

这下,有了静态页面, 然后又通过数据绑定,指令, 让页面也是动态的了.  那么跨页面间的数据交互传递呢? 只是举这么一个例子,这里就涉及到了 服务

服务----文档是这么定义的:   服务是一个广义范畴，包括：值、函数，或应用所需的特性。典型的服务是一个类，具有专注的、明确的用途。它应该做一件特定的事情，并把它做好。

 

最后,提到了 依赖注入:

        Angular 使用依赖注入来提供新组件以及组件所需的服务

    开发了一个服务类以后，第一步是利用NG模块在框架中注册这个服务.

    一旦一个服务注册，其他类就可以使用这个服务的标识，来要求框架按需提供实例-----框架负责创建实例.

 

至此 ,这是 Angular 应用程序中所用到的八个主要构造块的基础知识 , 以这些作为开端就绰绰有余了.

当然,文档中 列出了其它重要的 Angular 特性和服务:   Animations,Change detection,Events,Forms,HTTP,Lifecycle hooks,Pipes(管道),Router(路由).

标签：架构,绑定,---,五分钟,HTML,模块,组件,Angular
来源： https://www.cnblogs.com/WLL-Hero/p/16490814.html