标签：架构 绑定 --- 五分钟 HTML 模块 组件 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
本站声明： 1. iCode9 技术分享网（下文简称本站）提供的所有内容，仅供技术学习、探讨和分享； 2. 关于本站的所有留言、评论、转载及引用，纯属内容发起人的个人观点，与本站观点和立场无关； 3. 关于本站的所有言论和文字，纯属内容发起人的个人观点，与本站观点和立场无关； 4. 本站文章均是网友提供，不完全保证技术分享内容的完整性、准确性、时效性、风险性和版权归属；如您发现该文章侵犯了您的权益，可联系我们第一时间进行删除； 5. 本站为非盈利性的个人网站，所有内容不会用来进行牟利，也不会利用任何形式的广告来间接获益，纯粹是为了广大技术爱好者提供技术内容和技术思想的分享性交流网站。