Angular1 和 Angular2 区别

发表于   |   分类于   |     |   次阅读   |   阅读次数

概述

  1. Angular2不是从Angular1升级过来的，Angular2是重写的，所以他们之间的差别比较大，不是你用过1就能直接上手2的，计划可以认为是一个新的框架。
  2. Angular2最大的一个变更，就是框架整体上的components基于TypeScript。默认用TypeScript写。所以angular1和angular2从设定之初就是不一样的。并且TypeScript的语法和Java或者C#非常类似，因此对于从后端转过来的开发者来说，学习这门语言是没有难度的。
  3. Angular1.x在设计之初主要是针对pc端的，对移动端支持较少（当然也有其他一些衍生框架如ionic），而Angular2是设计包含移动端的。
  4. Angular 1的核心概念是$scope，但是angular2中没有$scope，angular2使用zone.js来记录监测变化。
  5. 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 ‘angular 2/core’;
@Component({
 selector: ‘prodsdata’,
 template: `
 <h3>{{techncalDiary}}</h3> `
})
export class ProductComponent {
 prods = { name: ‘Prod1’, quantity: 1 };
}

6.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>

7.双向数据绑定: [(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>

8.Angular 2主要的性能优化改进是使用了分层依赖注入系统.这些优化改进是angular2的速度比angular1的速度提高很多

9.Angular 2的大小是20kb左右，相对于angular1体积减少很多

10.在Angular2.x中，因为其是基于ES6来开发的，所以会有很多第三方依赖。由于很多浏览器还不支持ES6，所以Angular2通过一些第三方依赖，将基于ES6的语法文件解析成ES5语法文件，使浏览器能支持Angular2.X。所以只要支持ES5的浏览器就能用。

从IE10开始支持ES5，所以IE10以上以及其他主流的浏览器都支持。在PC端开发的时候，要注意IE9以下的兼容，移动端开发时，可以比较放心。

实现双向数据绑定

Angular1
通过视图可以改变控制器中变量的值
通过控制器中的变量可以更改视图的显示值

<div ng-app="myApp" ng-controller="myCtrl">
    输入: <input ng-model="name">
    <h1>你输入了: {{name}}</h1>
</div>

<script>
var app = angular.module('myApp', []);
app.controller('myCtrl', function($scope) {
    $scope.name = "test";
});
</script>

每绑定一个数据eg：ng-model，都会添加一个新的监视器，大量的监视器会拖慢性能。 

监视器：    
$scope.$watch('name', function(newValue, oldValue) {  
      //update the DOM with newValue  
});

angular1中会因某些指令（eg：ng-click）而运行函数$scope.$apply()，然后调用$rootScope.$digest()来触发一轮$digest循环，在$digest循环的时候，监视器被触发。监视器会检查$scope模型中的name数据是否发生了变化。当name的值发生变化的时候，回调函数会被调用。

缺点：

  1. angular1每绑定一个数据，都会添加一个新的监视器，大量的监视器会拖慢性能。
  2. $scope在回调的场景下，监视器是无法感知$scope上的变化，因此经常需要开发者手动调用$apply()方法，eg：原生js事件回调等等,如下图：
    事件回调

Angular2

删除了$scope的概念，另外引入了zone.js文件，zone.js来实现数据的双向绑定。
不会出现Angular1的那种缺点，因为zone.js文件的理论是将javascript原生文件的监听事件函数给覆盖了。所以在写原生js回调事件的时候，也会监听到数据的变化。

简单而言就是：angular1是将js外面包装了一层实现框架，而angular2中的zone.js直接将js的某些方法重写了。所以angular2提升了性能。

改进依赖注入

Angular 1 的多重依赖注入机制

Angular 1支持三种定义依赖注入的方式：

1.数组标注：最常用且推荐的方式。

myApp.controller('smallCatCtrl', ['$scope', function($scope){  
    $scope.sayCat = function(){  
        alert('I Love Circle!');  
    }  
}]);

2.$inject属性标注：通过方法$inject声明依赖的组件

var MyController = function($scope, myService) {  
  // ...  
}  
MyController.$inject = ['$scope', 'myService'];  
myApp.controller('MyController', MyController);

3.隐式标注：最简易，Angular会通过方法的参数名，推断找到依赖的组件

myApp.controller('smallCatCtrl', function($scope){  
    $scope.sayCat = function(){  
        alert('I Love Circle!');  
    }  
});

Angular 2 将会作出怎样的该进

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

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