AngularJS / MVC 5 / Web API 2 -Building a Hybrid Web Application

(Part 1)

Source on GitHub:https://github.com/bgoodearl/MVC5NgDemo

Bob Goodearl – http://rgoodsoftware.com

Robert Hurlbut – http://roberthurlbut.com

Boston Code Camp 22 - Thanks to our Sponsors!

• Gold

• Silver

• Bronze

• In-Kind Donations

The Speakers

Bob GoodearlIndependent Consultant

RGood Software, Inc.

www.RGoodSoftware.com

RobertG at rgoodsoftware.com

Robert HurlbutIndependent Consultant

Robert Hurlbut Consulting Serviceswww.roberthurlbut.com

Robert at roberthurlbut.com

With thanks to Brock Allen for invaluable assistance

Related Sessions

• Angular JS - Creating Super Web Apps without a cape (intro to Angular JS – was at 11:40)

• Mastering JavaScript Promises

• Single sign-on and Web API security with OpenID Connect using Thinktecture IdentityServer v3

• Part 2 of this session

Why a Hybrid App

• Source Reminder:https://github.com/bgoodearl/MVC5NgDemo

• Enhancing an existing MVC web app

• Limited rich client interactionse.g. most of app needs to be searchable/crawlable*

• Skillset of developers available

BUT

• Choosing to limit to Modern Browsers!

• Safari, Chrome, Firefox, Opera 15, IE9 and mobile browsers (Android, Chrome Mobile, iOS Safari)

Demo

• Simple minimalist mini-SPA to list and edit rehearsals for a singing group

Structure of the Application

• Starting from MVC 5 Web API 2 template

• Using Entity Framework for server side data persistence

• Using attribute routing

• Server side MVC list

• AngularJS mini-SPA with (mildly) rich editor

• Added list to mini-SPA (as alternate to server side list)

Technologies Used

• Visual Studio 2013

• MVC 5

• Web API 2

• Angular JS (1.3)

• Beyond Compare

• Side Waffle

• Much more (see packages lists in projects)

Building the Application

• _projectNotes.txt (in solution)

Mitigating against XSS, CSRF

• XSS – Cross Site Scripting

• CSRF – Cross site Request Forgery

• Topics could cover a whole session or more!

• One piece of mitigation in modern browsers:

Content Security Policy• Can be used to limit loading of scripts

http://content-security-policy.com

Resource LinksCode Camp Session details (has link to “session materials”)http://www.bostoncodecamp.com/CC22/Sessions/Details/11195

Beyond Compare: www.scootersoftware.com

SideWaffle Templates: http://sidewaffle.com/

John Papa - Angular Style Guide: https://github.com/johnpapa/angularjs-styleguide

blog: http://www.johnpapa.net/

Dan Whalin: http://weblogs.asp.net/dwahlin

Pluralsight Courses: http://www.pluralsight.com/search/?searchTerm=angularjs

More Resource LinksWintellect Courses

https://www.wintellectnow.com/Course/Detail/mastering-angularjs

AngularJS Token Authentication using ASP.NET Web API 2, Owin, and IdentityPart 1: http://bitoftech.net/2014/06/01/token-based-authentication-asp-net-web-api-2-owin-asp-net-identity/

http://blog.atmybase.com/hybrid-mini-spa-concept-proving-very-effective/

Thinking in AngularJS (from jQuery background)http://stackoverflow.com/questions/14994391/thinking-in-angularjs-if-i-have-a-jquery-background

Ten Things You Should Know about Tokens and Cookieshttps://auth0.com/blog/2014/01/27/ten-things-you-should-know-about-tokens-and-cookies/

Dominic Baier on Security: http://leastprivilege.com/Brock Allen: http://brockallen.com/

CSP – Content Security Policy Resources

http://www.html5rocks.com/en/tutorials/security/content-security-policy/

http://content-security-policy.com/

http://blog.simontimms.com/2013/01/21/content-security-policy-for-asp-net-mvc/

https://docs.angularjs.org/api/ng/directive/ngCsp#!

http://blog.simontimms.com/2013/06/04/gotcha-for-angularjs-for-windows-8-javascript/feed/

Q & A

• Source on GitHub: (https://github.com/bgoodearl)

https://github.com/bgoodearl/MVC5NgDemohttps://github.com/bgoodearl/MVC5NgDemo_ADFShttps://github.com/bgoodearl/MVC5NgDemo_IShttps://github.com/bgoodearl/TTIdSvr_Demo

• Slides online – thru session details from www.BostonCodeCamp.com

Bob Goodearl – http://rgoodsoftware.com

Robert Hurlbut – http://roberthurlbut.com

Thank You!