Como se explicó en el primer post de Angular 4, la forma en la que se crea una aplicación es a través de componentes. En este post se explicará como crear componentes manualmente y haciendo uso de la CLI(Command line interface). Se tomará como base el post Configura Bootstrap en Angular 4.
Una vez que se tiene un proyecto construido veremos un componente llamado app.component que será utilizado para cargar el contenido al archivo index.html. A continuación veremos como crear componentes adicionales a nuestra aplicación.
Creación de componentes manualmente
A continuación crearemos un componente nuevo llamado posts siguiendo los siguientes pasos:
- Crear un folder con el nombre del componente dentro del folder src/app/ , en este caso nuestro folder sería /src/app/posts.
- Dentro del folder /src/app/posts crearemos los siguientes archivos:
- posts.component.html : Contendrá el HTML que se desplegará donde se inserte el componente
- posts.component.ts : Contendrá una clase typescript que definirá el componente.
- Dentro del folder /src/app editaremos el archivo app.modules.ts para registrar el nuevo componente.
Paso 1 Editar el archivo app.component.html
El primer paso para este ejemplo será editar el archivo app.component.html con el siguiente código:
<div align="center"> <h1>Geeks México</h1> <h3>Base component</h3> <img class="img-fluid" src="https://geeksjavamexico.files.wordpress.com/2017/09/5.png?w=400" width="25%" height="25%" alt=""></div>
Con esto la aplicación se verá como se muestra en la siguiente imagen:
Paso 2: Agregar un nuevo componente
Una vez que tenemos el componente base que es app.component, el siguiente paso es crear el componente posts. Para esto seguiremos los siguientes pasos:
1.- Crear un folder vacío en el folder /src/app/ llamado posts
2.- Crear el archivo posts.components.html dentro del folder /src/app/posts.
<div align="center"> <h3>Post List</h3> <div> <table class="table"> <tr> <th>Author Twitter</th> <th>Post name</th> <th>Post date</th> </tr> <tr> <td>@raidentrance</td> <td>Angular from scratch</td> <td> 10/10/2017</td> </tr> </table> </div> </div>
3.- Crear el archivo posts.components.ts dentro del folder /src/app/posts.
import { Component } from '@angular/core'
@Component({
selector: 'app-posts',
templateUrl: './posts.component.html'
})
export class PostsComponent {
}
Paso 3: Incluir el nuevo componente en el archivo app.modules.ts
Una vez que ya se creó el componente el siguiente paso es registrarlo dentro del archivo app.modules.ts. Para hacerlo debemos editar el archivo como se muestra a continuación:
import { BrowserModule } from '@angular/platform-browser';
import { NgModule } from '@angular/core';
import { AppComponent } from './app.component';
import { PostsComponent } from './posts/posts.component';
@NgModule({
declarations: [
AppComponent,PostsComponent
],
imports: [
BrowserModule
],
providers: [],
bootstrap: [AppComponent]
})
export class AppModule { }
Las modificaciones que se harán al archivo app.modules.ts son las siguientes:
- Incluir la sentencia import para PostsComponent desde ./posts/posts.component
- Incluir PostsComponent en el objeto declarations
Paso 4: Incluir el nuevo componente en el componente principal
Para hacer esto lo único que debemos hacer es editar el archivo app.components.html Como se muestra a continuación:
<div align="center"> <h1>Geeks México</h1> <h3>Base component</h3> <img class="img-fluid" src="https://geeksjavamexico.files.wordpress.com/2017/09/5.png?w=400" width="25%" height="25%" alt=""></div> <app-posts></app-posts>
Como se puede observar,la única modificación fue agregar al final el selector de nuestro componente llamado .
Una vez concluido lo anterior la página se verá como se muestra a continuación:
Creando un componente utilizando la CLI
Crear un componente utilizando la línea de comandos es mucho más sencillo, solo debes ejecutar el siguiente comando:
ng generate component posts
Una vez hecho esto verás que todos los archivos necesarios fueron creados automáticamente y que lo único que resta es editar los archivos para tener todo listo. Si tienes alguna pregunta sobre como hacerlo tu mismo, agrégala a los comentarios.
Autor: Alejandro Agapito Bautista
Twitter: @raidentrance
Contacto:raidentrance@gmail.com
devs4j 