innovando en arquitecturas .net con angular 2
Post on 09-Jan-2017
151 Views
Preview:
TRANSCRIPT
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!
top related