angular y twitter bootstrap ui 1

Introducción twitter bootstrap ui para angular

Pierre Bonnard

archivado en: JavaScript / 16 enero, 2015

Como es sabido, la librería de twitter bootstrap es un conjunto de reglas css y pequeños scripts js que facilitan el desarrollo de una web o aplicación web, pues hace realmente bien algunos componentes habituales, como la rejilla base, la botonera, los modales o los tooltips. De hecho, solo de pensar que tengo que armar unas css sin bootstrap me da un perezón tremendo : ).

Hay tropecientos millones de tutoriales en internet sobre cómo funciona, así que me salto cualquier preámbulo, y paso a explicar cómo integrarla en angular, que es un tema menos tratado en español.

Veamos primero la forma más sencilla. Lo primero es descargarse los archivos que vamos a necesitar. Para este tutorial, que no quiere decir que sea la estructura óptima para todos los casos, podemos hacer lo siguiente:

1) Nos instalamos el html5 boilerplate, ya sea descargándolo o con yeoman:

Install: npm install -g generator-h5bp

yo h5bp

2) Luego nos bajamos el pack sencillo de bootstrap. Y de ahí copiamos en el directorio raíz la carpeta fonts y en la carpeta css el archivo bootstrap.min.css y, opcionalmente, el bootstrap.css.map. Solo esos.

3) Ahora instalamos los componentes de bootstrap, incluidas las plantillas, con el bower:

bower install angular-bootstrap

4) Ale op, ya solo tenemos que enlazar estilos, frameworks y librerías. En el head de nuestro index.html:

<link rel="stylesheet" href="css/bootstrap.min.css">

<link rel="stylesheet" href="css/main.css">

<!-- por si tienes que hacer cosas con la * tostadora del explorer -->

<script src="js/vendor/modernizr-2.6.2.min.js"></script>

</head>

Y antes del cierre del body (fijaos en el sufijo -tpls):

<script src="bower_components/angular/angular.min.js"></script>

<script src="bower_components/angular-bootstrap/ui-bootstrap-tpls.min.js"></script>

$templateCache

El mecanismo esencial de la librería se basa en dos claves. La primera es el cacheo de plantillas. Si abrimos el archivo bootstrap-tpls sin minificar, al final veremos varias bloques de líneas de este tipo:

angular.module("template/alert/alert.html", []).run(["$templateCache", function($templateCache) {

$templateCache.put(

"template/alert/alert.html",

"<div class='alert' ng-class='\"alert-\" + (type || \"warning\")'>\n" +

" <button ng-show='closeable' type='button' class='close' ng-click='close()'>&times;</button>\n" +

" <div ng-transclude></div>\n" +

"</div>\n" +""

);

}]);

En angular podemos guardar (cachear) plantillas, templates, en el servicio $templateCache. Por ejemplo, imaginemos que tenemos una directiva de este tipo:

angular.directive('directivaCacheada', function() {

return {

restrict: 'EA',

link: function(scope, el, attr) {

},

 template: "<p>-Hola Mundo, soy una plantilla cacheada</p>"+
"<p>-Pues que bien, respondió el unicornio verde"

}

});

La primera vez que se utilice esa directiva, angular cacheará la plantilla, el template, que hemos especificado, en el servicio $templateCache, para ahorrar trabajo posterior; pero lo chulo es que podemos forzar ese cacheado cuando se inicie la aplicación, de tal forma que esté disponible desde el principio.

Hay varias formas de cachear las plantillas, un tema que abordaré otro día con más calma para no desviarnos ahora mucho, pero quizás la más recomendable sea utilizando el método put de $templateCache. Así, por ejemplo, podríamos hacer esto en la declaración del módulo:

var demoBootstrap = angular.module('demoBootstrap', ['ui.bootstrap']);

demoBootstrap.run(function($templateCache) {

$templateCache.put('plantillaCacheada.html', "<p>-Hola Mundo, soy una plantilla cacheada</p>"+ "<p>-Pues que bien, respondió el unicornio verde");

});

Y ya luego podemos invocar esa plantilla donde la necesitemos.

demoBootstrap.directive('directivaCacheada', function() {

return {

restrict: 'EA',

link: function(scope, el, attr) {

},

templateUrl: "plantillaCacheada.html"

}

});

Pues bien, lo que se hace en el archivo ui-bootstrap-tpls es cachear todas las pequeñas templates que luego se necesitarán en los distintos componentes de bootstrap, como los alert o los modales.

