Angular1.x与Angular2+区别

大小小丹

已于 2023-03-09 00:20:37 修改

阅读量597

点赞数 1

分类专栏： angularjs angular2 文章标签： javascript angular.js 前端

于 2023-03-09 00:17:25 首次发布

本文链接：https://blog.csdn.net/baidu_30907803/article/details/129413985

版权

angularjs 同时被 2 个专栏收录

14 篇文章 0 订阅

订阅专栏

angular2

3 篇文章 0 订阅

订阅专栏

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中使用过滤器 | 可以多个过滤器
<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字段降序排列
}])

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