Angular 1与 Angular 2之间的一些差别
现在在用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新特性的理解,很多point没有写出来(有些还不很了解熟悉),开发正式项目后或者了解更多新特性后再慢慢填补更新;
原文地址:Angular 1与 Angular 2之间的一些差别,薛陈磊 | Share the world
Angular 1与 Angular 2之间的一些差别的更多相关文章
- AngularJs angular.injector、angular.module
angular.injector 创建一个injector对象, 调用injector对象的方法可用于获取服务以及依赖注入. 格式:angular.injector(modules); modules ...
- angular.js 的angular.copy 、 angular.extend 、 angular.merge
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title> ...
- Angular - - angular.injector、angular.module
angular.injector 创建一个injector对象, 调用injector对象的方法可用于获取服务以及依赖注入. 格式:angular.injector(modules); modules ...
- 使用Angular CLI生成 Angular 5项目
如果您正在使用angular, 但是没有好好利用angular cli的话, 那么可以看看本文. Angular CLI 官网: https://github.com/angular/angular- ...
- Angular 2 to Angular 4 with Angular Material UI Components
Download Source - 955.2 KB Content Part 1: Angular2 Setup in Visual Studio 2017, Basic CRUD applicat ...
- Angular 学习笔记 (Angular 9 & ivy)
refer : https://blog.angularindepth.com/all-you-need-to-know-about-ivy-the-new-angular-engine-9cde47 ...
- Angular JS - 5 - Angular JS 模块和控制器
1.引入 1.5版本的angularjs,直接打印angular对象: --> <!DOCTYPE html> <html> <head lang="en ...
- 【Angular】关于angular引用第三方组件库无法改变其组件样式 :host ::ng-deep
[Angular]关于angular引用第三方组件库无法改变其组件样式 :host ::ng-deep css修改:无效 .ant-input-affix-wrapper .ant-input:not ...
- angular : direative :comunication 指令之间的通讯
在网络上可以找到多种指令之间的通讯 · $on,$emit,$boardcast (向上或向下冒泡) · 指令return的required (^)向上一个scope通讯,前提要先给scope一个na ...
随机推荐
- 图解,为多个oracle数据库下添加ArcSde实例
最开始肯定要先建一个oracle数据库,我假设名称为dbgis 1, 2, 3, 不重新指定就会出现这个错误,因为以前有sde.dbf文件了 4, 5, 6, 7, 8, 如果以前授权成功过就会出现这 ...
- 使用canvas检测HTML5视频解码错误
乍一看这标题,有点吊炸天的赶脚,canvas跟<video>能有什么联系?不过请放心我不是标题党.事情是这样的: HTML5的<video>标签所支持的视频格式确实有限,mp4 ...
- 使用Chef管理windows集群
但凡服务器上了一定规模(百台以上),普通的ssh登录管理的模式就越来越举步维艰.试想Linux发布了一个高危漏洞的补丁,你要把手下成百上千台机器都更新该补丁,如果没有一种自动化方式,那么至少要耗上大半 ...
- 跨站脚本攻击XSS
跨站脚本攻击(Cross Site Script为了区别于CSS简称为XSS)指的是恶意攻击者往Web页面里插入恶意html代码,当用户浏览该页之时,嵌入其中Web里面的html代码会被执行,从而达到 ...
- 据说每个大牛、小牛都应该有自己的库——DOM处理
这几天整理了一下思路,本来觉得DOM部分会有很多东西,但是忽然发现频繁使用的其实并不太多 class class处理部分主要有四个 hasClass:检查元素是否包含某个class addClass: ...
- 实战使用Axure设计App,使用WebStorm开发(4) – 实现页面UI
系列文章 实战使用Axure设计App,使用WebStorm开发(1) – 用Axure描述需求 实战使用Axure设计App,使用WebStorm开发(2) – 创建 Ionic 项目 实战使 ...
- 在Mongoose中使用嵌套的populate处理数据
假设有如下mongodb的schema定义: drawApply = new Schema({ salesId: { type: Schema.ObjectId, ref: 'sales' }, mo ...
- 知方可补不足~sqlserver中触发器的使用
回到目录 触发器在过去的10年中,即存储过程和ado.net称霸江湖期间是那么的重要,而现在,trigger显得不是那么必要的,我们很少将复杂的业务写在SQL里,当然也会没有机会写到trigger里了 ...
- 知方可补不足~sqlserver中使用sp_who查看sql的进程
回到目录 在SQLSERVER中每个会话,即每个查询分析器窗口都会产生一个SQL进程,对于那些持续时间短的进程,它们转瞬即失,而对于持续时间比较长的,我们需要希望查看它的运行状态,就可以借助SQL提供 ...
- 搭建jekyll博客
使用jekyll将markdown文件生成静态的html文件,并使用主题有序的进行布局,形成最终的博客页面. 特点 基于ruby 使用Markdown书写文章 无需数据库 可以使用GitHub Pag ...