Cambiando dinámicamente la etiqueta title y las metaetiquetas en angularJS

Usando ngMeta para modificar el contenido del <head> en nuestra aplicación "SPA"

jueves, 7 de julio de 2016
Categorías: JavaScript
Text_2

Cuando realizamos una SPA (Single Page Application) por lo general tendremos un archivo index.html que se descargará una única vez y en el que dinámicamente mediante javascript -da igual si usamos un framework como angular o no- iremos modificando su contenido haciendo peticiones al servidor. El problema es que todo ese “dinamismo” se suele encontrar dentro del body y olvidamos que dentro del head también hay contenido.

Podemos usar varias formas para cambiar estas metaetiquetas pero la que yo voy a explicar aquí me parece muy sencilla y no implica desmontar la aplicación para implementarla.

Antes de nada decir que lo que voy a explicar aquí lo puedes leer -si te llevas bien con el inglés- en la documentación de la librería en Github.

1. Descarga

Podemos descargar la librería directamente en su repositorio o instalar esta mediante Bower o npm:

npm
npm install ng-meta --save
Bower
bower install ngMeta --save

2. Enlazado

Una vez descargado debemos enlazarlo a nuestro proyecto. Añadimos ngMeta como dependencia a nuestro módulo. ngMeta es compatible con ui-router y ngRouter.

angular.module('app',['ngMeta']);

No hay que olvidar haber enlazado el archivo javascript en nuestro archivo html.

3. Añadir etiquetas estáticas

Para añadir las etiquetas estáticas -las que, para una misma página, nunca cambian-  de nuestro sitio solo hay que incluir en cada ruta un objeto “meta” cuyas propiedades sean las mismas que usaremos en el head de nuestra aplicación. Hay que tener en cuenta que se pueden usar los nombres que prefiramos pero que hay algunos como ‘title’ o ‘titlePrefix’ que ya vienen reservados.

.config(function ($routeProvider, ngMetaProvider) {

  $routeProvider
  .when('/home', {
    templateUrl: 'home-template.html',
    meta: {
      'title': 'Home page',
      'description': 'This is the description shown in Google search results'
    }
  })
  .when('/login', {
    templateUrl: 'login-template.html',
    meta: {
      'title': 'Login page',
      'titleSuffix': ' | Login to YourSiteName',
      'description': 'Login to the site'
    }
  });
  ...
});

4. Iniciar ngMeta

Tan solo tenemos que llamar a la función init() dentro del bloque run().

app.run(['ngMeta', function(ngMeta) { 
  ngMeta.init();
}]);

5. Definir las metaetiquetas en el html

Aquí no hay nada raro, simplemente mostramos los datos como si fuese una plantilla normal de nuestro sitio…

<title ng-bind="ngMeta.title"></title>
<!-- OR <title>{{ngMeta.title}}</title> -->    

<!-- Arbitrary tags -->
<meta property="og:type" content="{{ngMeta['og:type']}}" />
<meta property="og:locale" content="{{ngMeta['og:locale']}}" />
<meta name="author" content="{{ngMeta['author']}}" />
<!-- OR <meta name="author" content="{{ngMeta.author}}" /> -->
<meta name="description" content="{{ngMeta.description}}" />

Con esto cambiariamos las metaetiquetas en angularjs pero solo en las páginas estáticas (o en las dinámicas sin tener en cuenta el contenido…). Vamos a ampliar esto un poco para que podamos recoger los datos de los controladores.

6. Datos dinámicos

Para cambiar los datos dinámicamente solo hay que pasar al controlador el servicio ngMeta y hacer uso de sus métodos .setTitle(‘título’) o setTag(‘nombre etiqueta’, ‘valor de la etiqueta’)

angular.module('YourApp')
.controller(function(ngMeta) {
  //These examples assume useTitleSuffix is enabled,
  //and default titleSuffix is set to 'Playlist'

  //Custom title and titleSuffix
  ngMeta.setTitle('Eluvium', ' | Spotify'); //Title = Eluvium | Spotify
  //default titleSuffix
  ngMeta.setTitle('Eluvium'); //Title = Eluvium | Playlist
  //Clear the default titleSuffix
  ngMeta.setTitle('Eluvium',''); //Title = Eluvium

  ngMeta.setTag('author', 'Matthew Cooper');
  ngMeta.setTag('image', 'http://placeholder.com/abc.jpg');
});

Para verlo todo con mayor detalle solo hay que ir al repositorio en Github y está todo bien explicado. Como ya he dicho esto solo es un resumen en español de lo que explica el autor en el repositorio:

https://github.com/vinaygopinath/ngMeta

Deja un comentario con tu opinión o cuéntanos tu sistema para cambiar las etiquetas meta en angular.

TAGS

Compartir

Comentarios