Este taller se va a realizar directamente sobre el proyecto. El objetivo es que cada estudiante del grupo seleccione un recurso para construir el módulo y el componente que lista.

• Creación del proyecto front
• Creación de un módulo
• Creación del componente de listar
• Importar el módulo creado y exportar el componente
• Completar el componente de listar

El líder del grupo crea el proyecto utilizando angular-cli.

El repo ya está creado con un nombre sx-front-nombre. Donde x es el número de la sección. Por ejemplo: s2-front-carros

Vaya a la organización Uniandes-isis2603 y busque su repo para el proyecto front. Copie el nombre y en una ventana de comandos ejecute:

ng new nombredelrepo

Abrir en netbeans y commit & Push

• Abra el proyecto que creó en Netbeans.
• Realice un commit del proyecto
• Realice un push donde da el path del nuevo repositorio

Una vez creado el proyecto cada integrante del grupo puede clonarlo en su netbeans.

Para crear un módulo, en una ventana de comandos, vaya a la carpeta donde se encuentra el proyecto y ejecute:

ng generate module nombremodulo

Es mejor que todas las letras del nombre del módulo estén en minúsculas.

Para crear el componente, en una ventana de comandos, vaya a la carpeta donde se encuentra el proyecto y ejecute: (asegúrese de escribir el path del módulo al que pertenece el componente que va a crear):

ng generate component nombremodulo/nombremodulo-list

Ahora vaya a netbeans y verifique que todo quedó bien: los nombres, carpetas, el componente dentro de la carpeta del módulo.

Actualice el repo con un commit/push. Y luego haga pull para tener los cambios de los demás.

Si vemos la figura de los módulos del ejemplo book:

Necesitamos definir la relación import entre el módulo principal AppModule y los módulos que cada uno creo.

Para esto, vamos al archivo app.module.ts donde se encuentra la definición de AppModule y agregamos, donde nombremodulo es el nombre que Ud. le dió a su módulo:

import { nombremoduloModule } from './nombremodulo/nombremodulo.module';

Ahora en el mismo archivo, en la parte de la anotación @NgModule , agregamos en los imports, nombremodulo:

@NgModule({
    declarations: [
        AppComponent
    ],
    imports: [
        BrowserModule,
        nombremoduloModule,

...

Ahora vaya a su módulo nombremoduloModule y en la anotación @NgModule después de la declaración del componente listar que creó, agregue un exports del componente listar, así:

@NgModule({
  imports: [
    CommonModule
  ],
  declarations: [nombremoduloListComponent],
  exports:[nombremoduloListComponent]
})
export class nombremoduloModule { }

Vaya al archivo app.component.html y deje el siguiente código:

<div style="text-align:center">
  <h1>
    Welcome to {{ title }}!
  </h1>
<app-nombremodulo-list></app-nombremodulo-list>
</div>

Asegúrese que app-nombremodulo-list es el nombre del selector que se encuentra en el componente de listar que ud definió.

Para ver si todo está ok, ejecute sobre su proyecto scripts/ng start y abra localhost:4200 y debería ver algo como:

Welcome to s1-front-miproyecto!
nombremodulo-list works!

Parte 1

Para completar el component Ud. debe revisar la documentación del tutorial listar editoriales.

• Revise el diagrama de diseño del componente. Podrá ver que debe:

  • Definir una interface que representa el tipo de los elementos que va a listar.
  • Definir un servicio para acceder a la lista de elementos.

• Complete y declare los archivos en su módulo. Para el servicio debe también indicar en la anotación de la clase de su módulo que lo provee providers: [nombremoduloService]

• Diseñe el template del componente de listar que está creando.

• Defina un archivo json con los datos que va a desplegar. Este archivo debe ir en la carpeta de assets. Puede ayudarse con mockaroo.

Parte 2

Para tener la barra de menús y permitir la navegación entre los distintos módulos y componentes de la aplicación vea el material que está en Ejemplo Front Book paso 1a.