Angular1 与 Angular2的区别

现在在用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的改版升级是非常给力的；

Angular1 与 Angular2的区别相关推荐

关于angular1与angular2的应用区别
angular1.0的这些繁杂的api,还有它的执行速度,运行效率,学习曲线,都被人吐槽,最近一直在用ng1,实在很想吐槽. 最近写ng2的项目,写了一些ng2基础的应用(包括angular-cli, ...
ng1和ng2的部分对比----angular2系列（四)
前言: angular2相比angular1做了革命性的改变.对于开发者来说,我们知道它框架的实现上改变极大.我们看到代码也能发现它写法上变化很大,似乎完全是另一个东西. 但是当我们真正去写下去的时候 ...
【Vue教程】01：入门前的概述：关于VUE那些事儿
从去年开始,在各大论坛技中,与 Vue.js 这一相关词语的内容爆炸式增长,在前端技术增速中独领风骚,迅速成为前端三巨头之一.记得在某个社区中有人这样介绍三巨头"来自 Google 的 An ...
关于 Vue.js 的那些事儿
15年开始,在各大论坛技中,与 Vue.js 这一相关词语的内容爆炸式增长,在前端技术增速中独领风骚,迅速成为前端三巨头之一.记得在某个社区中有人这样介绍三巨头"来自 Google 的 An ...
Vue.js 核心精要实战解析
课程简介前端框架领域,Angular.React.Vue.js 三足鼎立,而 Vue.js 因其性能.通用.易用.体积.学习成本低等特点深受广大前端们的追捧,并吸引了一大批前端初学者.作为 Vue. ...
Web前端面试题整合，持续更新【可以收藏】
饭后闲来无事,把这几年带学生用的一些面试题整合一下,供上!拿走,不客气!应付一般公司的二面基本上是够用了.祝你早日拿到心仪的offer. css相关 1. 万能居中 1.margin: 0 auto; ...
html , css , js 小结
https://www.liaoxuefeng.com/wiki/0013739516305929606dd18361248578c67b8067c8c017b000 //github详细教程ht ...
基于Springboot+VUE的智慧食堂设计与实现
摘要随着Internet的发展,人们的日常生活已经离不开网络.未来人们的生活与工作将变得越来越数字化,网络化和电子化.网上管理,它将是直接管理"智慧食堂"系统的最新形式.本论文是 ...
基于Springboot+Vue的MOBA类游戏攻略分享平台
摘要随着信息技术和网络技术的飞速发展,人类已进入全新信息化时代,传统管理技术已无法高效,便捷地管理信息.为了迎合时代需求,优化管理效率,各种各样的管理系统应运而生,各行各业相继进入信息管理时代,M ...

Angular1 与 Angular2的区别

Angular1 与 Angular2的区别相关推荐

最新文章

热门文章