What’s the $scope?

1. What’s the $scope? • Part II | 3 June 2013

2. Agenda • Overview • How to watch; how watching is implemented • Scope hierarchy • Advanced Use Cases • Events • $apply, $eval, $destroy • Best Practices & Tricks

3. Opower today A SaaSCustomer Engagement Platform • The Company • Serving 85 utilities in 6 countries • Over 2TWh saved to date • 40% of US household data under management totaling 100 billion reads • 300 people in Washington, San Francisco, London, Singapore • Forbes #10 of 100 Most Promising Companies

5. $scope points to your data model $scope write read View (angular templates) Controllers & Directives

6. Scope in the view

7. Scope in the view

8. Scope in the view

9. $watch • Watch expression will be called many times, so it should be fast / idempotent • Making the watch expression slow in one of the few ways to really screw yourself in angular

10. $watch expressions • You’re not limited to just naming variables • Parsed and evaluated with parse.js • Eval demo

11. $watch expressions • Third arg specifies referential or deep equality • fiddle

12. $watch expressions • Use an empty watch expression as a wildcard

13. $watch expressions • Coming soon: $watchCollection

14. Watch / digest cycle JS event (user input, http response, etc) yes Did anything change? Fire watchers No Done!

15. Dirty checking v. change listeners • Less NSFW than it sounds • Excellent SO answer from Misko • Angular uses dirty checking; Knockout and Backbone use change listeners • Dirty checking requires more comparisons, so the comparisons must be fast

16. Dirty checking v. change listeners • Less NSFW than it sounds • Excellent SO answer from Misko • Angular uses dirty checking; Knockout and Backbone use change listeners • Dirty checking requires more comparisons, so the comparisons must be fast

17. POJOs Backbone Angular

18. Excessive Changes fired • O(numTweets) change events fired with change listeners • O(1) change events fired with dirty checking

19. Simultaneous change listeners • Both handlers will be in progress at once with change listening • Only one handler will fire at a time with dirty checking

20. Watch / digest cycle example

21. Watch / digest cycle example

22. Watch / digest cycle example

23. Watch / digest cycle example auth.loggedIn auth.loggedInCount mostRecentServerUpdate

24. Watch / digest cycle example

25. Watch / digest cycle example • Digest iteration count: 0

26. Watch / digest cycle example • Digest iteration count: 1

27. Watch / digest cycle example • Digest iteration count: 2

28. Watch / digest cycle example • Digest iteration count: Done!

29. Watch / digest cycle example • Digest iteration count: 0

30. Watch / digest cycle example • Digest iteration count: 1

31. $scopes are arranged in a hierarchy

32. $scopes are arranged in a hierarchy $rootScope … trending-tweets ng-repeat-0 ng-repeat-n tweet tweet Linked list

33. $scopes are arranged in a hierarchy Main Content Inheritance works with controller scopes, too. Subsection

34. Prototypes $rootScope Child scopes prototypically inherit from their parents top-tweets

35. Prototypes $rootScope Child scopes prototypically inherit from their parents unless the child is an isolate scope top-tweets

36. Prototypes $rootScope Transcluded scopes inherit from their parents Transcluded and isolated scopes are siblings ng-transclude trending-tweets

37. Prototypes

38. Scopes and directives

39. Scopes and directives

40. Scopes and directives

41. Agenda • Overview • How to watch; how watching is implemented • Scope hierarchy • Advanced Use Cases • Events • $apply, $eval, $destroy • Best Practices & Tricks

42. Firing a watch/digest yourself • Want to start a cycle on scope change • Angular gives you this for free • $timeout v. setTimeout • $http • $q • Controllers, directives, etc • Start it manually to integrate with non-angular code

43. Firing a watch/digest yourself JS event (user input, http response, etc) yes Did anything change? Fire watchers No Done!

44. Firing a watch/digest yourself JS event (user input, http response, etc) yes Did anything change? Fire watchers $rootScope.$apply() No Done!

45. Firing a watch/digest yourself

46. Events! $rootScope ng-repeat-0 tweet

47. Events! $rootScope ng-repeat-0 tweet

48. Events! $rootScope ng-repeat-0 tweet

49. $eval • Manually evaluate an expression against the scope

50. $destroy • Removing a DOM node doesn’t remove the associated scope • Do it yourself with $destroy • Broadcasts a $destroy event • Fiddle • ng-repeat calls $destroy: