angular1.5 Components

如今前端界angular react vue三大框架并驾齐驱,其中有一个共同点就是组件化开发,这也符合w3c 推行Web Components的趋势。现如今不懂组件化开发的前端绝对不是好厨子。跳槽新公司pc端使用angular1.5的Components比较多,趁着入职前几天自己看一下。
由于angular2.0学习曲线比较陡峭(对于我这种菜鸡来说),为了让开发者平稳的从angular1.x 版本过渡到angular2,所以angular1.5中引入了components,需要注意的是所有components能实现的功能directive都能实现。 顺便说一句1.5之前的directive感觉有点混乱,既包括指令又包括组件(我自己感觉指令是不应该有dom结构的,而组件是应该有的)

介绍

angular1.5 Components比较适合组件化编程架构的程序,相比于之前的指令有以下几个优点。
1.比指令的配置更加简单
2.自带默认配置使之符合最佳实践
3.更适合组件化架构的程序
4.使用Components更符合angular发展的趋势
当然有些情况下不要使用Components
1.当你想使用compile和pre-link这两个钩子时,因为components不包含这两个钩子,所以component无法用于操作DOM。
2.当你想作为属性或者css类名调用时,components只能作为自定义的HTML元素调用

使用

定义一个组件

  function HeroDetailController($scope) {
     console.log($scope)
     // console.log(this.hero)

}

angular.module('heroApp').component('heroDetail', {
  templateUrl: './heroDetail.html',
  controller:['$scope',HeroDetailController] ,
  bindings: {
    hero: '='
  }
});

调用组件(只能作为自定义的HTML元素调用)

<hero-detail hero="ctrl.hero"></hero-detail>

Components和Directive的主要区别如下

1.directive默认作用域不隔离(scope默认为false),Components默认父子组价作用域隔离
2.directive当设置scope为对象时,属性有三种前缀标示符可以设置 "@"(单项绑定的前缀标识符,传字符串用) "="(双向数据绑定前缀标识符,即父子变化都会互相影响) "&"(绑定函数方法),Components的bindings比directive的scope多了一种"<"(单向数据传输,即父组件改变状态会影响子组件的状态,字组件改变状态不会影响父组件的状态)
3.directive中有link函数,操作dom在link中,而Components没有link所以不能用于操作dom

Components(生命周期)钩子函数

angular1.5为每个组件提供了生命周期钩子函数去响应不同的时刻,有以下几个钩子
1.$onInit():此时controller构造函数初始化完毕(包括bindings中的数据),所以controller中初始化的代码应该放在这里。
2.$onChanges(changesObj):当bindings单向数据变化时会触发这个钩子
3.$doCheck():每次脏检查会触发的钩子
4.$onDestroy():当controller的scope销毁时会触发的钩子
5.$postLink():当组件及其子组件的元素已经被编译和链接触发的钩子

注意

虽然bindings父子间数据可以设置为"=",但是最好设置为"<",这样父组件改变状态可以影响子组件,反之则不行。如果想子组件触发父组件状态的变化,因该传入父组件的回调函数。如下

<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <title>Document</title>
</head>
<body ng-app="heroApp">
  <script src="./angular.js"></script>
  <div ng-controller="MainCtrl as ctrl">
    <b>Hero</b>
    <br>
    <hero-detail age="ctrl.age" modify-age="ctrl.modifyAge()"></hero-detail>
    父组件{{ctrl.age}}
    <div>{{ctrl.out}}</div>
  </div>
  <script>
  angular.module('heroApp', []).controller('MainCtrl', function MainCtrl($scope) {
    this.age = '18'
    var that = this
    setTimeout(function() {
      that.age = '20'
      $scope.$apply()
    }, 2000);
    this.modifyAge=function(){
      that.age='22'
      $scope.$apply()
    }
  });
  function HeroDetailController($scope) {
    var that = this
    setTimeout(function() {
      that.modifyAge()
    }, 4000);
  }
  angular.module('heroApp').component('heroDetail', {
    template: '子组件{{$ctrl.age}}',
    controller: ['$scope', HeroDetailController],
    bindings: {
      age: '<',
      modifyAge:'&'
    }
  });
  </script>
</body>
</html>

参考文章
angular1.5 官网
钩子函数详解

posted @ 2017-02-12 17:33  致敬科神  阅读(3325)  评论(3编辑  收藏