.NET CORE + ANGULAR

Jesús Rodríguez

.NET CORE + ANGULAR

¿Por qué Angular?

Single Page Application

Aplicación independiente

Componentes y WebComponents

<sequel-calendar
    [date]="date"
    [options]="options">
</sequel-calendar>
<div id="calendar"></div>

Separación de conceptos

.NET CORE + ANGULAR

Typescript e inyección de dependencias

Ventajas para usuarios .NET

@Injectable()
export class ClientsService {

  constructor(private http: Http) { }

  getClients(): Observable<IClient[]> {
    return http.get('/api/clients')
       .map(c => c.json());
  }
}

.NET CORE + ANGULAR

Bundles muy grandes que descargar en cliente

¿Desventajas?

.NET CORE + ANGULAR

¿Previews? ¿Seo? ¿Qué seo?

¿Desventajas?

.NET CORE + ANGULAR

¿Cómo combinarlos? Opción 1

localhost:5000

localhost:4200

dominio.com

http.get('localhost:5000/api/clientes');

Array<Cliente>

.NET CORE + ANGULAR

¿Cómo combinarlos? Opción 2

localhost:5000

.NET CORE + ANGULAR

Aplicación clásica

Respuesta

inicial

Descargando

assets

Init

Pidiendo

datos

Renderizado

.NET CORE + ANGULAR

Aplicación con Server Side Rendering

Respuesta

inicial

Descargando

assets

Init

Pidiendo

datos

Renderizado

Página

estática

.NET CORE + ANGULAR

DEMO

.NET CORE + ANGULAR

  • Angular Essentials

Tuneando Visual Studio Code

  • Auto Import
  • C#
  • C# Extensions

.NET CORE + ANGULAR

  • https://github.com/Foxandxss/lenguajes-core

Enlaces

  • https://webpack.js.org/
  • https://docs.microsoft.com/en-us/aspnet/core/client-side/spa-services
  • https://github.com/aspnet/JavaScriptServices
  • https://github.com/MarkPieszak/aspnetcore-angular2-universal
  • https://github.com/aspnet/templating
  • https://github.com/angular/universal

dotnetmalaga2017

By Jesus Rodriguez

dotnetmalaga2017

.NET core + Angular v4

  • 466