版权声明:本文为博主原创文章,未经博主允许不得转载。 https://blog.csdn.net/motor_tang/article/details/79035497
1、首先,是编程语言的不同,angular1.x是 javascript;而angular2.0则是 Typescript,只有经过编译之后才能在浏览器中运行,所以angular2.0必须使用构建工具。
2、控制器controller的改变。在angular1.x中controller用于封装视图控制逻辑;而在angular2.0中,开发模式为了模块化开发,去掉了它。
3、作用域scope,在angular1.x中,在$scope上可以挂载变量、函数;而在angular2.0中,没有$scope,它使用zone.js来记录检测变化。
4、指令,在1.x中使用“ng-if”,“ng-repeat”……;而在2.0中使用“ngFor”、“*ngIf”,指令不能直接嵌套使用,所以它增加了一个<ng-container></ng-container>
标签来包裹指令。
5、过滤器,在1.x中使用filter;而在2.0中使用Pipe,增加了asyc、slice、parcent。
6、依赖注入,在angular1.x中,依赖注入是这样的
app.controller('myController', ['$scope', '$http', '$state', '$stateParams', function ($scope, $http, $state, $stateParams) {
$scope.manage = function () {
console.log("mycontroller");
}
$scope.test1 = function () {
console.log($stateParams);
console.log($stateParams.id, $stateParams.name);
}
}])
而在angular2.0中,只有一个依赖注入机制,
constructor(thisIsDemo:ThisIsDemo){
this.thisIsDemo=thisIsDemo;
}
7、组件的声明周期,angular1.x中没有明确的生命周期;而在angular2.0中有明确的生命周期。
- ngOnInit 当angular初始化完成数据绑定的输入属性后,用来初始化指令或组件。
- ngDoCheck:用来检测所有变化(无论是Angular本身能检测还是无法检测的),并作出相应行动。在每次执行“变更检测”时被调用;
- ngAfterContentInit:当Angular把外来内容投影进自己的视图之后调用。
- ngAfterContentChecked: 当Angular检查完那些投影到自己视图中的外来内容的数据绑定之后调用。
- ngAfterViewInit :在Angular创建完组件的视图后调用。
- ngAfterViewChecked:在Angular检查完组件视图中的绑定后调用。
- ngOnChanges :当Angular设置了一个被绑定的输入属性后触发。该回调方法会收到一个包含当前值和原值的changes对象。
- ngOnDestroy:在Angular销毁指令或组件之前做一些清理工作,比如退订可观察对象和移除事件处理器,以免导致内存泄漏。
生命周期的顺序
- ngOnChanges:当被绑定的输入属性的值发生变化时调用,首次调用一定会发生在ngOnInit之前。
- ngOnInit:在第一轮ngOnChanges完成之后调用。
- ngDoCheck:在每个Angular变更检测周期中调用。
- ngAfterContentInit:当把内容投影进组件之后调用。
- ngAfterContentChecked:每次完成被投影组件内容的变更检测之后调用。
- ngAfterViewInit:初始化完组件及其子视图之后调用。
- ngAfterViewChecked:每次做完组件视图和子视图的变更检测之后调用。
- ngOnDestroy:当Angular每次销毁指令/组件之前调用。