【Angular2】基础入门

【前言】

       由于最近公司使用 Angular2 来做前端，对于小白的我来说必须来学习一下 Angular2 了。下面由小编来分享一下学习成果，为大家介绍一下Angular2。

一、历史发展：

（一）起源：

       2009年，Misko hevery 和 Adam Abrons 在业余时间创造了GetAngular。那么这个GetAngular到底有多大的作用呢？这里有个小故事：Misko Hevery 使用GetAngular重写了Google内部的Feedback项目，重构前17000行，三周时间完成重构，重构后代码量只有1500行。从这个事情可以看出Angular的效率很高！这个事情过后，Angular被正式立项，由专职团队开发和维护，并将其首次命名为AngularJS。

（二）迭代之路：

        2012年6月，AngularJS1.0.0 正式版推出，亮点功能基本齐备，如双向绑定、依赖注入、指令等。

       AngularJS 1.3.x 放弃支持IE8浏览器，并推出了单次绑定语法。

       AngularJS 1.5.x 增加类似组件式书写体验，为过渡 Angular2 做了铺垫。

       AngularJS 1.x 的困境：饱受诟病的性能问题，落后于当前Web发展理念（如组件开发方式），对手机端不够友好。

（三）Angular 的萌生：

       早在2014年3月，官方博客就有提及新 Angular 的开发计划。

       2014年月下旬的 NG-Europe 大会上，Angular2 正式亮相。

       2016年9月15号，Angular2正式版发布。

（四）Angular2 新特性：

       移除 controller+$scope 设计，改用组件式开发（更易上手）

       性能更好（渲染更快，变化监测2效率更高）

       优先为移动应用设计（Angular Mobile Toolkit）

       更加贴合未来的标准（如ES6/7、WebComponent）。

       支持 无缝升级-UpgradeAdapter

二、Angular2 核心概念

       构成：Angular 核心概念有：组件、元数据、模板、数据绑定、服务、指令、依赖注入、模块。而组件是 Angular2 最核心的组成，其他都是组件的延伸，为组件提供服务。

(一)组件

       每个页面都可以说是由组件构成的。组件之间层层嵌套，自上而下形成组件树。

       组件要素有：Javascript，HTML，CSS。

       组件之间的通讯机制：每个组件都可以定义自己的输入输出属性，这些属性成为了组件的对外接口，负责与上下游的组件进行交互。

       组件都有完整的生命周期钩子，使我们能够清楚的知道组件生命周期的变化。

       示例：

       如果我们仅仅定义了一个类，Angular2 是不知道如何解释这个类的。如果在上面加上了Component装饰器，这个装饰器会在运行的时候把他的元数据参数通过某一种方式注入到这个类里面。这样Angular2就能够识别出来这个类是一个组件类。所以，装饰器的作用就是：赋予一个类更丰富的信息（元数据）。

（二）模板

       template属性用来定义组件的模板。下面的例子是定义的内联模板，如果需要定义外联模板，就使用templateUrl属性。需要注意的是，一个组件只能选定一种来指定模板。

（三）数据绑定

       模板里面有一个{{ }}的语法，这个就是最常见的一种数据绑定方式，称为插值。数据绑定语法里可以直接使用组件类里面的成员变量。

       除了插值还有一些其他较常见的数据绑定方式：

       　属性绑定：把组件类的数据传递到组件模板中。

       　事件绑定：把模板产生的数据通过函数调用方式传递给组件类。

       　双向绑定：数据双向流动。

（四）组件渲染

       当组件逻辑执行完之后，输出到视图内容就会填充到＜hello＞标签里，模板里的变量也会替换为具体的值。

（五）组件树

       ContactList和Contact形成了父子组件的关系。Contact作为元素标签使用在ContactList组件的模板的时候，组件Contact就成为了组件ContactList的子组件。需要注意的是，父组件ContactList要能使用子组件定义的一些元素标签，还需要有一个导入的过程，需要借助模块来实现。

       纵观整个组件树，数据是通过属性绑定，一层一层的往下传递。属性绑定是自上而下的传递，自下而上的绑定则通过事件来实现。事件绑定也负责属性间的数据传递，数据传递的方向是一层层往上传递。

（六）指令

       指令在某种程度上增强了组件模板的特性，是模板的一种扩展。

       此外，指令也是支持自定义的，以此来满足更多的业务需求。

（七）服务与依赖注入

       服务是实现专一目的的逻辑单元。

       服务怎么被组件使用呢?这时候就需要引入依赖注入。

       依赖注入是组件引入外部构建的一种机制。组件引用服务实际上是引用这个服务类的实例，所以服务再被引用之前会有一个实例化的过程，并且这个实例通常需要缓存起来已备其他实例使用。所以管理实例化缓存的过程正是依赖注入所实现的。服务是实例存储在依赖注入机制建立的注入器对象里，当组件需要依赖某个服务的时候，依赖注入会从注入器里查找匹配的实例，找到后便执行注入操作。

 

        分层注入：使得在适当的位置可以重新创建实例，在对应的组件里重新注入。

（八）模块

       模块有两层含义：

       框架代码以模块形式组织（文件模块）

       功能单元以模块形式组织（应用模块）

       文件模块：先导入后使用

       应用模块：应用模块就是对应用类零散的指令、服务等按功能进行归类包装。

       模块之间访问关系：如下图所示，模块C暴露出的组件可以被模块A使用，而没有暴露的指令则不会被使用。所以可以看出，Angular2的模块既可以对外暴露一些构件，同时又有一定的封装性，能够隐藏类库的一些实现。

       概念小结：与用户直接交互的是模板，模板接收来自用户的操作，通过数据绑定与对应的组件类交互，组件类完成处理之后更新模板视图来反馈给用户。组件是核心，而指令和服务是组件的扩展。

【小结】

       本篇博客主要是对Angular2核心概念的介绍，相信大家看过后对Angular2有了一个大致的了解，那么下一篇是实践篇，希望能给大家更多的启发和帮助。

       PS：学习资料为慕课网的“Angular2一小时快速入门‘’，欢迎大家共同学习交流。