AngularJS  2 尽管还在Alpha阶段,但主要功能和文档已经发布。让我我们了解下Angular 1 和 2 的区别,以及新的设计目标将如何实现。

1.从移动app开发上面分析:

Angular 1.x 专注于web开发,没有涉及到移动这方面的内容,还好后来杀出个程咬金IONIC移动app开发框架,让angularjs1.x很好的支持了移动开发

Angular 2目标:原生移动支持 – iOS 和 Android

Angular 2 会有两层,应用层和渲染层。例如一个组件可以用不同的 @View 修饰器修饰,根据运行环境可以在运行时生效。

与 React Native 一样,Angular 2 支持:

一次学习,到处书写。这意味着创建原生应用时可以重用你在创建 web 应用时学习的知识。尽管总是有些区别。

2.从服务器端渲染提供支持分析:

支持服务器端的渲染对于搜索引擎的优化和用户感知体验来说是非常重要的;在一个比较大型的Angular 1 的应用中,即使使用了预先定义的缓存模块,我们可以清楚地看到当应用开始启动时,页面的加载过程。

这时候看来 Angualr2 的这部分特征不是很清晰明朗,但是这种思路或许可以从以下几个方面得到体现:

启动开始, 同时所有的组件都被绑定

而渲染没有实现

一个页面在服务器被渲染后 , 然后发送到客户端

Angular 将会把它解析 ,接着会把解析后的页面注入到 DOM 中,这样就避免了出现闪烁的效果

3.从依赖注入分析

在Angular 1  的世界里,依赖注入在构建多模块应用时是一项技术的飞跃, 但是在一些极端的案例中,如果不做出一些重要的变化是不能解决这些问题的。

Angular 1.x 包含对象全局池

Angular 1 其中一个 DI 案例中每个应用仅有一个对象全局池。这就意味着,如果说主路由 loadsbackendService 我们导向了路由 B,可以延迟加载其他服务指定到这个路由。

问题就是,我们说可以延迟加载一个 secondbackendService,使用完全不同的实现:这就会重写第一个!当前还没有办法同一名字有两个不同实现的两个服务,这就会阻止用一个安全的方式从 Angular 1 实现延迟加载。

Angular 1.x 的多重依赖注入机制

在 Angular 1 中, 我们可以使用在多重地方使用不同的方法进行注入:

在链接方法中通过位置注入

在直接定义中通过名字注入

在controller方法中通过名字,等等。

Angular 2 将会作出怎样的该进

而在 Angular 2 中有且仅有一种依赖注入机制: 在构造函数中通过类型注入。

constructor(keyUtils: KeyboardUtils) {
        this.keyUtils = keyUtils;
    }
});

事实上,如果只有一种机制,那么它将变得更加容易学习。同时这种依赖注入器是类似层级结构,在不同层次的组件树,有可能实现对相同类型的不同实现。

如果一个组件没有定义依赖,它会代理给上层注入器查找依赖,依次往上。这让 Angular 2 提供原生的懒加载成为可能。

4.从主要目标分析

Angular 2 的主要目标是创建一个简单易用并且快速工作的 web 框架。让我们看看这是如何达到的:

目标:更易于推论

在当前版本的 Angular 中,我们有时不得已对应特定的使用场景推论框架内部构建,比如必须推论应用事件初始化和摘要循环:

在 Angular 1 中没有摘要循环结束事件 (查看原因),因为这种事件可能会促发更多的变化,以至于使摘要循环持续下去

我们必须推论何时调用 $scope.apply 或 $scope.digest,而这并不总是容易的

有时我们必须调用 $timeoutto让Angular 结束摘要循环,当 DOM 稳定时再做一些操作

为了使 Angular 2 更易于推论,一个目标是创建更多开箱即用的透明内部构建。

话说:Angular1.x显然非常成功,那么,为什么要剧烈地转向Angular2?

1.性能的限制

AngularJS当初是提供给设计人员用来快速构建HTML表单的一个内部工具。随着时间的推移,各种特性被加入进去以适应不同场景下的应用开发。然而由于最初的架构限制(比如绑定和模板机制),性能的提升已经非常困难了。

2.快速变化的WEB

在语言方面,ECMAScript6的标准已经完成,这意味着浏览器将很快支持例如模块、类、lambda表达式、 generator等新的特性,而这些特性将显著地改变JavaScript的开发体验。

在开发模式方面,Web组件也将很快实现。然而现有的框架,包括Angular1.x对WEB组件的支持都不够好。

3.移动化

想想5年前......现在的计算模式已经发生了显著地变化,到处都是手机和平板。Angular1.x没有针对移动应用特别优化,并且缺少一些关键的特性,比如:缓存预编译的视图、触控支持等。

4.简单易用

说实话,Angular1.x太复杂了,学习曲线太陡峭了,这让人望而生畏。Angular团队希望在Angular2中将复杂性封装地更好一些,让暴露出来的概念和开发接口更简单。

