Angular1.x与Angular2+区别
Angular1.x与Angular4区别
- 1.生命周期
- 2.依赖注入
- 3.filter过滤器
- 4.删掉 $scope 作用域
- 5. 嵌套路由
- 6.基于 TypeScript 开发
- 7.改进脏值检测机制
- 8.删掉了ng-controller 指令
- 9.版本
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 () { });
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){
}])
Angular 2+注入方式：
Angular2中叫 Decorator（装饰器），更加贴近Python 里面的Decorator 的概念。
- 声明可以注册的服务
// 第一步是添加 @Injectable 装饰器以表明此类可以被注入。
@Injectable()
class MyServiceService {}
- 注入依赖
constructor(private route: ActivatedRoute, // 注入其他模块private MyServiceService: MyServiceService // 注入自定义的service) { }
3.filter过滤器
$filter是用来进行数据格式化的专用服务。
Angular1.x 有过滤器，Angular4 没有，感觉Angular4 是使用Es6可以使用array的filter以及其他format也可以实现了，因此去掉，但仍有管道 {{ message|myFilter | 管道 }}
// html中使用过滤器 | 可以多个过滤器
{{ message|myFilter | filter2 | ... }}
//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字段降序排列
}])
以上是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);
}])
4.删掉 $scope 作用域
Angular1.x 有scope以及scope 以及scope以及rootScope 管理变量的作用域， Angular2+不再有这个。由于在很多需要回调的场景之下，脏值检测机制无法感知到scope上发生的变化，因此经常需要开发者自己手动调用scope 上发生的变化，因此经常需要开发者自己手动调用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版本。