官网:https://www.angular.cn/

1. 背景介绍:Angular1.x与Angular2

近年来,Web 开发技术的发展日新月异,各种框架层出不穷。在这样的大背景之下,2010年10月,Google 首次发布了自己的 Web 开发框架,名为 AngularJS,也叫 Angular,或者简称为 ng。

Angular 刚一发布就引起了强烈的关注,它首次提出的“双向数据绑定”的概念受到了众多开发者的喜爱。当然,也有很多人对此持有保留意见。但是无论如何,Angular 所提出来的众多独创性的概念深深影响了 Web 技术的发展进程。例如,当前市面上相当多的 Web 框架都已经支持“数据绑定”的概念,有一些支持单向绑定,有一些支持双向绑定,Angular 的影响力之强大可见一斑。

在 Google 内部有非常多的产品都在使用 Angular,在国内,也有非常多的企业正在使用 Angular1.x 开发自己的应用,包括移动 APP,其中有很多行业巨头。

2014年9月,Angular 团队在 ng-europe 会议上公开宣布了第二个大版本的开发计划,也就是大家熟知的 Angular2,与此对应,之前的版本就称为 Angular 1.x了。

目前,Angular2 已经处于正式发布之前的最后准备阶段,按照既定的时间表,本月底(2016-09)Angular2 将会发布第一个正式版本。Angular2 依然保持了最初的核心设计理念,但是与 Angular 1.x 相比,在各种语法细节上发生了大幅度的修改。

详细的情况在后面的第三小节“ Angular2 有哪些重要变化?”中解释。从整体上看,Angular2 变得更加简洁,因为它的核心概念只有一个,那就是追求彻底的“组件化(Component)”

2. 每一门框架都有一个核心灵魂

当我们谈论 Spring 的时候,你脑海里一定会自动跳出 IOC、DI 这样的概念。显然,“控制反转”、“依赖注入”就是 Spring 的核心灵魂。

当我们谈论 Hibernate 或者 Mybatis 的时候,你首先想到的一定是 ORM(实体关系映射),它解决了关系模型和 OO 模型之间的数据结构映射问题。

当我们谈论 jQuery 的时候,你想到的一定是 DOM 操作以及网络上无数的开源控件。很显然,DOM 操作就是 jQuery 的核心灵魂,它帮我们屏蔽了浏览器兼容性问题,并且提供了业务开发过程中所需要的各种UI控件。

当我们谈论 Angular 1.x 的时候,你想到了什么?呃,等一等,想到的东西有点多,有时候什么都想不起来。概念庞杂而无法把握,这就是 Angular 1.x 存在的最大问题。

每一个成功的框架都会有一个核心灵魂,这个核心灵魂必须能解决实际开发中的一个痛点。既然是核心灵魂,最好有且只有一个,否则就会给使用者带来很大的学习压力。在这一方面,Angular1.x 是一个反面教材。

因为它的特性比较多,其中最核心的4大特性分别是:

  • 模块化
  • MVC
  • 双向数据绑定
  • 指令

如果再加上一些琐碎的细节,如 $scope、脏值检测、依赖注入、路由、表单校验等等,整体上给人的感觉就是过于琐碎,没有一个核心灵魂能统摄一切。

Angular 团队也意识到了这一点,因此,Angular2 在设计之初就简化了整体的概念模型。Angular2 的核心灵魂只有一个,那就是组件化(Component),而其它那些细碎的东西,比如 Service、Route、Pipe,都是 utils 而已。因此,在使用 Angular2 的时候,开发者只要学会使用 coponent 就解决了一大半问题。

大道至简,LESS is MORE。

3. Angular2 有哪些重要变化?

有了 Component 这个统摄全局的概念之后,我们来看看与 Angular 1.x 相比 Angular2 发生了什么变化。

第一点:Angular2 删掉了 $scope 的概念

