Innovando en arquitecturas .NET con Angular 2

Nuestras locaciones

Nuestros Panelistas

Mariano Mazzieri Lead Developer

Paulina Ibarra Marketing Analyst

Introducción

• Propósito / Objetivos

• Prototipo: Angular Blog

• Foco

QUESTIONS #ArquitecturaBelatrix

Prototipo - Caso de Estudio

Angular Blog

- Login y Autenticación

QUESTIONS #ArquitecturaBelatrix

Prototipo - Caso de Estudio

Angular Blog

- Menú Principal

QUESTIONS #ArquitecturaBelatrix

Prototipo - Caso de Estudio

Angular Blog

- Registración

QUESTIONS #ArquitecturaBelatrix

Prototipo - Caso de Estudio

Angular Blog

-Mantenimiento

de Cuenta

QUESTIONS #ArquitecturaBelatrix

Prototipo - Caso de Estudio

Angular Blog

- Nuevo Post

QUESTIONS #ArquitecturaBelatrix

Prototipo - Caso de Estudio

Angular Blog

- Visualización y

Comentarios

QUESTIONS #ArquitecturaBelatrix

Prototipo - Caso de Estudio

Angular Blog

-Posts Recientes

QUESTIONS #ArquitecturaBelatrix

Prototipo - Caso de Estudio

Angular Blog

-Búsqueda

QUESTIONS #ArquitecturaBelatrix

Arquitectura

Elementos Generales

- AngularBlog.UI

- AngularBlog.API

QUESTIONS #ArquitecturaBelatrix

Arquitectura

Tecnologías

- Angular 2

- TypeScript

- WebAPI 2

- OAuth 2

- Entity Framework 6

- CastleWindsor

QUESTIONS #ArquitecturaBelatrix

Backend

Infraestructura

QUESTIONS #ArquitecturaBelatrix

Backend

Capa de Datos

- Repositorios

- AccountRepository

- PostsRepository

QUESTIONS #ArquitecturaBelatrix

Backend

Capa de Negocios

- Servicios

- AccountService

- PostsService

QUESTIONS #ArquitecturaBelatrix

Backend

Capa de Interfaz de Servicios

Web API 2

- OAuth 2

- CastleWindosor

QUESTIONS #ArquitecturaBelatrix

Frontend

Preparación del Proyecto

Instalación de Angular 2

- NuGet

- NPM

QUESTIONS #ArquitecturaBelatrix

Frontend

Configuración Global de Rutas

·Configuración del Servidor Web / IIS

·Ruta Base SPA

-Configuración Client-Side

-Configuración Server-Side

QUESTIONS #ArquitecturaBelatrix

Frontend Estructura de Directorios

QUESTIONS #ArquitecturaBelatrix

Frontend

Bootstrapping

- App Component

- App Module

- Main

- Index

QUESTIONS #ArquitecturaBelatrix

Frontend Configuración de Rutas Internas

Funcionalidad Ruta

app.routing.ts

-Path -Component -Data -Resolve -Activate

-

QUESTIONS #ArquitecturaBelatrix

Frontend

Componentes

·Imports

·Anotaciones

-Selector

-Template URL

Module Id

QUESTIONS #ArquitecturaBelatrix

Frontend

Componentes

-Login Component

-Account Component

-Posts List Component

-New Post Component

App Component

QUESTIONS #ArquitecturaBelatrix

Frontend

Servicios de Datos

· Http, Headers, Observables, Promises

· Elementos Comunes

-Busy Indicator

-Manejo de Errores

Uso de otros servicios especializados

QUESTIONS #ArquitecturaBelatrix

Frontend

Configuración

·Server Side

·No es parte del build

·Responsabilidades del SettingsService

-Obtener Datos

-Proveer Interfaz de Acceso

-Asegurar Disponibilidad a Consumidores

QUESTIONS #ArquitecturaBelatrix

Frontend

Autenticación

UserService

-Realiza el Login y gestion de Auth Token -Provee información del usuario actual -Expone el estado de autenticación del usuario -Genera Headers con autorización para la API -Logout

QUESTIONS #ArquitecturaBelatrix

Frontend

Autorización

LoggedInGuard

-Utilizado en la configuración de rutas internas

-Implementa CanActivate

-UserService proporciona estado de la sesión

QUESTIONS #ArquitecturaBelatrix

Frontend

Comunicación y Mensajería

MediatorService

·Subscripción a través de Observales ·Emisión de mensajes

-Error -Success -Busy

QUESTIONS #ArquitecturaBelatrix

Prototipo

QUESTIONS #ArquitecturaBelatrix

¡Muchas Gracias!