1. Angular Gotchas Best of Web…but watch out Responsive application build with HTML5 and Javascript Mike R. Emo Founder iEmoSoft consulting Featuring Nick Thurow http://www.tinyurl.com/mikeemo memo@iEmosoft.com

2. $Scope Shared vs. Isolate

4. app.directive("fullName", function(){ return { scope: false, template: …" };

5. app.directive("fullName", function(){ return { scope: false, template: …" }; myCtrl (Controller) $scope.firstName = ‘Mike’ $scope.lastName = ‘Emo’ fullName (Directive) $scope.age=31 myCtrl $scope firstName: ‘Mike’ lastName: ‘Emo’ age: 31

6. app.directive("fullName", function(){ return { scope: false, template: …" }; myCtrl (Controller) $scope.firstName = ‘Mike’ $scope.lastName = ‘Emo’ fullName (Directive) $scope.age=31 myCtrl $scope firstName: ‘Mike’ lastName: ‘Emo’ age: 31 They share the SAME scope

7. app.directive("fullName", function(){ return { scope: true, template: …" }; myCtrl (Controller) $scope.firstName: ‘Mike’ $scope.lastName: ‘Emo’ fullName (Directive) $scope.age: 31 myCtrl $scope firstName: ‘Mike’ lastName: ‘Emo’ fullName scope INHERITS from controller scope fullName $scope age: 31

8. app.directive("fullName", function(){ return { scope: { }, template: …" }; myCtrl (Controller) $scope.firstName = ‘Mike’ $scope.lastName = ‘Emo’ fullName (Directive) myCtrl $scope firstName: ‘Mike’ lastName: ‘Emo’ fullName $scope Isolate Scope

9. app.directive("fullName", function(){ return { scope: { family:’=’ }, template: …" }; myCtrl (Controller) $scope.firstName = ‘Mike’ $scope.lastName = ‘Emo’ fullName (Directive) myCtrl $scope firstName: ‘Mike’ lastName: ‘Emo’ fullName $scope family: ‘Emo’ Isolate Scope TWO WAY Binding

10. An Angular Module

11. Controllers { productsCTRL checkoutCTRL } Controllers { productsCTRL checkoutCTRL } An Angular Module

12. Controllers { productsCTRL checkoutCTRL } Controllers { productsCTRL checkoutCTRL } Filters { * currency * orderBy * filter distinctCategories } An Angular Module

13. Controllers { productsCTRL checkoutCTRL } Controllers { productsCTRL checkoutCTRL } Filters { * currency * orderBy * filter distinctCategories } Constants { ‘productsURL’, ‘api/products/getProducts’ ‘maxRetries’, ‘15’ } An Angular Module

14. Controllers { productsCTRL checkoutCTRL } Controllers { productsCTRL checkoutCTRL } Filters { * currency * orderBy * filter distinctCategories } Constants { ‘productsURL’, ‘api/products/getProducts’ ‘maxRetries’, ‘15’ } Factories { … } An Angular Module

15. Controllers { productsCTRL checkoutCTRL } Controllers { productsCTRL checkoutCTRL } Filters { * currency * orderBy * filter distinctCategories } Constants { ‘productsURL’, ‘api/products/getProducts’ ‘maxRetries’, ‘15’ } Factories { … } Directives An Angular Module

16. Controllers { productsCTRL checkoutCTRL } Controllers { productsCTRL checkoutCTRL } Filters { * currency * orderBy * filter distinctCategories } Constants { ‘productsURL’, ‘api/products/getProducts’ ‘maxRetries’, ‘15’ } Factories { … } Directives An Angular Module Module(s) “Dependencies”

18. listOfProducts.html SportzApp Module “Bucket”

19. mainCtrl --------------------- $scope listOfProducts.html SportzApp Module “Bucket”

20. mainCtrl --------------------- $scope cart (factory) listOfProducts.html SportzApp Module “Bucket”

21. mainCtrl --------------------- $scope checkoutCTRL --------------------- $scope cart (factory) listOfProducts.html SportzApp Module “Bucket”

22. mainCtrl --------------------- $scope checkoutCTRL --------------------- $scope cart (factory) listOfProducts.html cartSummary.html placeOrder.html thankYou.html SportzApp Module “Bucket”

23. Web Server Client Machine

24. Web Server Client Machine Angular Controllers Angular Directives

25. Web Server Client Machine Angular Controllers Angular Directives Local Server Ajax Cache Factory Biz Log

26. Recap Don’t overuse modules

27. Recap Don’t overuse isolate scope

28. Recap Don’t overuse modules Don’t overuse isolate scope Consider Directives and reusability

29. Recap Don’t overuse modules Don’t overuse isolate scope Consider Directives and reusability Don’t overuse watches

30. Recap Don’t overuse modules Don’t overuse isolate scope Consider Directives and reusability Don’t overuse watches Do consider local server pattern

31. Recap Don’t overuse modules Don’t overuse isolate scope Consider Directives and reusability Don’t overuse watches Do consider local server pattern Keep directives and controllers thin

32. Recap Don’t overuse modules Don’t overuse isolate scope Consider Directives and reusability Don’t overuse watches Do consider local server pattern Keep directives and controllers thin Remove event handlers when applicable to avoid memory leaks

33. Angular Gotchas Best of Web…but watch out Responsive application build with HTML5 and Javascript Mike R. Emo Founder iEmoSoft consulting Featuring Nick Thurow http://www.tinyurl.com/mikeemo memo@iEmosoft.com

34. Contact Info Mike Emo Email: Memo@iEmosoft.com Blog: TheMikeEmo.com Phone: 612-615-6937 Nick Thurow NThurow@gmail.com.Net Solution https://github.com/emomon23/IntroToAngular