Building a miniSPA In a Legacy MVC application

Building a mini-SPA In a Legacy MVC application with Angular and Breeze L. (Van) Van Lowe Twitter: lvanlowe Email: van@nuttin-but. net Web: www. nuttin-but. net

Thank Our Sponsors without whom Today is not Possible Host Platinum Bronze

Housekeeping… • Respect your speakers and fellow attendees: Set mobile devices to vibrate or silent • Fill out session evaluations • You must be present to win at the wrap-up

Introductions It always helps to know who you’re dealing with, so here’s a little background on me. Independent Consultant since 1996 Federal agency 10 years Enterprise (LOB) Developer since 1979 Computer Science MS Asp. Net Developer since 2003 MCSD fortune 100 company 15+ years Volunteer Developer Prince William Special Olympics

Objective To show to add a mini-SPA (Single Page Application) to an existing ASP. NET MVC Application

Assumptions You know about Entity Framework You know what an MVC application is You have a basic understanding ASP MVC You have a basic understanding of javascript You Have a little understanding of angular. js You have a little understanding of breeze. js You know something about Visual Studio You know about Nuget

Not This Kind of SPA

Agenda What are we going to talk about today? Mini SPA Introduction Getting the pieces Mini-SPA framework Building a Mini-SPA

PLURALSIGHT Building Apps with Angular and Breeze - Part 1 & 2 John Papa Building Data-Centric Single Page Apps with Breeze Brian Noyes Angular. JS for. NET Developers Joe Eames & Jim Cooper

Hot Towel Nuget Package

Nuget Packages Angular. Js Breeze Labs - Angular Services Breeze. Server. Web. Api 2 toastr spin. js moments. js

Javascript Libraries ui-bootstrap-tpls-0. 10. 0. js breeze. to$q. shim. js breeze. save. Error. Extensions. js

CSS Libraries Customtheme. css styles. css

Add Breeze. Controller. cs

Add app folder app. js config. route. js config. exception. Handler. js

Add app/common folder common. js logger. js spinner. js

Add app/services folder directives. js entity. Manager. Factory. js datacontext. js

Add app/layout folder shell. js shell. html

Update _Layout. cshtml <html data-ng-app="app"> Javascript libraries CSS libraries

Location Mini - SPA Location. Controller. cs Views/Location/Index app/location. html app/location. js app/services/datacontext. js app/locationdetail. html app/locationdetail. js app/config. route. js

Resources https: //angularjs. org http: //www. breezejs. com/documentation/bree ze-angular-service http: //angular-ui. github. io/bootstrap/