De hecho, si no necesitamos todos los componentes, podemos bajarnos solo unos pocos (pulsando Create a build) y luego poner a mano las templates que se necesiten. Por decirlo de alguna manera ui-bootstrap-tpls equivale a ui-bootstrap + todas las plantillas de cada componente.

transclude

La segunda pieza clave para entender cómo funciona angular-bootstrap es la directiva ng-transclude, que, en esencia, funciona al revés de una directiva normal. Es decir, generalmente el contenido de una directiva sustituye o se añade, según tengamos definido replace true o false, al contenido del tag donde se ha invocado.

Por ejemplo, si tenemos esta directiva:

demoBootstrap.directive('directivaNormal', function() {

return {

restrict: 'EA',

replace: true,

template: "<p>Contenido de la directiva</p>"

}

});

Y la cargamos así...

 <directiva-normal>Contenido del tag</directiva-normal>

El resultado final, el código que se renderiza en cliente sería este:

<p>Contenido de la directiva</p>

Sin embargo, con ng-transclude ocurre justo lo contrario, es decir, el contenido del tag se incluye, se transcluye lol, dentro de la directiva. Así, si tenemos esta directiva:

demoBootstrap.directive('directivaTranscluida', function() {

return {

restrict: 'EA',

transclude: true,

template: "<p>Contenido de la directiva y aquí el contenido transcluido <ng-transclude></ng-transclude></p>"

}

});

Y la cargamos así:

<directiva-transcluida>Contenido del tag</directiva-transcluida>

El resultado final será este:

<directiva-transcluida>

<p>Contenido de la directiva y aquí el contenido transcluido

<ng-transclude>

<span class="ng-scope">Contenido del tag</span>

</ng-transclude>

</p>

</directiva-transcluida>

Bueno, la directiva es más compleja, pero con lo visto basta para entender la esencia de angular-bootstrap ui.

Un ejemplo: alert

Para terminar de comprender el tema, vamos a analizar cómo funciona el componente alert, que es uno de los más sencillos.

Como vemos en el archivo ui-bootstrap-tpls.js (línea 3924), por un lado se cachea una plantilla con un transclude en la $templateCache.

angular.module("template/alert/alert.html", []).run(["$templateCache", function($templateCache) {

$templateCache.put("template/alert/alert.html",

"<div class=\"alert\" ng-class=\"['alert-' + (type || 'warning'), closeable ? 'alert-dismissable' : null]\" role=\"alert\">\n" +

" <button ng-show=\"closeable\" type=\"button\" class=\"close\" ng-click=\"close()\">\n" +

" <span aria-hidden=\"true\">&times;</span>\n" +

" <span class=\"sr-only\">Close</span>\n" +

" </button>\n" +

" <div ng-transclude></div>\n" +

"</div>\n" +

"");

}]);

Y luego montan una directiva, con transclude en true, que recibe dos parámetros:

  • type, que es del tipo one-way binding ('@'), es decir, que se recibe del scope padre
  • y close, del tipo method binding ('&'), que sirve para recabarlos de una función del scope padre.

.directive('alert', function () {

return {

restrict:'EA',

controller:'AlertController',

templateUrl:'template/alert/alert.html',

transclude:true,

replace:true,

scope: {

type: '@',

close: '&'

}

};

});

Y ya solo falta invocarla en una vista:

<alert ng-repeat="alert in alerts" type="{{alert.type}}" close="closeAlert($index)">

{{alert.msg}}

</alert>

con su controlador:

demoBootstrap.controller("main", function($scope) {

$scope.alerts = [

{ type: 'danger', msg: '¡Un asteroide chocará contra la Tierra!' },

{ type: 'success', msg: 'Pero tengo paraguas' }

];

$scope.closeAlert = function(index) {

$scope.alerts.splice(index, 1);

};

});

Y hasta aquí con este post. En el siguiente veremos ya cómo lanzar los principales componentes de la librería.

|| Tags: , , ,

valoración de los lectores sobre angular y twitter bootstrap ui 1

  • estrellica valoración positiva
  • estrellica valoración positiva
  • estrellica valoración positiva
  • estrellica valoración positiva
  • estrellica valoración positiva
  • 5 sobre 5 (3 votos)

¿Te ha parecido útil o interesante esta entrada?
dormido, valoración 1 nadapensativo, valoración 2 un poco sonrisa, valoración 3 a medias guiño, valoración 4 bastante aplauso, valoración 5 mucho

Tú opinión es muy importante, gracias por compartirla!

Los comentarios están cerrados.