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. View Slide

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

    View Slide

  3. View Slide

  4. View Slide

  5. View Slide

  6. @john_papa
    ANGULARJS  PATTERNS  
    10
    TIPS
    JOHN PAPA

    View Slide

  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!

    View Slide

  8. View Slide

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

    View Slide

  10. ANGULARJS  PATTERNS   @john_papa  
    1. 
    2. 
    3. 
    4. 
    5. 
    6. 
    7. 
    8. 
    9. 
    10. 

    View Slide

  11. 1

    View Slide

  12. View Slide

  13. ANGULARJS  PATTERNS   @john_papa  
    Module
    View Controller
    Factories
    Directives
    Routes
    $scope

    View Slide

  14. ANGULARJS  PATTERNS   @john_papa  

    View Slide

  15. ANGULARJS  PATTERNS   @john_papa  

    View Slide

  16. ANGULARJS  PATTERNS   @john_papa  

    View Slide

  17. ANGULARJS  PATTERNS   @john_papa  

    View Slide

  18. ANGULARJS  PATTERNS   @john_papa  

    View Slide

  19. ANGULARJS  PATTERNS   @john_papa  

    View Slide

  20. ANGULARJS  PATTERNS   @john_papa  

    View Slide

  21. ANGULARJS  PATTERNS   @john_papa  

    View Slide

  22. ANGULARJS  PATTERNS   @john_papa  
    Module
    View Controller
    Factories
    Directives
    Routes
    $scope

    View Slide

  23. 2

    View Slide

  24. View Slide

  25. View Slide

  26. View Slide

  27. ANGULARJS  PATTERNS   @john_papa  

    View Slide

  28. ANGULARJS  PATTERNS   @john_papa  

    View Slide

  29. ANGULARJS  PATTERNS   @john_papa  

    View Slide

  30. View Slide

  31. 3

    View Slide

  32. View Slide

  33. ANGULARJS  PATTERNS   @john_papa  
    Expose
    functionality

    View Slide

  34. ANGULARJS  PATTERNS   @john_papa  
    Immediately
    Identifiable

    View Slide

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

    View Slide

  36. View Slide

  37. 4

    View Slide

  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

    View Slide

  39. ANGULARJS  PATTERNS   @john_papa  
    By Type By Feature

    View Slide

  40. View Slide

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

    View Slide

  42. View Slide

  43. 5

    View Slide

  44. View Slide

  45. ANGULARJS  PATTERNS   @john_papa  

    View Slide

  46. ANGULARJS  PATTERNS   @john_papa  

    View Slide

  47. ANGULARJS  PATTERNS   @john_papa  

    View Slide

  48. ANGULARJS  PATTERNS   @john_papa  
    Controller
    Factory
    Directive
    Routes
    Module
    Config
    Service
    Provider
    Value
    Filter

    View Slide

  49. ANGULARJS  PATTERNS   @john_papa  

    View Slide

  50. ANGULARJS  PATTERNS   @john_papa  
    modularApp
    avengers dashboard widgets layout
    core
    ngAnimate ngRoute common ui-bootstrap

    View Slide

  51. View Slide

  52. 6

    View Slide

  53. View Slide

  54. ANGULARJS  PATTERNS   @john_papa  
    View Controller Data Factory
    $http
    $scope
    Web Service

    View Slide

  55. View Slide

  56. 7

    View Slide

  57. View Slide

  58. ANGULARJS  PATTERNS   @john_papa  

    View Slide

  59. ANGULARJS  PATTERNS   @john_papa  

    View Slide

  60. View Slide

  61. 8

    View Slide

  62. View Slide

  63. ANGULARJS  PATTERNS   @john_papa  

    View Slide

  64. ANGULARJS  PATTERNS   @john_papa  

    View Slide

  65. ANGULARJS  PATTERNS   @john_papa  

    View Slide

  66. ANGULARJS  PATTERNS   @john_papa  

    View Slide

  67. ANGULARJS  PATTERNS   @john_papa  
    Sessions
    Tracks
    TimeSlots Rooms
    Speakers

    View Slide

  68. View Slide

  69. 9

    View Slide

  70. ANGULARJS  PATTERNS   @john_papa  

    View Slide

  71. ANGULARJS  PATTERNS   @john_papa  

    View Slide

  72. View Slide

  73. ANGULARJS  PATTERNS   @john_papa  

    View Slide

  74. ANGULARJS  PATTERNS   @john_papa  

    View Slide

  75. View Slide

  76. View Slide

  77. 10

    View Slide

  78. ANGULARJS  PATTERNS   @john_papa  

    View Slide

  79. ANGULARJS  PATTERNS   @john_papa  

    View Slide

  80. View Slide

  81. ANGULARJS  PATTERNS   @john_papa  
    Breeze Import/
    Export
    API’s
    Angular
    Directives
    Local Storage
    Angular
    Services

    View Slide

  82. ANGULARJS  PATTERNS   @john_papa  
    Listen to breeze
    Broadcast a custom
    message

    View Slide

  83. ANGULARJS  PATTERNS   @john_papa  
    Stash all WIP
    Serialize entity,
    changes and state

    View Slide

  84. ANGULARJS  PATTERNS   @john_papa  
    Return the newly
    imported entity
    Grab the stashed
    WIP
    Import the WIP into
    Breeze

    View Slide

  85. ANGULARJS  PATTERNS   @john_papa  
    Update the asterisk
    and counter

    View Slide

  86. ANGULARJS  PATTERNS   @john_papa  
    The WIP data
    Who tells the directive
    when WIP changes
    WIP directive

    View Slide

  87. ANGULARJS  PATTERNS   @john_papa  

    View Slide

  88. ANGULARJS  PATTERNS   @john_papa  
    1. 
    2. 
    3. 
    4. 
    5. 
    6. 
    7. 
    8. 
    9. 
    10. 

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

  92. ANGULARJS  PATTERNS   @john_papa  

    View Slide

  93. ANGULARJS  PATTERNS   @john_papa  

    View Slide

  94. View Slide