在 Angular 1.x 里面,$scope 是一个相当强大又相当可怕的东西,由于在很多需要回调的场景之下,脏值检测机制无法感知到 $scope 上发生的变化,因此经常需要开发者自己手动调用 $apply() 方法。典型的场景有:事件回调、setTimeout 回调、Ajax 回调等等。Angular2 响应社区的强烈呼吁,删除(或者说隐藏)了 $scope 的概念,开发者不再需要感知到它的存在。另外,Angular2 在底层引入了 zone.js,所以即使在各种回调函数中修改数据模型也不需要手动调用 $apply() 方法了。

第二点:删掉了 ng-controller 指令

这就意味着 Controller 不再是一个独立的组件,它合并到了 Component 内部。这是一个非常大的演进,因为从大量的实战经验来看,在复杂的业务逻辑中复用 Controller 几乎是不可能的。在其它同类的前端框架里面也有类似的处理手法,例如 Backbone 虽然也强调 MVC 的概念,但是它也没有定义单独的 Controller 类,Controller 也是合并在 View 里面编写的。

第三点:大幅度演进了脏值检测机制

众所周知,“双向数据绑定”之所以能运行,是因为 Angular 底层有“脏值检测”这么一个神奇的机制。而实际上 Angular 1.x 里面的脏值检测机制的运行效率非常差,这就是为什么大家一直在抱怨绑定的对象不能太多、太深的原因。Angular2 大幅度演进了这一机制,不仅引入了单向绑定,还增加了各种检测策略,例如:只检测一次、利用 JIT 动态生成脏值检测代码等等。毫无疑问,有了这些工具之后,数据绑定效率不再是问题。

第四点:嵌套路由

Angular 1.x 里面有一个非常讨厌的问题,框架内置的路由机制不支持嵌套使用,这就导致开发者在日常的开发过程中不得不依赖于第三方的 ui-router 库。Angular2 没有这个问题了,因为 Angular2 的路由是基于 Component 的,天然支持嵌套。

第五点:依赖注入机制演进

Angular2 中的依赖注入写法与 Java 中的注解(Annotation)非常类似,如果你熟悉 Spring 注解的用法,那么使用 Angular2 的依赖注入几乎没有学习成本。当然,概念上是有区别的,Angular2 中叫 Decorator(装饰器),更加贴近 Python 里面的 Decorator 的概念。

第六点:框架整体上基于 TypeScript 开发

这是最大的一个变更,有很多人担忧这样是否会带来比较大的学习成本,实际的情况并非如此。因为 TypeScript 的语法与 Java 或者 C# 非常类似,因此对于从后端转过来的开发者来说,学习这门语言几乎是没有难度的。

还有一个重要的方面需要大家注意:TypeScript 是 Microsoft 开发的一门语言,Google+Microsoft 这样的组合会产生多么强大的推动力,大家可以想象。Google 和 Microsoft 本身都是重要的浏览器厂商,Chrome 和 IE 加起来的市场份额占据了一大半的市场份额,未来如果两款浏览器内建 TypeScript 引擎,很显然 TypeScript 和 Angular 的前景将会一片光明。这一优势是大量的同类技术框架根本无法企及的,因此大家在做技术选型的过程中需要综合考虑这些情况作出理性的决策。

第七点:Angular 1.x 和 Angular2 都自带 UI 控件库

两个版本的 UI 控件库都实现了 Material Design 所提出来的设计风格,Material Design 是 Google 提出来的一种 UI 设计原则,终极的目标是:用一套 UI 设计规范来兼容各种各样的设备,例如桌面、平板、大屏幕的电视、车载系统、甚至 watch,从而保证用户体验的一致性。

针对 Angular 1.x 的 Material Design 实现请参考以下链接:
https://github.com/angular/material。

针对 Angular2 的 Material Design 库,目前已经处于 alpha 状态,预计在本月(2016-09)底发布第一个正式版本,更多详情请参考:
https://github.com/angular/material2。

在现代 Web 应用开发中,尤其企业应用场景下,UI控件库是必不可少的组成部分。无论框架的设计理念多么前卫,我们最终都必须面对真实的业务开发,这里最大的现实就是:不可能让每一个企业或者团队都维护一套自己 UI 组件库。

