02-angular2-Guia_Creacion_de_Componentes

Vista previa del material en texto

Guía Creación de componentes – Angular 2 
 
Objetivo: Creación de nuevos componentes en angular, con soporte para bootstrap. 
 
Software Necesario: 
 Node Js: https://nodejs.org/es/download/ 
 VisualStudio Code: https://code.visualstudio.com/ 
 
Pasos 
1. Abrir la consola de node.js y ubicarse en la carpeta del proyecto. 
Instalamos bootstrp localmente en nuestro proyecto, la opción –save agrega 
la entrada de cada paquete al package.json. 
> npm install bootstrap@next -–save 
2. Modificamos el archivo angular.json (ubicado en la raíz del proyecto), 
agregamos las librerías de bootstrap y javascript, necesarias para que corra 
bootstrap. 
 
3. Probamos el soporte de bootstrap en nuestro proyecto agregando clases de 
bootstrap al archivo app.compoment.html (este componente es el principal que 
se crea de forma automática al crear un proyecto con angular2). Reemplazamos 
TODO el contenido del archivo por. 
 
4. Lanzamos el proyecto en el servidor, probamos el soporte para bootstrap y 
luego detenemos el servidor (control+C). 
 > ng serve 
 
 
https://nodejs.org/es/download/
https://code.visualstudio.com/
 
5. Creación de componentes: ahora crearemos un componente llamado “header”, 
“footer”, “contents” 
 > ng generate component components/header 
 > ng generate component components/footer 
 > ng generate component components/home 
Nota: para un sitio por lo general voy a crear un solo componente header y footer, el 
componente que ira variando será “home”. Luego quizás “contacto”, “galería”, 
“registro”, etc. Contenidos que irá variando en el sitio web. 
Esto creará una carpeta en la cual tendremos todos los archivos del 
componente en la ubicación que muestra el resumen de la operación. 
 
6. Revisamos con que nombre debo referenciar al componente mirando el archivo 
header.component.ts 
 
El campo selector indica que el nombre de la etiqueta a utilizar en el html 
es <app-header></app-header>, entonces agregamos esta etiqueta en el 
html del componente principal app.component.html y modificándolo para que 
quede como muestra la figura. 
 
 
7. Revisamos si efectivamente se levantaron los componentes por medio de sus 
códigos html. 
 
8. De esta manera se creó la estructura básica del sitio web. 
 
 
Tarea: Queda como trabajo dar contenido a cada componente según la 
temática del sitio (Ej. De los proyectos desarrollados en 
práctica), En los archivos: 
- header.component.html debería ir el navbar, 
- home.component.html debería ir el contenido del index.html. 
- footer.component.html debería la información de pie del sitio.