Cloud apps with REST APIs using Windows Azure, Asp.NET, ServiceStack and AngularJS

7,507 views

Published on

In this talk, Ash DCosta will show you how to create compelling HTML5 cloud applications, using ServiceStack, AngularJS, Visual Studio and Azure. Creating great REST APIs with ServiceStack is easy, and so is consuming them with AngularJS, and deploying them to the cloud with Windows Azure. Ash will demonstrate all these pieces working together on a small "to-do" web app.

The speaker

Ash DCosta is the founder and chief architect at Mobi Weave, a cloud and mobile solution provider. He has 20+ years of experience in software with Intel, i2 Technologies, IdentityMine, i3Connect and Wells Fargo. You can follow him on Twitter as @softwareweaver.

Published in: Technology
0 Comments
0 Likes
Statistics
Notes
  • Be the first to comment

  • Be the first to like this

No Downloads
Views
Total views
7,507
On SlideShare
0
From Embeds
0
Number of Embeds
466
Actions
Shares
0
Downloads
0
Comments
0
Likes
0
Embeds 0
No embeds

No notes for slide

Cloud apps with REST APIs using Windows Azure, Asp.NET, ServiceStack and AngularJS

  1. 1. Cloud apps withREST APIsUsing Windows Azure, Asp.NET, ServiceStack andAngularJSAsh DCosta@SoftwareWeaverwww.Ashvil.net
  2. 2. About me• Founder and chief architect – Mobi Weave, Inc.• 20+ years experience in software with Intel, i2Technologies, IdentityMine, i3Connect and Wells Fargo• @SoftwareWeaver• www.Ashvil.net
  3. 3. SharePoint on iOSMS BI on iOSApp CatalogCloud based MDMMarketCloud basedSubscriptions
  4. 4. Cloud app?Scale ★ Web ★ API
  5. 5. SPA(AngularJS)API(ServiceStack, ASP.NET & Azure CloudService)DBMobile EAI
  6. 6. ServiceStackConceptsFull (Web) Service Frameworkfor .NET/Mono
  7. 7. What is ServiceStackService Stack is a high-performance .NET webservices framework that simplifies the developmentof XML, JSON, JSV and SOAP Web Services.
  8. 8. EvolutionXML-RPC•XML-RPC.NETSOAP•ASP.NETWS•WCFREST•ServiceStack•Web API
  9. 9. RPC styleCustomer GetCustomerByEmail(string email)Customer GetCustomerBySSN(string ssn)Customer GetCustomerByName(string name)
  10. 10. DTO styleCustomer GetCustomer (Customer customer)
  11. 11. DTO in - DTO out
  12. 12. Todo Get (Todo request)
  13. 13. Call via HTTPhttp://server/Customer/<<SSN>>• Route(url) contains SSNhttp://server/Customer?SSN=32453• Query string contains SSNhttp://Server/Customer• Post Data -> Customer JSONhttp://Server/Customer• Form data -> Customer data
  14. 14. DemoCreate an empty ASP.NETWeb ApplicationPM> Install-PackageServiceStack.Host.AspNetAdd/Edit Services
  15. 15. Bugs and patches to github.com/servicestackSupport on Stack Overflow #ServiceStackGet started at www.ServiceStack.net
  16. 16. SPA(AngularJS)API(ServiceStack, ASP.NET & Azure Cloud Service)DBMobile EAI
  17. 17. AngularJSConceptsHTML6 – MVC like Framework for Browsers
  18. 18. What is AngularJSAngularJS is an open source MVVM Javascriptframework that teaches web browsers new trickslike data binding, custom html tags, routing, Restcalls and promises
  19. 19. Angular Basics
  20. 20. MVC or MVVM•Data in your app. Plain old Javascript objectsModel•$scope object provides data to views bydetecting and broadcasting changes to its stateViewModel•Augments the scope with methods to controlbehaviorController•HTML view handles layoutView
  21. 21. Data Binding
  22. 22. Templates
  23. 23. Directives
  24. 24. DemoSPA App
  25. 25. Bugs and patches to github.com/angularjsSupport on Stack Overflow #AngularJSGet started at www.AngularJS.org
  26. 26. SPA(AngularJS)API(ServiceStack, ASP.NET & Azure CloudService)DBMobile EAI
  27. 27. Azure CloudServiceConceptsScalable Container framework forAzure PaaS
  28. 28. What is AzureCloud ServiceMicrosofts Platform as a Service (PaaS)environment that is used to create scalableapplications and services. Supports multi-tierscenarios and automated deployments
  29. 29. DemoTo Do App on Azure
  30. 30. Try ithttp://cloudtodo.cloudapp.net/
  31. 31. Questions
  32. 32. Appendix
  33. 33. ServiceStackComparisions
  34. 34. BootstrapConceptsCSS Framework for Developers(and Designers)
  35. 35. Toolbar
  36. 36. Form fields
  37. 37. Alerts

×