五分钟理解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(路由). 

推荐阅读更多精彩内容

  • Angular 2架构总览 - 简书http://www.jianshu.com/p/aeb11061b82c A...
    葡萄喃喃呓语阅读 759评论 2 12
  • Angular 2是一个帮助我们使用HTML和JavaScript构建客户端应用的框架。这个框架包含几个互相协作的...
    JasonQiao阅读 5,912评论 1 48
  • AngularJS2 是一款开源的JavaScript MV*(MVC、MVW、MVVM)框架,目前由Google...
    二彬小青年阅读 2,043评论 2 25
  • 版本:Angular 5.0.0-alpha AngularDart(本文档中我们通常简称 Angular ) 是...
    soojade阅读 183评论 0 4
  • 概述 注意力模型已经推出,在CV和NLP领域刮起一股旋风,尤其是兼顾整体与细节,短期与长期,在各种比赛上攻城掠地,...
    readilen阅读 5,372评论 2 20