Angular 4 系列（一）初识 Angular

本文是 Angular 系列的第一篇，只是站在一个更高的视角来对 Angular 作一些说明和对比，文章不会涉及到任何编码（下一篇才会涉及到编码），只是让各位初学者先对 Angular 有一个基本的认识，好比 Angular 是什么？Angular 的架构是什么样的？Angular 提供了哪些特性等等。若有说得不对的地方欢迎你们指正。

• 谈谈 AngularJS
• Angular 特性
• AngularJS 与 Angular 架构
• 与其它流行框架进行对比
  • 与 React 对比
  • 与 Vue 对比
• 总结

Angular 目前有两个比较大的版本，一个是 1.5，一个是 4.0，对于 2.0 如下的版本统称为 AngularJS，从 2.0 版本开始称为 Angular。

谈谈 AngularJS

先从 AngularJS 提及，AngularJS 是 Google 在 2012 年发布的一个MVVM框架，提供了很是多的特性，这些特性在在当时来讲是至关酷，而且大胆的，也是 AngularJS 流行的缘由。

• AngularJS 优势

1. 双向数据绑定
   AngularJS 提供了强大的数据双向绑定功能，不再须要使用 JS 或者 jQuery 来操做 DOM 元素，大大减小了前端的代码量。
2. 完善的体系，提供一整套 WEB 开发的解决方案
   包括模板、数据双向绑定、路由、指令、过滤器、模块化、服务(可复用)等特性，基本上前端须要用的东西均可以从这个框架里面找到，减小选择性疲劳。
3. 引入后端语言的一些概念
   单元测试、依赖注入等等

• AngularJS一些问题

1. 性能
   致使这个问题的主要缘由是 AngularJS 的“双向数据绑定”，也是不少人吐槽的一个点，“双向数据绑定”是一把”双刃剑“，在 AngularJS 做用域里面的任何修改都会触发“脏值检测”，好比$scope.name = 'AngularJS'这段代码会触发“脏值检测”，AngularJS 会遍历做用域里面的全部变量，每个变量都会被检测是否发生改变，有变化就会把值从视图同步到模型，或者模型到视图的同步，若是页面使用大量的双向数据绑定，页面就会可能出现卡顿现象，这个是历史遗留的缘由，这样的作法的好处是能够兼容低版本浏览器，好比 IE8，不过 AngularJS 1.3 开始就再也不支持 IE8；双向数据还会致使另外一个问题，就是数据的流向很模糊，好比你就想把数据单向的从view同步到model，除非本身加注释明确说明，否则关从代码层面是看不出，这使得代码的后期维护成本很是高。
2. 做用域
   什么是做用域？若是我把它说成是“上下文”不知道会不会好理解一点，用过 AngularJS 的人就会发现，AngularJS 几乎封装了全部原生的 JS API，使用它封装后的 API 才会触发“脏值检测”，好比使用原生setInterval(callback, time)定时器，不会触发“脏值检测”，致使开发者须要手动调用 AngularJS 底层的接口触发“脏值检测”，好比$scope.$apply()或者 $scope.digest()，这两个都是同样的，$scope.$apply()会调用 $scope.$digest()，所以 AngularJS 封装了$interval服务来解决这个问题，使用原生 JS 事件，都须要这么作。鉴于做用域的各类问题，在新版的 Angular 中，做用域（$scope）这个东西已经不复存在。
3. 低配版路由
   页面只能配置一个 ng-view，这让 AngularJS 路由使用起来很是局限，致使不少人都使用第三方路由组件 ui-route 来替代官方的 ng-route，ui-route 经过嵌套视图来复用一些通用的部件，而第三方的 ui-route 我的以为也不是很好用，别人的东西用起来就是不爽。新版 Angular 的路由已经解决了这个问题。
4. JS 语言自己
   灵活又有不少坑的语言，又爱又恨难舍难分，网上有不少人讨论过 JavaScript，口水战也很多；Angular 选择使用微软的 TypeScript，TypeScript 是 JavaScript 的超集，是 JavaScript 的强类型版本，能够编译成 JavaScript，编译器将会去掉 JavaScript 自己没有的东西，因此 TypeScript 并不依赖于浏览器的支持，也并不会带来兼容性问题。与 TypeScript 结合以后，使 Angular 更加适合开发大型项目。
5. 表单
   AngularJS 对于表单的校验和错误消息提示能力很是薄弱，Angular 提供了很是完善的表单校验和消息提示功能，好比 Angular 提供了响应式表单。
6. 学习成本
   AngularJS 存在很是多的概念，模块、控制器、模板、过滤器、服务、组件、指令、双向数据绑定、做用域、依赖注入等，这些对于初学者很不友好，并且你还很难准确指出 AngularJS 的核心是什么，若是谈到 React 的核心是什么，不少人很容易就会想到“虚拟 DOM”、“组件”。新版的 Angular 的核心就是组件，语法上使用一种更加优雅的装饰器注解来整合代码。

Angular 特性

1. AngularCLI命令行工具
   开发者可使用这个工具来快速搭建一个项目的脚手架，熟悉 Vue 的人就会知道 vue-cli，功能相似，只不过 AngularCLI 作得更加完全，AngularCLI 建立的代码骨架包办了项目的运行、构建、打包、代码风格检测、测试等，统一约定全部的配置，而 vue-cli 在这一方面会比较灵活，不能说 AngularCLI 这种方式很差，这取决不一样人对不一样事情的考虑。
2. 服务端渲染
   能够针对每一个视图作 SEO 优化。
