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.

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

53. View Slide

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

    View Slide

55. View Slide

56. View Slide

57. View Slide

58. ANGULARJS  PATTERNS   @john_papa  
    

    View Slide

59. ANGULARJS  PATTERNS   @john_papa  
    

    View Slide

60. View Slide

61. 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. 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. 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