Como desarrollar un widget con AngularJS

Cargando AngularJS en la página del usuario

Ya que el widget va estar desarrollado con AngularJS necesitamos cargarlo o en el caso de que ya esté cargado no volverlo a hacer.

Para ello miraremos si la variable global angular está creada:

if(typeof window.angular === ‘undefined’){
//Insertaremos AngularJS
}
else{
//AngularJS ya está cargado por lo que cargaremos el widget.
}

Para insertar AngularJS debemos crear un elemento script y agregarle el src del recurso:

function getAngularJS() {
    var script = document.createElement(“script”);
    script.type = “text/javascript”;
    script.src = “https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.4.8/angular.min.js";
     return script;
 }

Ésta función devolverá un elemento script que debemos de añadir en el head de la página. Después comprobaremos si este script esta listo para proceder a la carga del widget que se hará a través de la funcion main().

if(typeof window.angular === ‘undefined’){
     var angularJS = getAngularJS();
     document.getElementsByTagName(“head”)  [0].appendChild(angularJS);

    if(angularJS.complete){
      document.write = document._write;
    }else{
      angularJS.onload = function(){
      setTimeout(function(){
        document.write = document._write;
      }, 0);
      main();
    }
 }
 }else{
     main();
 }

En la función main() hay que hacer varias cosas:

1. Generar el div que va a tener como atributo el ng-controller que contendrá la lógica de nuestro widget.
2. Añadir este div a la página del usuario.
3. Cargar el template de nuestro widget.
4. Agregar el script que contiene nuestro widget a la página del usuario.

Paso 1 y 2:

function buildWidgetHtml(callback) {
     var widgetContainer = document.getElementById(“widget”);
     var appDiv = document.createElement(“div”);
     appDiv.setAttribute(“ng-controller”, “MainCtrl”);
     appDiv.setAttribute(“id”, “MainCtrl”);
     widgetContainer.appendChild(appDiv);
     loadTemplate(callback);
 }

Paso 3:

function loadTemplate(callback) {
  var ajax = new XMLHttpRequest();
  ajax.open(“GET”,”http://findeck.es/getWidgetTemplate.php");
  ajax.send();
  ajax.onreadystatechange=function(){
  if(ajax.readyState == 4 && ajax.status == 200){
   var response = ajax.responseText;
   document.getElementById(“MainCtrl”).innerHTML = response;
   callback();
  }
 };
 }

Paso 4:

var widgetJS = document.createElement(“script”);
widgetJS.type = “text/javascript”;
widgetJS.src = “http://findeck.es/widgetGithubRepos.js";
(document.getElementsByTagName(“head”)[0] || document.documentElement).appendChild(widgetJS);

Una vez hecho esto en la página se cargará todo lo necesario para que el widget funcione. Pero para que AngularJS funcione tenemos que hacer un bootstrap manual por lo que alfinal de nuestro widgetGithubRepos.js deberíamos añadir la siguiente línea:

angular.element(document).ready(function() {
 var divWidget = document.getElementById(“widget”);
 angular.bootstrap(divWidget, [‘reposGithub’]);
});

Si nos damos cuenta en el paso 1 no hemos añadido la directiva ng-app por lo que no debería cargarse en ningún momento la aplicación. Por esta razón y para asegurarnos de que AngularJS inicie el modulo en el momento adecuado debemos hacer una inicialización manual. Algo muy importante es hacerla en el div del Widget y no sobre toda la página.

Documentación para bootstrap: https://docs.angularjs.org/guide/bootstrap

Hecho esto quedaría ver como como se instala el widget:

<div id=”widget”></div>
<script type=”text/javascript” src=”http://findeck.es/widgetGithubReposLoader.js?user=zamarrowski"></script>

Primero insertamos un div con un id. Deberíamos ponerle un id más complejo ya que puede haber algún elemento más en la pagina que tenga el mismo id.

Podéis ver el código completo del ejemplo en:

y probar la demo en:

http://zamarrowski.github.io/Widget-Github-Repositories/

Puntos importantes a tener en cuenta:

1. Al definir las clases de CSS de nuestro template deberíamos ponerles un prefijo del tipo wg_clase.
2. Debemos de configurar nuestro servidor donde tenemos alojado el template para que permita CORS. (Yo tengo un hosting y lo que he hecho es devolver el html a través de un .php y poner una cabecera para que permita CORS).
3. Debemos tener en cuenta que introducir alguna librería externa en la página del cliente puede provocar desajustes en la misma.

Un saludo!