3. 移动和桌面应用兼容
   能够借助 NativeScript、ReactNative 之类的框架，能够很容易地使用 Angular 开发出跨平台的手机应用，Angular 还提供了一个官方的 UI 库 Angular Material，能够在移动应用和桌面应用使用 Google Material 风格通用的 UI 组件。

前面已经对 AngularJS 和 Angular 作了不少对比，介绍了 Angular 的不少特性，而且针对 AngularJS 的一些问题，介绍了 Angular 的一些改进，那些特性都被以后的 Angular 继承下来，新版的 Angular 语法更加优雅，功能更增强大。

AngularJS 与 Angular架构

前面咱们已经从特性的角度对 AngularJS 和 Angular 作了不少对比了，接下来咱们从架构的角度来对比。

• AngularJS 架构
  

  

  AngularJS 架构

  
  AngularJS 是一个典型的 MVC 架构，用户经过点击按钮，输入框等操做与视图进行交互，这些操做会被视图通知到控制器，控制器会修改或者查询底层的数据模型，数据模型可能会跟服务器产生一些交互来获取或修改资源，最后数据模型把修改反馈到视图，用户能够马上看到本身所作的这些操做和视图反馈的结果，这就是 AngularJS 的基本架构。

• Angular 架构
  

  

  Angular 架构

  
  Angular 采用了彻底不一样的架构，Angular 整个应用就是一颗组件树，用户看到的是这颗组件树上某几个被激活的组件视图，用户能够经过一些操做，从一个页面路由到另外一个页面，用户还能够跟视图进行交互，这些交互由组件自己提供，组件经过依赖注入来引入一些服务来作一些操做，或者跟服务端产生一些通讯。

经过这两张图相信你们应该对 Angular 应用有了一个基本认识。

与其它流行框架进行对比

与 React 对比

• 速度
  提到 React 的第一反应就是快，由于 React 采用了一种特别方式来操做 DOM，也就是虚拟 DOM；在性能方面，React 只会在 setStaus 的时候才会去更新 DOM，并且 React 是先修改虚拟 DOM，而后再与实际的 DOM 进行对比，最后再修改真实 DOM，一个是修改的内容少，一个是修改 DOM 的次数少，因此速度特别快；Angular 也实现了一个相似的变动检测机制算法，速度已经跟 React 不相上下。
• FLUX 架构
  React 提出了 FLUX 架构 这个概念，使 React 更加专一于组件化和数据单向流更新，单向数据流使得数据的流向很是清晰，下降代码维护成本，并且还能够直接使用ES6语法，经过 Webpack 这样的打包工具编译成兼容性更好的 ES5。这些之前 AngularJS 是没有的，不过如今Angular已经所有支持了，好比数据单向绑定、组件化。
• 服务器端渲染
  SPA 的一个缺陷是对 SEO 不友好，由于搜索引擎的爬虫依赖的是服务端响应的内容，不会去解析 JS 再爬取页面的内容，而 React 是能够支持服务器端渲染，经过服务端预渲染机制动态生成页面再返回到客户端，这个 Angular 之前是没有的，如今也已经支持服务端渲染。

React 的定位是一个 UI 组件库，至关于 MVC 里面的 V，它并非 WEB 的解决方案，React 专一于代码结构和组件间通讯，开发大型项目一般须要搭配其它一些库来使用，好比 Redux，Redux 适合多交互，多数据源的应用场景，否则只会增长应用的复杂性，即便配套 Redux 也不能彻底说是一个框架，相似 Promise 这样的东西还须要本身找第三方实现，而 Angular 提供了一整 WEB 套解决方案，基本上不须要为了某一功能模块而去使用第三方实现，而若是你只须要专一于 UI层，那么 React 是一个很是好的选择。

与 Vue 对比

Vue 是由国内的大牛 尤雨溪 开发，并由 Vue 团队维护的一个框架，中文文档支持完善；Vue 官网已经有与 Angular2 对比的介绍，不管从文件大小、上手难度、执行效率，Vue 都略优于 Angular， 还有人已经在 Github 基于一些基准，测试了不少主流 JavaScript 框架的操做时间 ，这里我只是针对我的主观的想法来对于这两个框架的对比，不少优点随着时间推移会被削弱，也可能距离会被拉大。

• 简单
  Vue 的目标是经过尽量简单的 API 实现响应的数据绑定和组合的视图组件，并且 Vue 是由国内的大牛尤雨奚开发的，Vue 官方中文文档 完善，这一点 Angular 直到 2.0 才慢慢完善中文文档，目前 Angular 官网中文文档 覆盖率已经超过80%，并且还支持中英文对照。
• 性能
  最新版本的 Vue 更加优越，根据上面提供的对比数据来看，Angular4 稍稍比 Vue 慢了一点点。
• 我的主导
  Vue 是由国内的大牛尤雨奚主导，Angular 是由 Google 主导，我的主导的项目，对于从此项目的维护和经费开销还有有点担忧，而这对于 Google 来讲彻底不是事。
• 社区
  Angular 在世界上有庞大的开发者社区和配套的生态环境，Vue 目前跟 Angular 相比仍是有一些差距。

Angular 和 Vue 都是很是棒的框架，都很是值得去学习的框架，虽然我很佩服 Vue 的“模仿能力“。

总结

到这里，咱们已经对比了 AngularJS 和 Angular 的特性以及阐述 Angular 针对 AngularJS 的问题作的一些改进，紧接着咱们还了解了 AngularJS 和 Angular 的基本架构，最后经过与一些流行的组件库（React）和 MVVM 框架（Vue）进行对比，来了解 Angular 的现状，相信读者此时已经对Angular的总体架构和特性有一个基本了解，在接下来的系列文章中，会逐渐剖析 Angular 的知识点，跟你们一块儿学习 Angular 4。