Angular1 与 Angular2的区别

转载 2018年04月16日 17:47:34

现在在用ng1.5.8做一个项目,ng的优点和特性我就不用多说了,ng1在陆续更新到1.5/1.6后就没再推出新版本了,ng2已经面世测试很久了,如同很多系统和框架一样,每个大的版本更新都会有新特性加入进来,虽然还没有用ng2做过企业级项目,平时也了解了很多ng2的改进的地方,下面就来梳理一下ng1和ng2之间一些差异;

  • Angular2不是从Angular1升级过来的,Angular2是重写的,所以他们之间的差别比较大,不是你用过1就能直接上手2的,计划可以认为是一个新的框架;
  • Angular2使用了javascript的超集‘Typescript’,所以angular1和angular2从设定之初就是不一样的;
  • Angular1.x在设计之初主要是针对pc端的,对移动端支持较少(当然也有其他一些衍生框架如ionic),而Angular2是设计包含移动端的;
  • Angular 1的核心概念是$scope,但是angular2中没有$scope,angular2使用zone.js来记录监测变化;
  • Angular 1 中的控制器在angular2中不再使用,也可以说控制器在angular2中被‘Component’组件所替代:

复制代码
////Angular 1.x using Controller and $scope.........
var myApp = angular
 .module("myModule", []) 
.controller("productController", function($scope) {
var prods = { name: "Prod1", quantity: 1 }; 
$scope.products = prods;
});
 
///Angular 2 Components using TypeScript........
import { Component } from ‘angular2/core’;
@Component({
 selector: ‘prodsdata’,
 template: `
 <h3>{{techncalDiary}}</h3> `
})
export class ProductComponent {
 prods = { name: ‘Prod1’, quantity: 1 };
}
复制代码
  • Angular 2中, 指令的结构、用法作了一些调整,比如1中的ng-repeat被*ngFor替代
复制代码
///Angular 1.x structural directives:........
<ul>
     <li ng-repeat="item in items">
         {{item.name}}
     </li>
</ul>
 
///Angular 2 structural directives:.............
<ul>
     <li *ngFor="#item of items">
         {{item.name}}
     </li>
</ul>
复制代码
  • Angular 2中, 自带原始指令在使用的时候要加上哈希(#)前缀
<div *ngFor="#technicalDiary of technicalDiries">
  • 双向数据绑定: [(ngModel)]的写法替换了ng-model
///Angular 1.x, two-way data binding using 'ng-model'..........
<input ng-model="technology.name"></input>
 
/////In Angular 2,two-way data binding using '[(ngModel)]'..........
<input [(ngModel)]="http://technology.name"></input>
  • Angular 2主要的性能优化改进是使用了分层依赖注入系统。 Angular 2实现了基于单向树的变化检测,这再次提高了性能;这些优化改进是的angular2的速度比angular1的速度提高很多;
  • Angular 2的大小是20kb左右,相对于angular1体积减少很多,在移动端的应用中,流量方便更占优势;
  • 支持影子 DOM;
  • 支持 Android 和 iOS 的原生移动渲染;
  • 支持服务端渲染

总结:

  很多人觉得从angular1转向angular2的时候学习曲线陡峭,所以在进军angular2的时候还是先做点预习功课比较好,也是因为改动较大,对angular2的设计思想、原生组件写法和工作原理有一定的了解,学习使用的过程中也更好跨阶。

  尽管angular2还在应用测试阶段,但是新版本相对于angular1有了长足的优化改进,相信它会越来越多的被应用到各个应用开发中,并且angular2只会load应用所需的组件(components),这也是个很好的改进,一些统计网站上的数据显示angular的速度比angular1快五倍,不得不说这次angular2的改版升级是非常给力的;

Angular2与Angular1的区别

本文简要阐述了Angular2与Angular1的区别
  • victoryzn
  • victoryzn
  • 2017-08-11 15:50:29
  • 2251

angularJS 1和2的区别

1.从移动app开发上面分析:Angular 1.x 专注于web开发,没有涉及到移动这方面的内容,还好后来杀出个程咬金IONIC移动app开发框架,让angularjs1.x很好的支持了移动开发An...
  • jacoby_fire
  • jacoby_fire
  • 2016-09-07 14:22:46
  • 5136

AngularJS与Angular的区别

指同一事物,版本的区别,叫法不同 Angular2.0之前的版本(1.x)叫做AngularJS 1.x的使用是引入AngularJS的js文件到网页。 2.0之后,就是完全不同了。 Angula...
  • zengmingen
  • zengmingen
  • 2017-06-03 13:37:21
  • 11639

Angular1 与 Angular2的区别

现在在用ng1.5.8做一个项目,ng的优点和特性我就不用多说了,ng1在陆续更新到1.5/1.6后就没再推出新版本了,ng2已经面世测试很久了,如同很多系统和框架一样,每个大的版本更新都会有新特性加...
  • fengsuiyingdong
  • fengsuiyingdong
  • 2018-04-16 17:47:34
  • 16

为什么有Angular1.x、Angular2.x和Angular4.x,没听说Angular3.x?

Angular 一、起源和版本 1)Augular 1.x 近年来,Web 开发技术的发展日新月异,各种框架层出不穷。在这样的大背景之下,2010年10月,Google 首次发布了自己的 Web 开发...
  • u012620506
  • u012620506
  • 2017-09-17 07:21:17
  • 1920

(switching-to-Angular2.pdf

  • 2016年12月11日 16:12
  • 4.69MB
  • 下载

AngularJS 1,AngularJS 2,Vue 1 ,Vue 2, React之间的区别和优劣势比较

AngularJS 1,AngularJS 2,Vue 1 ,Vue 2, React之间的区别和优劣势比较
  • JustForZR
  • JustForZR
  • 2017-03-16 20:46:18
  • 2409

angular 1 与 angular 2 有哪些区别

angular 1 与 angular 2 有哪些区别
  • SecondLieutenant
  • SecondLieutenant
  • 2017-06-18 17:10:34
  • 506

学习angular1还是angular2

1.现在建议学习Angular的1.2.x以上的版本。理由:国内外的学习资料很丰富,社区也很多,插件种类很多;整个生态系统比较完善,现在很多公司都在使用Angular,我工作的公司也在使用,感觉很方便...
  • muzhongwuren_001
  • muzhongwuren_001
  • 2017-06-27 10:02:22
  • 1551

angularjs1 与 angular2 的一些区别

前言:   angular2相比angular1做了革命性的改变。对于开发者来说,我们知道它框架的实现上改变极大。我们看到代码也能发现它写法上变化很大,似乎完全是另一个东西。 但是当我们真...
  • Perpetual1006
  • Perpetual1006
  • 2017-03-22 11:02:56
  • 1056
收藏助手
不良信息举报
您举报文章:Angular1 与 Angular2的区别
举报原因:
原因补充:

(最多只允许输入30个字)