项目中经常会有一些公共组件，比如header，如果每个页面都写一遍的话显得很冗余，而且不利于维护，这时候我们就会考虑将这些公共部分抽取出来，做成一个单独的组件。

然而angular不是很熟悉啊~怎么啵~

折腾了一下，才发现angular的组件开发主要依赖自定义指令（directive ）来实现。

主要使用到directive的几个属性，如下：

restrict： 使用驼峰法来命名，用来限制指令通过特定的方式来调用，默认值为 EA

• E 作为元素名使用，如<my-directive></my-directive>

• A 作为属性使用,如<div my-directive></div>

• C 作为类名使用,如<div class="my-directive"></div>

• M 作为注释使用,如<!-- directive: my-directive -->

scope: 指定作用域

• false 默认值，共享父级作用域

• true 继承父级作用域并创建指令自己的作用域

• {} 创建指令自己的独立作用域，与父级毫无关系

templateUrl： 用来指定模板文件的url，如templateUrl: 'header'

template：设置模板，如template:'这是一条指令'

controller：控制器

比如如果创建一个header组件，我们先新建一个文件夹header.html

    
  
     
这里是标题
  
     
      返回
     
  
     
      这里是右边的文字
     
    

接着新建directive.js

angular.module('myHeader', ["zz.rule"])  .directive('myHeader', function() {    return {      restrict: 'A',      templateUrl: 'header',      controller: function($scope, $element, $attrs) {        // 返回上一页        $scope.goBack = function(event) {};      }    };  })

好了，到这里一个组件就穿件好了，那么问题来了，怎么使用呢？

其实就跟平成引入插件一样一样的

创建index.html

    
angular.module('mymodel', ["myHeader"])

超级简单有没有，赶紧get起来