Este proyecto consiste en un ejemplo de ejecución de una fichero JavaScript desde un componente de Angular. Puede funcionar también si realizas una invocación a una URL.
¿Por qué es útil? La opción normal es añadirlo en el index.html. El problema, lo necesites o no se invocará y consumirá tiempo de respuesta. Con esta solución únicamente se útilizará el script en aquellos componente que lo necesiten realmente, obteniendo un tiempo de respuesta más bajo y una mejor puntuación SEO en tu proyecto Angular.
ng generate service service/youtube
Una vez creado, le añadimos el siguiente código: import { Injectable } from '@angular/core';
@Injectable({
providedIn: 'root'
})
export class YoutubescriptService {
constructor() { }
public loadScript() {
console.log('preparing to load...')
let node = document.createElement('script');
node.src = 'assets/js/iframe_api.js';
node.type = 'text/javascript';
node.async = true;
document.getElementsByTagName('head')[0].appendChild(node);
}
}
Este código es lo importante. Su función, añadir a la etiqueta head el script seleccionado con los parámetros que le indiquemos. En el campo src indicas la ruta (puede ser una URL o un fichero javascript local), le indicamos que lo queremos cargar de forma asíncrona para mejorar el tiempo de respuesta del servidor y, por último, lo añadimos a la zona del html que queramos (en nuestro caso, la parte que corresponde al head) Por último, dónde lo necesitemos, invicamos el servicio para poder añadir en el momento preciso el script tal y como se muestra en el siguiente código. import { Component, OnInit } from '@angular/core';
import {YoutubescriptService} from '../../../../service/youtubescript.service';
@Component({
selector: 'ejemplo',
templateUrl: './enjemplo.component.html',
styleUrls: ['./ejemplo.component.css']
})
export class EjemploComponent implements OnInit {
constructor(private youtubeservice: YoutubescriptService) {
this.youtubeservice.loadScript();
}
}