Ejemplo práctico de la charla : "Desarrollo `Moderno´ de Aplicaciones Web .NET

WebModerno-Ejemplo.md

Desarrollo "Moderno" de Aplicaciones Web .NET - Ejemplo practico

Variable de entorno para modo desarrollo de .NET Core y ejecutar

SET ASPNETCORE_ENVIRONMENT=Development
dotnet run

Modificar componente fechdata para añadir una columna para mostar detalle

<td>
    <a [routerLink]="['/fetch-data', forecast.dateFormatted]">
        <span class='glyphicon glyphicon-edit'></span>
    </a>
</td>

Crear nuevo componente con el detalle de datos de temperaturas

detail/detail.component.html

<h2>Detalle:</h2>
<p>Date: <strong>{{ dateFormatted }}</strong></p>

detail/detail.component.ts

import { Component, OnInit } from '@angular/core';
import { ActivatedRoute, Params } from '@angular/router';

@Component({
    selector: 'detail',
    template: require('./detail.component.html')
})
export class DetailComponent implements OnInit {
    public dateFormatted: string;

    constructor(private route: ActivatedRoute) {
        
    }

    public ngOnInit(): void {
        this.route.params.forEach((params: Params) => {
            this.dateFormatted = params['dateFormatted'];
        });
    }
}

Añadir el nuevo componente y la ruta del nuevo componente en app.module.ts

declarations

DetailComponent

routes

{ path: 'fetch-data', component: FetchDataComponent, children: [
    {path: ':dateFormatted', component: DetailComponent},
    {path: '', component: null}
    ]},

Añadir la region de navegación en la plantilla de fechtdata

<router-outlet></router-outlet>

Módulo para ventanas de dialogo

Instalar paquete

npm i ng2-modal --save

Añadir a app.module.ts

import { ModalModule } from 'ng2-modal'

ModalModule // en la sección imports

Modificar detail.component.html

<route-modal [cancelUrl]="['../']">
    <modal-header>
        <h2>Detalle</h2>
    </modal-header>
    <modal-content>
        <p>Date: <strong>{{ dateFormatted }}</strong></p>
    </modal-content>
    <modal-footer>
        <button class="btn btn-primary" [routerLink]="['../']">okay!</button>
    </modal-footer>
</route-modal>