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元素调用）

        		
网友评论