我们知道开发一套能完美兼容各种屏幕的 UI 组件库需要消耗大量的时间和金钱,而长期维护这样一套体系更是无比枯燥的任务。所以说,Angular 默认提供免费的UI组件库这一点是目前市面上很多同类的技术所无法比拟的。

4. 我从哪里开始学习 Angular2?

Ok,Angular2 很强大,我很想上手实践一下,那么应该从哪里开始呢?

首先推荐 github 上的一系列新手项目,Angular 团队也编写了很多入门级的例子。在这些项目里面,由于运行环境的问题,有很多配置文件不太正确,导致很多开发者下载之后无法运行。我在原项目的基础之上整理并修改了一些配置错误,目的是降低国内开发者的学习成本,请参考以下链接:
1. 基于 angular.io上 官方的 tutorial 实例修改而来:
https://github.com/damoqiongqiu/angular-tutorial-damoqiongqiu
2. Angular2 种子项目,修改并增加了一些内容:
https://github.com/damoqiongqiu/angular2-seed-cn
3. 从零开始学习 webpack
目前有非常多的前端项目都在使用 webpack 作为构建工具,包括 Angular2。这个项目分了6个 branch,从 lesson01 到 lesson06,难度从易到难,详情请参考以下链接:
https://github.com/damoqiongqiu/learn-webpack

5. 总结

Angular1.x 将会继续演进并长期维护,包括 AM1.x(Angular Material 1.x);同时,Angular2,包括 AM2.0(Angular Material 2.0)即将正式发布,Angular2 将是又一个历史性的版本,敬请期待。

从本月开始,我们会定期在这里向大家作 Angular 的技术分享,每个月至少发布1篇详实的技术文章。

我作为谷歌“开发技术推广部”的 Angular 技术推广工程师,非常乐意和大家建立经常性的互动,也非常欢迎大家随时向我们提出对 Angular 的反馈和建议。大家有任何关于 Angular 的问题,可以直接在公众号下方留言,或者发送邮件至 DevRel-China-Contact@google.com,这是谷歌开发技术推广部专门收集中国开发者反馈的信箱。

花好月圆,Angular2正式发布!的更多相关文章

  1. Android Studio是否支持用于Android UI设计的AngularJS?

    我对AndroidStudio有疑问:AS在设计XML文件时是否支持AngularJS代码,例如:对于小动画或效果?

  2. android – 如何使用ClientID和ClientSecret在Phonegap中使用Angularjs登录Google OAuth2

    我正尝试使用Angularjs(使用IonicFramework)通过GoogleOAuth2从我的Phonegap应用程序登录.目前我正在使用http://phonegap-tips.com/articles/google-api-oauth-with-phonegaps-inappbrowser.html进行登录.但是当我使用Angular-UI-RouterforIonic时,它正在创建非常

  3. 利用require.js与angular搭建spa应用的方法实例

    这篇文章主要给大家介绍了关于利用require.js与angular搭建spa应用的方法实例,文中通过示例代码给大家介绍的非常详细,对大家的理解和学习具有一定的参考学习价值,需要的朋友们下面跟着小编来一起看看吧。

  4. 详解Angular动态组件

    本文主要介绍了Angular动态组件,对此感兴趣的同学,可以亲自实验一下。

  5. 详解如何使用webpack+es6开发angular1.x

    本篇文章主要介绍了详解如何使用webpack+es6开发angular1.x,具有一定的参考价值,有兴趣的可以了解一下

  6. angular2系列之路由转场动画的示例代码

    本篇文章主要介绍了angular2系列之路由转场动画的示例代码,小编觉得挺不错的,现在分享给大家,也给大家做个参考。一起跟随小编过来看看吧

  7. 一种angular的方法级的缓存注解(装饰器)

    本篇文章主要介绍了一种angular的方法级的缓存注解(装饰器),小编觉得挺不错的,现在分享给大家,也给大家做个参考。一起跟随小编过来看看吧

  8. 动手写一个angular版本的Message组件的方法

    本篇文章主要介绍了动手写一个angular版本的Message组件的方法,小编觉得挺不错的,现在分享给大家,也给大家做个参考。一起跟随小编过来看看吧

  9. angular forEach方法遍历源码解读

    这篇文章主要为大家详细了angular forEach方法遍历源码,forEach()方法用于遍历对象或数组,具有一定的参考价值,感兴趣的小伙伴们可以参考一下

  10. Angular的MVC和作用域

    本文主要Angular的MVC和作用域进行详细分析介绍,具有一定的参考价值,下面跟着小编一起来看下吧

