<!DOCTYPE html>
<html ng-app="app">
<head>
<meta charset="UTF-8">
<title>AngularJS Taller - Uso de templateURL</title>
<link rel="stylesheet" href="//cdnjs.cloudflare.com/ajax/libs/foundation/5.5.0/css/foundation.min.css" />
<link rel="stylesheet" href="style.css">
<script src="//ajax.googleapis.com/ajax/libs/angularjs/1.4.7/angular.min.js"></script>
</head>
<body>
<div class="da-page">
<div class="row">
<div class="small-12 columns">
<!-- Aquí está la directiva (de tipo elemento, es decir, es un
tag completo hecho por nosotros) -->
<saludo></saludo>
<!-- saludo dejará de existir como tag, ya que en la directiva
usamos replace:true (ver directives.js)-->
</div>
</div>
<div class="row">
<div class="small-12 columns">
<p>Uso de templateURL en la directiva AngularJS</p>
</div>
</div>
</div>
<script src="app.js"></script>
<script src="directives.js"></script>
</body>
</html>
angular.module("app",[]);
body{
font-family: "Segoe UI", Helvetica, sans-serif;
background-color: #eaeaea;
}
h1{
padding-bottom:0.22em;
border-bottom: 1px dotted;
}
angular.module("app")
.directive("saludo", function(){
return {
restrict: "E",
replace: true,
templateUrl: "saludo.html"
}
});
//la "E" en restrict es por tratarse de tipo elemento.
//En index.html se puede ver
//templateUrl apunta a un fichero html que tenemos en el servidor
<h1>Plantilla para saludo</h1>