Curso de AngularJS y REST

Esta página es de solo lectura. Puedes ver la fuente pero no puedes cambiarla. Pregunta a tu administrador si crees que esto es incorrecto.
====== 4.2 ng-src ======
La diectiva ''ng-src'' cumple una función similar a ''ng-bind''. 

Si mostramos en una página una imagen en la que parte de la URL es una expresión de AngularJS mediante ""%%{{ %%}}"" ¿qué ocurre hasta que se carga AngularJS?

Resulta que el propio navegador intentará cargar una URL de una imagen que contendrá ""%%{{ %%}}"" y obviamente no la encontrará, mostrando el típico dibujito de que no ha encontrado la imagen, aunque una vez cargado AngularJS se cargará la imagen correcta.

Veamos un ejemplo:

<sxh html;title:index.html;highlight: [9,10,12];>
<!DOCTYPE html>
<html ng-app="app">

  <head>
    <script src="//ajax.googleapis.com/ajax/libs/angularjs/1.2.19/angular.js"></script>
  </head>

  <body ng-controller="PruebaController">
    <img src="http://www.cursoangularjs.es/lib/tpl/dokubook/images/{{fileName}}" >
    <img ng-src="http://www.cursoangularjs.es/lib/tpl/dokubook/images/{{fileName}}" >
    
    <script src="script.js"></script>    
  </body>

</html>
</sxh>

  * Linea 9: Al usar el atributo ''src'' se verá el icono de que no ha cargado la imagen aunque luego ya aparece la imagen correcta.
  * Línea 10: Usando la directiva ''ng-src'' no se ve nada hasta que no se carga la imagen correcta.
  * Linea 12: Cargamos el fichero "script.js" para que se vea mejor que aún no se ha cargado la imagen ya que primero se cargarán las imágenes y luego se cargará este script.

<sxh js;title:script.js;highlight: [3,6];>
var app = angular.module("app", []);

alert("Parando la aplicación para que se vea el icono de que no se ha podido cargar la imagen")

app.controller("PruebaController", function($scope) {
  $scope.fileName = "dokuwiki-128.png";
});
</sxh>

  * Linea 3: Ponemos un mensaje para que podamos ver cómo se ve el icono de que no hay imagen.
  * Línea 6: Ponemos en el ''$scope'' el nombre del fichero a cargar.

{{url>http://embed.plnkr.co/vNsiRbD8VgV0BV8wjMJs}}

====== Referencias ======
  * [[https://docs.angularjs.org/api/ng/directive/ngSrc|ng-src]]