Uso de directivas personalizadas

<!DOCTYPE html>
<html>

<head>
  <script data-require="angular.js@1.5.8" data-semver="1.5.8" src="https://code.angularjs.org/1.5.8/angular.js"></script>
  <link rel="stylesheet" href="style.css" />
  <script src="script.js"></script>
</head>

<body ng-app="directivas" ng-controller="directivasCtrl">
  <h1>Creación de directivas</h1>
  <simple></simple>
  <div simple></div>
  <dinamica></dinamica>
  <div dinamica></div>
  <saludo a="juan"></saludo>
</body>

</html>

// Code goes here
var app = angular.module("directivas", []);
app.directive("simple", function() {
  return {
    template: '<h1>Directiva simple</h1>'
  };
});
app.directive("dinamica", function() {
  return {
    template: '<h2>El nombre es {{nombre}}</h2>'
  };
});
app.controller("directivasCtrl", function($scope) {
  $scope.nombre = 'Un nombre cualquiera';
  $scope.juan = {
      nombre: 'Juan',
      apellido: 'Perez',
      edad: 32
    };
});

app.directive('saludo', function() {
  return {
    restrict: 'E',
    template: 'Hola {{ aQuien.nombre }}!!!',
    scope: {
      aQuien: "=a"
    }
  }
});

/* Styles go here */

Directivas
Simples y dinámicas