现在在用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之间的一些差别的更多相关文章

  1. AngularJs angular.injector、angular.module

    angular.injector 创建一个injector对象, 调用injector对象的方法可用于获取服务以及依赖注入. 格式:angular.injector(modules); modules ...

  2. angular.js 的angular.copy 、 angular.extend 、 angular.merge

    <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title> ...

  3. Angular - - angular.injector、angular.module

    angular.injector 创建一个injector对象, 调用injector对象的方法可用于获取服务以及依赖注入. 格式:angular.injector(modules); modules ...

  4. angular : direative :comunication 指令之间的通讯

    在网络上可以找到多种指令之间的通讯 · $on,$emit,$boardcast (向上或向下冒泡) · 指令return的required (^)向上一个scope通讯,前提要先给scope一个na ...

  5. angular.extend()和 angular.copy()的区别

    1.angular.copy angular.copy(source, [destination]);  // source: copy的对象. 可以使任意类型, 包括null和undefined. ...

  6. AngularJs angular.identity和angular.noop详解

    angular.identity 函数返回本身的第一个参数.这个函数一般用于函数风格. ----------以上是官网对该接口的说明,只能说这个文档写得也太二,让人完全看不懂.要理解它的用途,可直接看 ...

  7. angular项目总结——angular + browserify + gulp + bower + less 架构分享

    一眨眼,快三个月没有写博客了.一直在为自己没有写博客而懊恼,忙过这段时间,好好总结一下. 新项目主要是自己一个人在写,先搭建了一个初步的架构,用了我并不熟悉的angular,这个过程中,慢慢也熟悉了a ...

  8. AngularJs angular.forEach、angular.extend

    angular.forEach 调用迭代器函数取每一项目标的集合,它可以是一个对象或数组.迭代器函数与迭代器(value.key)一起调用,其中值是一个对象属性或数组元素的值,而数组元素是对象属性的关 ...

  9. AngularJs angular.identity和angular.noop

    angular.identity 函数返回本身的第一个参数.这个函数一般用于函数风格. 格式:angular.identity() 使用代码: (function () { angular.modul ...

随机推荐

  1. 从零开始山寨Caffe&#183;拾:IO系统(三)

    数据变形 IO(二)中,我们已经将原始数据缓冲至Datum,Datum又存入了生产者缓冲区,不过,这离消费,还早得很呢. 在消费(使用)之前,最重要的一步,就是数据变形. ImageNet Image ...

  2. [WCF编程]4.契约概述

    一.契约的基本概念 契约是消息参与者之间的约定.在SOA架构中,契约提供了服务通信所必需的元数据.契约用来定义数据类型,操作,消息交换模式和消息交换使用的传输协议.契约通常是在标准化平台中使用与编程语 ...

  3. iOS纯代码适配masonry中mas_的问题

    //equalto 和 mas_equalto 是有区别的.但是我们不打算去了解,可以通过添加以下代码来统一. //注意!! 宏定义必须要放在 import 引入头文件之前! //define thi ...

  4. java提高篇(三)-----java的四舍五入

    Java小事非小事!!!!!!!!!!!! 四舍五入是我们小学的数学问题,这个问题对于我们程序猿来说就类似于1到10的加减乘除那么简单了.在讲解之间我们先看如下一个经典的案例: public stat ...

  5. 正则表达式分组()、不捕获(?:)和断言(?&lt;=)详解

    分组 分组在正则中用()表示,根据小菜理解,分组的作用有两个: 1.将某些规律看成是一组,然后进行组级别的重复,可以得到意想不到的效果. 2.分组之后,可以通过后向引用简化表达式(\1 或者$1). ...

  6. 【bzoj2435】[NOI2011]道路修建

    题目描述 在 W 星球上有 n 个国家.为了各自国家的经济发展,他们决定在各个国家之间建设双向道路使得国家之间连通.但是每个国家的国王都很吝啬,他们只愿意修建恰好 n – 1条双向道路. 每条道路的修 ...

  7. HDU 4496 D-City (并查集)

    题意:有n个城市,m条路,首先m条路都连上,接着输出m行,第i行代表删除前i行的得到的连通块个数 题解:正难则反,我们反向考虑使用并查集添边.首先每个点都没有相连,接着倒着来边添加边计算,当两个点父节 ...

  8. topcoder SRM 622 DIV2 FibonacciDiv2

    关于斐波那契数列,由于数据量比较小, 直接打表了,代码写的比较戳 #include <iostream> #include <vector> #include <algo ...

  9. 与众不同 windows phone (37) - 8.0 文件系统: StorageFolder, StorageFile, 通过 Uri 引用文件, 获取 SD 卡中的文件

    [源码下载] 与众不同 windows phone (37) - 8.0 文件系统: StorageFolder, StorageFile, 通过 Uri 引用文件, 获取 SD 卡中的文件 作者:w ...

  10. 【ANT】Ant常用的内置task

    ant 例如: <target name="callProjectB"> <echo message="In projectA calling proj ...