Saltar al contenido

Angular 2 y .NET Core: enrute directamente a sus componentes · jonhilton.net

La última vez, echamos un vistazo rápido a la creación de un componente HelloWorld simple y lo mostramos en una de nuestras páginas web existentes usando su selector.

<helloworld></helloworld>

Lo que produjo algo como esto …

Utilizando la helloworld selector ahora puede incluir este componente en cualquier lugar que desee en su aplicación, no importa cuántas veces lo use. En cualquier lugar donde pueda escribir html, puede incluir su componente; esto se incluye en la plantilla de otro componente. Por ejemplo, puede mostrar su helloworld componente en la plantilla para el home componente.

<h1>Hello, world!</h1>

<helloworld></helloworld>
 
<p>Welcome to your new single-page application, built with:</p>
<ul>
    <li><a href="https://get.asp.net/">ASP.NET Core</a> and <a href="https://msdn.microsoft.com/en-us/library/67ef8sbd.aspx">C#</a> for cross-platform server-side code</li>
    <li><a href="https://angular.io/">Angular 2</a> and <a href="http://www.typescriptlang.org/">TypeScript</a> for client-side code</li>
    <li><a href="https://webpack.github.io/">Webpack</a> for building and bundling client-side resources</li>
    <li><a href="http://getbootstrap.com/">Bootstrap</a> for layout and styling</li>
</ul>
</pre>

Obtener el codigo: Código fuente de ASP.NET Core y Angular 2 Weather Checker

Obtener el codigo: Código fuente de ASP.NET Core y Angular 2 Weather Checker

Odio el SPAM y mantendré segura su dirección de correo electrónico. Estarás suscrito a mis correos electrónicos semanales y podrás darte de baja fácilmente si prefieres no recibirlos.

Ruta a un componente

Todo muy bien, pero ¿qué pasa si queremos mostrar este contenido por sí solo, no anidado en otra página?

El enrutador Angular 2 es una herramienta poderosa que le permite hacer precisamente eso. Específicamente, puede configurarlo para que se enrute a un componente cuando el usuario ingrese una URL específica para su sitio.

Entonces, en este caso, podríamos configurarlo para que navegar a http://thissitesaddress.com/hello se dirija directamente al componente hello world.

Abra su archivo app.module.ts y realice el siguiente cambio simple en la sección de enrutamiento.

imports: [
        UniversalModule,
        RouterModule.forRoot([
            { path: '', redirectTo: 'home', pathMatch: 'full' },
            { path: 'home', component: HomeComponent },
            { path: 'counter', component: CounterComponent },
            { path: 'fetch-data', component: FetchDataComponent },
            { path: 'hello', component: HelloWorldComponent },
            { path: '**', redirectTo: 'home' }
        ])
    ]

Por cierto, la última ruta (**) significa que cualquier URL no reconocida (por ejemplo, / nothingmuchimparticular) redirigirá a la página de inicio.

Ahora pruébelo ejecutando su sitio y cambiando la URL para que termine con / hello.

Quizás se pregunte cómo angular decide dónde renderizar el html del componente. Simplemente busca el router-outlet selector y renderiza su componente allí.

En nuestro caso, la etiqueta de salida del enrutador está incluida en el componente principal de la aplicación (app.component.html).

<div class="container-fluid">
    <div class="row">
        <div class="col-sm-3">
            <nav-menu></nav-menu>
        </div>
        <div class="col-sm-9 body-content">
            <router-outlet></router-outlet>
        </div>
    </div>
</div>

Enlace a su ruta

Si desea mostrar un enlace a su nueva ruta, deberá modificar la navegación de su sitio. Como con todo lo demás, el menú de navegación es su propio componente.

Modificar navmenu.component.html como sigue.

<li [routerLinkActive]="['link-active']">
    <a [routerLink]="['/fetch-data']">
        <span class="glyphicon glyphicon-th-list"></span> Fetch data
    </a>
</li>
<li [routerLinkActive]="['link-active']">
    <a [routerLink]="['/hello']">
        <span class="glyphicon glyphicon-user"></span> Hello
    </a>
</li>

Ahora sus usuarios pueden navegar hasta su saludo amistoso …

Lluvia, lluvia, vete …

Suficiente HelloWorld, la próxima vez continuaremos con la construcción de un componente más útil.

Vamos a crear un componente simple que le permitirá ingresar el nombre de una ciudad y luego ver el clima actual de esa ciudad.

Para ahorrarnos el almacenamiento de estos datos, usaremos un servicio de terceros y nos conectaremos a él a través de la API web. Eso significa que pasaremos de Angular 2 (nuestro SPA) a .NET Core Web API, que a su vez accederá al servicio meteorológico de terceros.

Crédito de la foto: Bill Herndon Farm Road 2775 vía (licencia)

Todas las publicaciones en el Verificación del clima con Angular 2 y ASP.NET Core serie.