Por que hemos elegido bootstrap, pues por que es la que conozco, es con la que están los ejemplos de angular 2 (a dia de hoy), pero seguramente en un futuro estará el modulo de angular 2 con material, pero de momento lo vamos a integrar con bootstrap
Este ejemplo, se puede encontrar en la siguiente enlace.
Instalar en nuestro proyecto bootstrap.
Lo primero que vamos a hacer es instalar en nodejs, bootstrap
npm install bootstrap --saveEste comando nos va a descargar en el directorio node_module\bootsrap los ficheros.
Configurar bootsrap en index
Ahora lo que vamos hacer es asociar en el fichero de index.html, la css de bootsrap.
Así quedaría nuestro fichero index.hml:<link rel="stylesheet" href="node_modules/bootstrap/dist/css/bootstrap.min.css">
<html>
<head>
<title> Angular 2 (Hola mundo)</title>
<!-- 1. Cargamos las librerias -->
<script src="node_modules/es6-shim/es6-shim.js"></script>
<script src="node_modules/angular2/bundles/angular2-polyfills.js"></script>
<script src="node_modules/systemjs/dist/system.src.js"></script>
<script src="node_modules/rxjs/bundles/Rx.js"></script>
<script src="node_modules/angular2/bundles/angular2.dev.js"></script>
<link rel="stylesheet" href="node_modules/bootstrap/dist/css/bootstrap.min.css">
<!-- 2. Configirar SystemJS -->
<script>
System.config({
packages: {
'app': {defaultExtension: 'js' }
}
});
System.import('app/boot')
.then(null, console.error.bind(console));
</script>
</head>
<body>
<my-app> Cargando ...</my-app>
</body>
</html>
El siguiente paso va a ser configurar nuestro esqueleto del articulo anterior, con una maquetación estándar de bootsrap.
Se vera así la maquetación
Cabecera:
Aquí vamos a ver el titulo del proyecto, y un pequeño menú (en este ejemplo no va a funcionar, ya lo veremos en un articulo sobre el router de angular 2).
<nav class="navbar navbar-default navbar-fixed-top">
<div class="container">
<div class="navbar-header">
<button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#navbar" aria-expanded="false" aria-controls="navbar">
<span class="sr-only">Toggle navigation</span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
<a class="navbar-brand" href="#">Ejemplo angular 2</a>
</div>
<div id="navbar" class="collapse navbar-collapse">
<ul class="nav navbar-nav">
<li class="active"><a href="#about">About</a></li>
<li><a href="#contact">Contact</a></li>
</ul>
</div>
</div>
</nav>
Se vera así la maquetación
Cuerpo
Aquí es donde vamos a pintar un ejemplo de pantalla.
<div class="page-header">
<h1>About</h1> </div> <p class="lead">Este proyecto es un esqueleto configurado en bootstrap (Cabecera,Cuerpo,Pie).</p>
Se vera así la maquetación
Nota: Para esta maquetación hemos creado una css, y en el componente del app.componet pondremos un div que recubrira para que funciona, mirar los fuentes en github.
Pie
Aquí es donde vamos a poner la información referente al pie.
<footer class="footer">
<div class="container">
<p class="text-muted">Es un ejemplo de angular 2 David, Blanco París</p>
</div>
</footer>
Se vera así la maquetación
Ya tenemos nuestro proyecto integrado con bootstrap.
Este ejemplo se basa en el esqueleto que se ha cree en el articulo de crear un esqueleto para nuestra aplicación. (También podéis ver la evolución en los commit del control de versiones).
No hay comentarios:
Publicar un comentario