Czym jest dyrektywa AngularJS?

Może naprawdę prosta i początkowa definicja dyrektyw kątowych byłaby

Dyrektywy AngularJS (ng-directives) są atrybutami HTML z prefiksem ng (ng-model, ng-app, ng-repeat, ng-bind) używanymi przez Angular do rozszerzenia HTML. ( from: W3Schools angular tutorial )

Przykładem tego może być

Dyrektywa ng-app definiuje aplikację AngularJS.

Dyrektywa ng-model wiąże wartość kontrolek HTML (wejście, wybierz, textarea) do danych aplikacji.

Dyrektywa ng-bind wiąże dane aplikacji z widokiem HTML.

<div ng-app="">
    <p>Name: <input type="text" ng-model="name"></p>
    <p ng-bind="name"></p>
</div>

Sprawdź ten tutorial , przynajmniej dla mnie był to jeden z najlepszych wstępów do Angular. Bardziej kompletnym podejściem byłoby wszystko, co powiedział wcześniej @mark-rajcok.

Patrząc na dokumentację, dyrektywy są strukturami można napisać, że angularjs parsuje w celu tworzenia obiektów i behaviors.In innymi słowy jest to szablon, w którym używasz mieszania dowolnych węzłów i pseudo-javascript i elementów zastępczych dla danych, aby wyrazić intencje jak Twój widżet (komponent) jest zorganizowany, jak się zachowuje i jak jest feed z danymi. Angularjs następnie działa przeciwko tym dyrektywom , aby przetłumaczyć je na działający html/javascript kod.

Dyrektywy są po to, aby można było budować bardziej złożone komponenty (widżety) przy użyciu odpowiedniej semantyki. Wystarczy spojrzeć na przykład dyrektyw angularjs-definiują one panel tabulacji (co oczywiście nie jest poprawne w zwykłym HTML). Jest to bardziej intuicyjne niż używanie div-s lub spans do tworzenia struktury, która jest następnie stylizowana na wyglądającą jak Panel tabulacji.

W angularjs dyrektywy są znacznikami HTML dla elementu HTML DOM, takiego jak atrybut (restrict-A), nazwa elementu(restrict - E), komentarz(restrict - M) lub klasa CSS(restrict - C), które mówią kompilatorowi HTML ($compile) AngularJS, aby wykonał określone zachowanie dla tego elementu DOM lub nawet przekształcił element DOM i jego dzieci.Przykładami są ng-bind, ng-hide/show itp.

Strona główna jest bardzo jasne o tym: Po najechaniu kursorem na karty w ostatniej sekcji:

Rozszerzyliśmy słownictwo HTML o niestandardowe tabs element. tabs abstrakcja złożonej struktury HTML oraz zachowanie niezbędne do renderowania kart. Rezultatem jest więcej czytelny widok i bardzo łatwa składnia wielokrotnego użytku."

Następnie w następnej zakładce:

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;
        }

Więc możesz wymyślać elementy html tzn. tabs i pozwolić angular zająć się renderowaniem tych żywioły.