Angular1.x与Angular2+区别_angular2.x和1.x?

1.生命周期

Angular1.x 没有生命周期，但可以利用$on监听实现加载之前和销毁动作，对数据加载以及定时器销毁

//View被加载但是DOM树构建之前时： 
$scope.$on('$viewContentLoading', function(event, viewConfig){ ... }); 
 
//View被加载而且DOM树构建完成时： 
$scope.$on('$viewContentLoaded', function(event){ ... });

//路由路径发生改变时 current:要到达的路径  previous：上一个路径
$scope.$on('$locationChangeStart', function (event, current, previous) {  }）；
 
//销毁事件
$scope.$on('$destroy', function () {    });
1
2
3
4
5
6
7
8
9
10
11

Angular 2+有生命周期

1 ngOnChanges // 如果组件绑定过输入属性，那么在 ngOnInit() 之前以及所绑定的一个或多个输入属性的值发生变化时都会调用。
2 ngOnInit // 第一次初始化指令/组件。
3 ngDoCheck // 检测，并在发生 Angular 无法或不愿意自己检测的变化时作出反应
4 ngAfterContentInit // 当初始化完组件视图及其子视图或包含该指令的视图之后调用。
5 AfterContentChecked // 每当 检查完被投影到组件或指令中的内容之后调.ngAfterContentInit() 和每次 ngDoCheck() 之后调用。
6 ngAfterViewInit // 当初始化完组件视图及其子视图或包含该指令的视图之后调用。第一次 ngAfterContentChecked() 之后调用，只调用一次。
7 ngAfterViewChecked // 每当 Angular 做完组件视图和子视图或包含该指令的视图的变更检测之后调用。 ngAfterViewInit() 和每次 ngAfterContentChecked() 之后调用。
8 ngDoCheck // 紧跟在每次执行变更检测时的 ngOnChanges() 和 首次执行变更检测时的 ngOnInit() 后调用。
9 ngAfterContentChecked // 每当 Angular 检查完被投影到组件或指令中的内容之后调用。ngAfterContentInit() 和每次 ngDoCheck() 之后调用。
10 ngAfterViewChecked // 每当 Angular 做完组件视图和子视图或包含该指令的视图的变更检测之后调用。
11 ngOnDestroy // 每当 Angular 每次销毁指令/组件之前调用并清扫。

2.依赖注入

Angular1.x 注入方式：

myApp.controller('ng',['$scope', '$timeout','$注入的模块xxx' function($scope, $timeout,$注入的模块xxx){
}])
1
2

Angular 2+注入方式：
Angular2中叫 Decorator（装饰器），更加贴近Python 里面的Decorator 的概念。

1. 声明可以注册的服务

// 第一步是添加 @Injectable 装饰器以表明此类可以被注入。
@Injectable()
class MyServiceService {}
1
2
3

2. 注入依赖

constructor(
    private route: ActivatedRoute, // 注入其他模块
    private MyServiceService: MyServiceService // 注入自定义的service
  ) { }
1
2
3
4

3.filter过滤器

$filter是用来进行数据格式化的专用服务。
Angular1.x 有过滤器，Angular4 没有，感觉Angular4 是使用Es6可以使用array的filter以及其他format也可以实现了，因此去掉，但仍有管道 {{ message|myFilter | 管道 }}

// html中使用过滤器 | 可以多个过滤器
<h1>{{ message|myFilter | filter2 | ... }}</h1>

//js中使用过滤器
app.controller('myController',['$scope','$filter',function($scope,$filter){
	//$filter(filter名称)(需要过滤的内容，参数1，参数2...)
   	$scope.num = $filter('currency')(123534);//等同于$filter('currency')(123534,'$',2)
    $scope.date= $filter('date')(new Date(), 'yyyy-MM-dd');//将日期格式化
    $scope.data = $filter('orderBy')(data,'id',true);//将data里的数据根据id字段降序排列
}])
1
2
3
4
5
6
7
8
9
10

以上是AngularJS内置了currency、date、filter、json、limitTo、lowercase、uppercase、number、orderBy这8个filter， 当然也可以自定义filter

// 自定义filter -> myFilter
angular.module('app').filter('myFilter', function () {
    return function (value) {
    	/*处理*/
       return value;
    }
});
//html中使用
{{ 'JennyLin' | myFilter }}
//js中使用
app.controller('myController',['$scope','myFilter',function($scope,myFilter){
    $scope.num = myFilter(123456);  
}])
1
2
3
4
5
6
7
8
9
10
11
12
13

4.删掉 $scope 作用域

Angular1.x 有$scope以及$rootScope 管理变量的作用域， Angular2+不再有这个。由于在很多需要回调的场景之下，脏值检测机制无法感知到$scope上发生的变化，因此经常需要开发者自己手动调用$apply() 方法。典型的场景有：事件回调、setTimeout回调、Ajax回调等等。
Angular2在底层引入了 zone.js，所以即使在各种回调函数中修改数据模型也不需要手动调用$apply() 方法了。

5. 嵌套路由

Angular 1.x 里面有一个非常讨厌的问题，框架内置的路由机制不支持嵌套使用，这就导致开发者在日常的开发过程中不得不依赖于第三方的ui-router 库。Angular2没有这个问题了，因为 Angular2的路由是基于 Component的，天然支持嵌套。

6.基于 TypeScript 开发

这是最大的一个变更，有很多人担忧这样是否会带来比较大的学习成本，实际的情况并非如此。因为 TypeScript的语法与 Java 或者 C# 非常类似，因此对于从后端转过来的开发者来说，学习这门语言几乎是没有难度的。

7.改进脏值检测机制

众所周知，“双向数据绑定”之所以能运行，是因为Angular 底层有“脏值检测”这么一个神奇的机制。而实际上Angular 1.x 里面的脏值检测机制的运行效率非常差，这就是为什么大家一直在抱怨绑定的对象不能太多、太深的原因。

Angular2 大幅度演进了这一机制，不仅引入了单向绑定，还增加了各种检测策略，例如：只检测一次、利用JIT 动态生成脏值检测代码等等。毫无疑问，有了这些工具之后，数据绑定效率不再是问题。

8.删掉了ng-controller 指令

这就意味着 Controller 不再是一个独立的组件，它合并到了 Component 内部。这是一个非常大的演进，因为从大量的实战经验来看，在复杂的业务逻辑中复用Controller 几乎是不可能的。

在其它同类的前端框架里面也有类似的处理手法，例如 Backbone 虽然也强调 MVC 的概念，但是它也没有定义单独的Controller 类，Controller也是合并在 View里面编写的。

Angular1.x中有xxx.controller.js, 但Angular2+不再有这个文件，只有xxx.component.ts, 也就是组件化了，不再是以前的controller模式，不容易实现组件复用。

9.版本

为什么有Angular1.x、Angular2.x，没听说有Angular3.x就直接到了Angular4.x？

因为此前版本中发布的route组件破坏性升级到了3.x，所有此次就统一命名为4.x。

angular.js 1.x到angular2确实是一个非常大的升级，以至于api、实现原理、框架思路都是完全不一样的。可以毫不夸张的说，学习angular2就和学一个全新的框架并没有太大区别。

但angular2.x到angular4.0破坏性升级并不多，也很容易直接升级到4.0版本。