Uso de temas de Bootswatch para Jhipster

Requiere una versión mayor a la 4 de JHipster y cuya definición sea AngularJS

Para tener temas Bootswatch en lugar del tema por defecto sólo tiene que sustituir el css bootstrap con el css del tema bootswatch. Sin embargo, si desea un conmutador de tema fresco para cambiar entre los temas de Bootswatch dinámicamente, a continuación, siga esta sugerencia.

Nota: reemplace ‘pscApp’ con el nombre generado de su aplicación.

Agrege los siguientes ficheros:

Controlador

Agrega el siguiente controlador como bootswatch.controller.js bajo la ruta webapp/app/components/bootswatch

(function() {
 'use strict';
 
    angular
        .module('pscApp')
        .controller('BootswatchController', BootswatchController);

    BootswatchController.$inject = ['$scope', 'BootSwatchService'];

 function BootswatchController ($scope, BootSwatchService) {

   /*Get the list of availabel bootswatch themes*/
   BootSwatchService.get().then(function(themes) {
    $scope.themes = themes.themes;
    $scope.themes.unshift({name:'Default',css:''});
    //$scope.themes.push({name:'Default',css:''});
   });
   
 }

})();

Servicio

Agrega el siguiente servicio como bootswatch.service.js bajo la ruta webapp/app/components/bootswatch

(function() {
 'use strict';
 
    angular
        .module('pscApp')
        .factory('BootSwatchService', BootSwatchService);

    BootSwatchService.$inject = ['$http'];

 function BootSwatchService ($http) {
  return {
   get: function() {
    
    return $.getJSON("https://bootswatch.com/api/3.json", function (data) {
      return data.themes;
    } );

   }
  };
 }
 
})();

Directiva

Agrega la siguiente directiva como bootswatch.directive.js bajo la ruta webapp/app/components/bootswatch

(function() {
 'use strict';
 
    angular
        .module('pscApp')
        .directive('jhSwitchTheme', jhSwitchTheme);

    function jhSwitchTheme () {
  /*Directive binds to anchor to update the bootswatch theme selected*/
  return {
   restrict: 'A',
   scope: {
    theme : '=jhSwitchTheme'
   },
   link: function (scope, element, attrs) {
    var currentTheme = $("#bootswatch-css").attr('title');
    if(scope.theme.name === currentTheme){
     element.parent().addClass("active");
    }

    element.on('click',function(){
     $("#bootswatch-css").attr("href", scope.theme.css);
     $(".theme-link").removeClass("active");
     element.parent().addClass("active");
    });
   }
  };
 }

})();

En el index.html:

Agregue lo siguiente al archivo index.html después de la tarea de construcción CSS vendor.css para que éstas no se minifiquen y compacten por tarea de compilación.

Añada en el header

   
    
 ...
    
    
 
 
    
    
    
    

Añada lo siguiente en el pie de página

     


This is your footer

    



      



      {{theme.name}}
     

Agrege los siguientes script tags en el fichero index.html manualmente. Si ‘gulp inject’ falla, recibirá errores de angular