随机推荐

  1. Angular2 innerHtml删除样式

    我正在使用innerHtml并在我的cms中设置html,响应似乎没问题,如果我这样打印:{{poi.content}}它给了我正确的内容:``但是当我使用[innerHtml]=“poi.content”时,它会给我这个html:当我使用[innerHtml]时,有谁知道为什么它会剥离我的样式Angular2清理动态添加的HTML,样式,……

  2. 为Angular根组件/模块指定@Input()参数

    我有3个根组件,由根AppModule引导.你如何为其中一个组件指定@input()参数?也不由AppModalComponent获取:它是未定义的.据我所知,你不能将@input()传递给bootstraped组件.但您可以使用其他方法来做到这一点–将值作为属性传递.index.html:app.component.ts:

  3. angular-ui-bootstrap – 如何为angular ui-bootstrap tabs指令指定href参数

    我正在使用角度ui-bootstrap库,但我不知道如何为每个选项卡指定自定义href.在角度ui-bootstrap文档中,指定了一个可选参数select(),但我不知道如何使用它来自定义每个选项卡的链接另一种重新定义问题的方法是如何使用带有角度ui-bootstrap选项卡的路由我希望现在还不算太晚,但我今天遇到了同样的问题.你可以通过以下方式实现:1)在控制器中定义选项卡href:2)声明一个函数来改变控制器中的散列:3)使用以下标记:我不确定这是否是最好的方法,我很乐意听取别人的意见.

  4. 离子框架 – 标签内部的ng-click不起作用

    >为什么标签标签内的按钮不起作用?>但是标签外的按钮(登陆)工作正常,为什么?>请帮我解决这个问题.我需要在点击时做出回复按钮workingdemo解决方案就是不要为物品使用标签.而只是使用divHTML

  5. Angular 2:将值传递给路由数据解析

    我正在尝试编写一个DataResolver服务,允许Angular2路由器在初始化组件之前预加载数据.解析器需要调用不同的API端点来获取适合于正在加载的路由的数据.我正在构建一个通用解析器,而不是为我的许多组件中的每个组件设置一个解析器.因此,我想在路由定义中传递指向正确端点的自定义输入.例如,考虑以下路线:app.routes.ts在第一个实例中,解析器需要调用/path/to/resourc

  6. angularjs – 解释ngModel管道,解析器,格式化程序,viewChangeListeners和$watchers的顺序

    换句话说:如果在模型更新之前触发了“ng-change”,我可以理解,但是我很难理解在更新模型之后以及在完成填充更改之前触发函数绑定属性.如果您读到这里:祝贺并感谢您的耐心等待!

  7. 角度5模板形式检测形式有效性状态的变化

    为了拥有一个可以监听其包含的表单的有效性状态的变化的组件并执行某些组件的方法,是reactiveforms的方法吗?

  8. Angular 2 CSV文件下载

    我在springboot应用程序中有我的后端,从那里我返回一个.csv文件WheniamhittingtheURLinbrowsercsvfileisgettingdownloaded.现在我试图从我的角度2应用程序中点击此URL,代码是这样的:零件:服务:我正在下载文件,但它像ActuallyitshouldbeBook.csv请指导我缺少的东西.有一种解决方法,但您需要创建一个页面上的元

  9. angularjs – Angular UI-Grid:过滤后如何获取总项数

    提前致谢:)你应该避免使用jQuery并与API进行交互.首先需要在网格创建事件中保存对API的引用.您应该已经知道总行数.您可以使用以下命令获取可见/已过滤行数:要么您可以使用以下命令获取所选行的数量:

  10. angularjs – 迁移gulp进程以包含typescript

    或者我应该使用tsc作为我的主要构建工具,让它解决依赖关系,创建映射文件并制作捆绑包?

返回
顶部