AngularJs 1.x和AngularJs2的区别的更多相关文章

  1. AngularJS 服务 provider factory service及区别

    一.概念说明 1.服务是对公共代码的抽象,如多个控制器都出现了相似代码,把他们抽取出来,封装成一个服务,遵循DRY原则,增强可维护性,剥离了和具体表现相关的部分,聚焦于业务逻辑或交互逻辑,更加容易被测 ...

  2. AngularJS 中 Provider 的用法及区别

    在一个分层良好的 Angular 应用中,Controller 这一层应该很薄.也就是说,应用里大部分的业务逻辑和持久化数据都应该放在 Service 里. 为此,理解 AngularJS 中的几个 ...

  3. angularjs link compile与controller的区别详解,了解angular生命周期

     壹 ❀ 引 我在 angularjs 一篇文章看懂自定义指令directive 一文中简单提及了自定义指令中的link链接函数与compile编译函数,并说到两者具有互斥特性,即同时存在link与c ...

  4. angularJS——ng-bind指令与插值的区别

    在AngularJS中显示模型中的数据有两种方式: 一种是使用花括号插值的方式: <p>{{text}}</p> 另一种是使用基于属性的指令,叫做ng-bind: <p ...

  5. angularjs 中的$digest和$apply区别

    $digest和$apply 在Angular中,有$apply和$digest两个函数,我们刚才是通过$digest来让这个数据应用到界面上.但这个时候,也可以不用$digest,而是使用$appl ...

  6. angularJS之ng-bind与ng-bind-template的区别

    ng-bind-template 指令用于告诉 AngularJS 将给定表达式的值替换 HTML 元素的内容. 当你想在 HTML 元素上绑定多个表达式时可以使用 ng-bind-template ...

  7. AngularJS表达式

    1. AngularJS使用表达式把数据绑定到HTML. 2. AngularJS表达式的特点: 表达式写在双大括号内:{{表达式}}. 表达式把数据绑定到HTML,这与ng-bind指令有异曲同工之 ...

  8. AngularJs项目实践总结

    今年3月接触AngularJs,并且在6月的项目中开始应用,从踩坑到填坑花了不少时间,根据项目中的实际应用情况总结了一些经验,如下: 一.UI控件选择 Angularjs是不缺控件的,Github里现 ...

  9. 02、AngularJs的数据绑定

    我们知道,AngularJs中的数据绑定是双向绑定的,View的改变,会改变Model,Model的改变也会改变View中的值,废话不多说,我们直接上代码. <!DOCTYPE html> ...

随机推荐

  1. 【软件分析与挖掘】ELBlocker: Predicting blocking bugs with ensemble imbalance learning

    摘要: 提出一种方法——ELBlocker,用于自动检测出Blocking Bugs(prevent other bugs from being fixed). 难度在于这些Blocking Bugs仅 ...

  2. C#设计模式--设配器模式

    0.C#设计模式-简单工厂模式 1.C#设计模式--工厂方法模式 2.C#设计模式--抽象工厂模式 3.C#设计模式--单例模式 4.C#设计模式--建造者模式 5.C#设计模式--原型模式 设计模式 ...

  3. war部署到tomcat

    gs-rest-service-0.1.0.war复制到tomcat-9.0.0.M17\webapps\ 打开server.xml,这Host节点,加入<Context path=" ...

  4. 题目1006:ZOJ问题(递推规律)

    题目链接:http://ac.jobdu.com/problem.php?pid=1006 详解链接:https://github.com/zpfbuaa/JobduInCPlusPlus 参考代码: ...

  5. CSS+transform画动态表情

    先给大家看下画完后是什么样子: 代码看这里: html代码: <body> <div class="emoji emoji_like"> <div c ...

  6. Windows下Visual Studio 2013编译Lua 5.2.3

    1.创建一个Visual C++的Empty Project,如果需要支持Windows XP将Platform Toolset设置为Visual Studio 2013 - Windows XP ( ...

  7. Ico初步理解

    Ico定义:是一个重要的面向对象编程的法则来削减计算机程序的耦合问题(解耦).通俗理解:把运行中程式的控制权从程式本身那里拿过来,放到配置文件中,通过"反射"找到匹配配置文件总的对 ...

  8. Implicit conversion from enumeration type 'enum CGImageAlphaInfo' to different enumeration type 'CGBitmapinfo' (aka) 'enum CGBitmapInfo')

    The constants for specifying the alpha channel information are declared with the CGImageAlphaInfo ty ...

  9. 用ELK打造可视化集中式日志

    原文链接:https://yq.aliyun.com/articles/57420 摘要: Elk是Elastic search, Logstash和Kibana三者的简称. Elastic sear ...

  10. nginx虚拟目录配置

    参考文章:https://blog.csdn.net/whatday/article/details/50649461 1. location ~ ^/awstats/ { root /home/aw ...