Upgrade to Pro — share decks privately, control downloads, hide ads and more …

Building Rich Apps with AngularJS on ASP.NET

Building Rich Apps with AngularJS on ASP.NET

Getting started with AngularJS is smooth sailing. But once you master the basics, you begin to realize there are things you wish you knew before you started. This session shares 10 such tips that go beyond the fundamentals. Come learn how to build end-to-end apps using AngularJS and BreezeJS on the ASP.NET platform. We explore how to manage multiple screens, maintain clean code with popular patterns, implement CRUD, perform robust HTML validation, and use local storage for saving work in progress.

John Papa

May 15, 2014
Tweet

More Decks by John Papa

Other Decks in Technology

Transcript

  1. None
  2. Building Rich Apps with AngularJS on ASP.NET www.johnpapa.net

  3. None
  4. None
  5. None
  6. @john_papa ANGULARJS  PATTERNS   10 TIPS JOHN PAPA

  7. ANGULARJS  PATTERNS   @john_papa   Time Productivity Data-binding rocks! What?

    I’m going back to jQuery! Wicked cool! Why the heck is it so difficult?! Thumbs Up for Dependency Injection! OMG, how can I back out of this? Maybe nobody will notice if I switch to Silverlight Angular Rocks! Modularity is the bomb!
  8. None
  9. ANGULARJS  PATTERNS   @john_papa   http://jpapa.me/spangz https://github.com/johnpapa/ng-demos http://jpapa.me/ng-z-wip http://breezejs.com

  10. ANGULARJS  PATTERNS   @john_papa   1.  2.  3.  4.  5. 

    6.  7.  8.  9.  10. 
  11. 1

  12. None
  13. ANGULARJS  PATTERNS   @john_papa   Module View Controller Factories Directives

    Routes $scope
  14. ANGULARJS  PATTERNS   @john_papa  

  15. ANGULARJS  PATTERNS   @john_papa  

  16. ANGULARJS  PATTERNS   @john_papa  

  17. ANGULARJS  PATTERNS   @john_papa  

  18. ANGULARJS  PATTERNS   @john_papa  

  19. ANGULARJS  PATTERNS   @john_papa  

  20. ANGULARJS  PATTERNS   @john_papa  

  21. ANGULARJS  PATTERNS   @john_papa  

  22. ANGULARJS  PATTERNS   @john_papa   Module View Controller Factories Directives

    Routes $scope
  23. 2

  24. None
  25. None
  26. None
  27. ANGULARJS  PATTERNS   @john_papa  

  28. ANGULARJS  PATTERNS   @john_papa  

  29. ANGULARJS  PATTERNS   @john_papa  

  30. None
  31. 3

  32. None
  33. ANGULARJS  PATTERNS   @john_papa   Expose functionality

  34. ANGULARJS  PATTERNS   @john_papa   Immediately Identifiable

  35. ANGULARJS  PATTERNS   @john_papa   http://jpapa.me/ngstormtmpl

  36. None
  37. 4

  38. ANGULARJS  PATTERNS   @john_papa   Locating our code is easy

    Identify code at a glance Flat structure as long as we can Try to stay DRY L I F T http://jpapa.me/1iVpwkp
  39. ANGULARJS  PATTERNS   @john_papa   By Type By Feature

  40. None
  41. ANGULARJS  PATTERNS   @john_papa   Best Advice: Be Consistent! http://jpapa.me/ngstructure

  42. None
  43. 5

  44. None
  45. ANGULARJS  PATTERNS   @john_papa  

  46. ANGULARJS  PATTERNS   @john_papa  

  47. ANGULARJS  PATTERNS   @john_papa  

  48. ANGULARJS  PATTERNS   @john_papa   Controller Factory Directive Routes Module

    Config Service Provider Value Filter
  49. ANGULARJS  PATTERNS   @john_papa  

  50. ANGULARJS  PATTERNS   @john_papa   modularApp avengers dashboard widgets layout

    core ngAnimate ngRoute common ui-bootstrap
  51. None
  52. 6

  53. None
  54. ANGULARJS  PATTERNS   @john_papa   View Controller Data Factory $http

    $scope Web Service
  55. None
  56. 7

  57. None
  58. ANGULARJS  PATTERNS   @john_papa  

  59. ANGULARJS  PATTERNS   @john_papa  

  60. None
  61. 8

  62. None
  63. ANGULARJS  PATTERNS   @john_papa  

  64. ANGULARJS  PATTERNS   @john_papa  

  65. ANGULARJS  PATTERNS   @john_papa  

  66. ANGULARJS  PATTERNS   @john_papa  

  67. ANGULARJS  PATTERNS   @john_papa   Sessions Tracks TimeSlots Rooms Speakers

  68. None
  69. 9

  70. ANGULARJS  PATTERNS   @john_papa  

  71. ANGULARJS  PATTERNS   @john_papa  

  72. None
  73. ANGULARJS  PATTERNS   @john_papa  

  74. ANGULARJS  PATTERNS   @john_papa  

  75. None
  76. None
  77. 10

  78. ANGULARJS  PATTERNS   @john_papa  

  79. ANGULARJS  PATTERNS   @john_papa  

  80. None
  81. ANGULARJS  PATTERNS   @john_papa   Breeze Import/ Export API’s Angular

    Directives Local Storage Angular Services
  82. ANGULARJS  PATTERNS   @john_papa   Listen to breeze Broadcast a

    custom message
  83. ANGULARJS  PATTERNS   @john_papa   Stash all WIP Serialize entity,

    changes and state
  84. ANGULARJS  PATTERNS   @john_papa   Return the newly imported entity

    Grab the stashed WIP Import the WIP into Breeze
  85. ANGULARJS  PATTERNS   @john_papa   Update the asterisk and counter

  86. ANGULARJS  PATTERNS   @john_papa   The WIP data Who tells

    the directive when WIP changes WIP directive
  87. ANGULARJS  PATTERNS   @john_papa  

  88. ANGULARJS  PATTERNS   @john_papa   1.  2.  3.  4.  5. 

    6.  7.  8.  9.  10. 
  89. ANGULARJS  PATTERNS   @john_papa   http://jpapa.me/spangz https://github.com/johnpapa/ng-demos http://jpapa.me/ng-z-wip http://breezejs.com

  90. ANGULARJS  PATTERNS   @john_papa   http://pluralsight.com/training/Authors/Details/john-papa

  91. ANGULARJS  PATTERNS   @john_papa   www.microsoft.com/learning http://microsoft.com/msdn http://microsoft.com/technet http://channel9.msdn.com/Events/TechEd

  92. ANGULARJS  PATTERNS   @john_papa  

  93. ANGULARJS  PATTERNS   @john_papa  

  94. None