spa asp.net mvc & angularjs codemotion 2013

Marc Rubiño

Asp.net MVC & SPA

Marc Rubiño@Marc_Rubino

mrubino@pasiona.commrubino@techdencias.net

#CodeMotion

www.pasiona.com(+34) 669 333 333info@pasiona.com

@pasiona BarcelonaPujades 350, 10ª planta

08019 · Barcelona

BilbaoGran Vía 19-21, 2ª planta

48008 · Bilbao

Londres1 Northumberland Avenue

London · WC2N 5BW

MadridPinar 5,

28006 · Madrid

Conocimientoadquirido a través de la realización de proyectos, formación e innovación tecnológica

Innovaciónligada a la mejora continua y basadaen las nuevas oportunidades tecnológicas

Tecnologíasoluciones a cada una de las necesidadesempresariales que se platean en cada ámbito

Valores humanosguía de lo que hacemos y pretendemosque nos enseña y nos conduce día a día

Pasiónsomos grandes entusiastas de todo aquello que creamos y vemos crecer

Experienciao la garantía de la habilidad derivada de años de vivencias y observación

Microsoftsocio 100% alineado partner 100% especializado

Desarrollocapacidad para realizar proyectos deámbito tecnológico con un fin de mejora

Especializaciónofrecemos soluciones a medida con las mejores herramientas tecnológicas

Qué es

SocialMedia

Servicios profesionales

Consultoría Proyectos

Innovación Azure

Formación

Auditoría

Servicios

Single Page Application

Características aplicaciones SPA Routing Datos Arquitectura MV…

Models Views Binding

librerías SPA

librerías SPA AngularJs DurandalJs KnockoutJS Backbone Ember …

Librerías Datos DOM Routing MV* DataBind DI Testing

KnockoutJs X X X MVVM ✓ X X

AngularJs ✓ JQlite ✓ MVW ✓ ✓ ✓

Durandal ✓ JQuery* ✓ MVW KnockoutJs* Require* X

Backbone X X ✓ MVC X X X

librerías SPA

HTML enhanced for web apps!

Estructura

AngularJS .NET Comment

module Assembly Módulos de la app

controller ViewModel Lógica que enlaza con la vista

scope DataContext Databind Controller-View

filter ValueConverter Formatea los datos

directive Component Re-usable UI element

factory, service Utility classes Servicios para otros Módulos

más !!! Dependency Inyection Unit Testing

Funcionamiento

Modules

Modules & Routes

Views & Controllers

Views & Controllers

<div id="main-content"> <div data-ng-view ></div> <!-- The SPA Views go here --> </div>

AnimationsDirective Animation Type

ngRepeat enter, leave and move

ngView enter and leave

ngInclude enter and leave

ngSwitch enter and leave

ngIf enter and leave

ngShow and ngHide show and hide

Marc Rubiño@Marc_Rubino

mrubino@pasiona.commrubino@techdencias.net

Q&A