What is an AngularJS directive?

Question

I have spent quite a lot of time reading through AngularJS documentation and several tutorials, and I have been quite surprised at how unapproachable the documentation is.

Answer 1

The homepage is very clear about this: When you hover over tabs in the last section:

We've extended HTML's vocabulary with a custom tabs element. The tabs abstracts the complex HTML structure and behavior necessary for rendering of tabs. The result is a more readable view and very easily reusable syntax."

Then in the next tab:

angular.module('components', []).
  directive('tabs', function() {
    return {
      restrict: 'E',
      transclude: true,
      scope: {},
      controller: function($scope, $element) {
        var panes = $scope.panes = [];

        $scope.select = function(pane) {
          angular.forEach(panes, function(pane) {
            pane.selected = false;
          });
          pane.selected = true;
        }

So you can invent html elements i.e tabs and let angular handle the rendering of those elements.