Download as PDF, PPTX
![1. Performance $scope.$watchCollection('items', function (newItems) { for (var i = 0; i < newItems.length; i++) { newItems[i].price = getPrice(newItems.id); } $scope.items = newItems; });](https://image.slidesharecdn.com/advancedangularjs-140422230931-phpapp01/75/Advanced-Tips-Tricks-for-using-Angular-JS-64-2048.jpg)
Uploaded bySimon Guest
Advanced Tips & Tricks for using Angular JS
The document presents a comprehensive overview of advanced tips and tricks for using AngularJS, focusing on project structure, performance optimization, and handling non-Angular dependencies. It emphasizes the importance of separating concerns within the application, managing scope effectively, and improving user experience during loading times. Additionally, the document addresses support for Internet Explorer, minification challenges, and tools for enhancing the development environment.
Advanced Tips & Tricks for using Angular JS
- 1.
- 2. The lastdecade ofserver-sideHTML...
- 4.
- 5. What's wrongwiththis model? »Most UI actions require round trip » Poor mobile experience » Devices are getting more powerful » Servers need to scale » Any offline scenario is near impossible
- 6.
- 8. How doesthis help? »UI actions handled locally » Vasly improved mobile experience » Taking advantage of the power of the device » Server can handle more clients » Offline becomes more manageable
- 9.
- 12.
- 13.
- 14. Who has builtAngularJSsample apps?
- 15. Who is usingAngularJSfor an ongoing project?
- 16. Angular's ups anddowns...
- 18.
- 19.
- 20.
- 21. 10. Structure Howshould Istructure my AngularJS project?
- 22. 10. Structure » Rollyour own » Angular Seed (https://github.com/angular/angular- seed) » Yeoman Angular Generator (http://yeoman.io)
- 24. 10. Structure » Rollyour own » Angular Seed (https://github.com/angular/angular- seed) » Yeoman Angular Generator (http://yeoman.io)
- 25. 10. Structure » Comeback to pivoting on functionality when the project gets large
- 26. 10. Structure > app ->controllers --> todoController.js -> services --> todoService.js -> directives --> todoItemDirective.js
- 27. 10. Structure > app ->todo --> controller.js --> service.js --> itemDirective.js
- 28. 9. Minification Should Iminifymy AngularJS project?
- 29. 9. Minification » Dueto the "DI" way that Angular works, minification is hard
- 30. 9. Minification » Dueto the "DI" way that Angular works, minification is hard » Do you really need to minify?
- 31. 9. Minification » Dueto the "DI" way that Angular works, minification is hard » Do you really need to minify? -- AngularJS includes are already compiled JS -- Yeoman template includes as much minification as you need -- Disable property renaming, and manually change constructors
- 32.
- 33. 8. Directives » Theymake AngularJS unique » They make your markup more declarative » They support templates nicely » They promote re-use » They prevent lots of JavaScript!
- 34. 7. Page Loading HowdoI createagood user experience?
- 35. 7. Page Loading »Flash of {{your.stuff}} when you load the page
- 36. 7. Page Loading »Flash of {{your.stuff}} when you load the page » Use ng-cloak directive in order to hide declarations until they are initialized » Use ng-bind instead of {{}} in your index.html
- 37.
- 39. 6. InternetExplorer » Supportfor IE8 is being removed from Angular 1.3 onwards » If you are going to keep supporting IE8 with Angular 1.2... -- Never use <custom-directive> -- Use <div custom-directive> instead » Ensure that IE is part of test plan (if you are using Selenium)
- 40. 5. Development Environment Whattools shouldI be using?
- 41. 5. DevelopmentEnvironment » AngularSupport in IDEs -- WebStorm 8 -- Sublime -- Use data-ng-* in non-supported environments » Install Angular via Bower
- 42. 5. DevelopmentEnvironment » Logging --Avoid using console.log in your controllers » Use $log instead -- $log can be extended to provide additional logging capabilities
- 43. 5. DevelopmentEnvironment » Batarang --Chrome extension of AngularJS debugging
- 45. 5. DevelopmentEnvironment » Batarang --Chrome extension to enable AngularJS debugging » AngularJS tab in Chrome dev tools -- Enables scope inspection -- Performance to identify trouble spots -- Service dependency graph
- 46. 5. DevelopmentEnvironment » JavascriptDebugging -- Use 'debugger' in any controller to add breakpoint -- Very useful combined with Batarang
- 47. 4.Angular- Supported Frameworks Howdo I dealwithnon- AngularJS stuff?
- 48. 4. Non-Angular Stuff »Bootstrap -- UI Bootstrap -- Components written by the AngularJS team » Examples -- AngularJS version of Alert -- $modal for invoking modals -- Date/time pickers » http://angular-ui.github.io/bootstrap/
- 50. 4. Non-Angular Stuff »jQuery -- Use angular.element instead of $() selector -- Search for a jQuery-equivalent instead » Examples -- html(), text(), val() » Ask whether you can use directives instead
- 51. 4. Non-Angular Stuff »Other JavaScript methods -- angular.fromJson, angular.toJson, angular.copy, angular.extend -- $timeout, $log, $window, $q, $document -- Third party libraries for date formatting » Why? -- Angular methods better observe the scope lifecycle -- More predictable results
- 52. 3. Separation of Concerns HowdoI makethe right choices?
- 53. 3. Separation ofConcerns »Three golden rules -- Controllers should never refer to any DOM elements -- Controllers should call services vs. holding too much business logic -- "How do I pass things between controllers?" --- ...probably means that you are doing things wrong
- 54. 3. Separation ofConcerns »Controller inheritence -- Is possible to use angular.extend to provide some kind of inheritence on controllers
- 55. 2. Scope Whatdo Ineedto know about$scope?
- 56. 2. Scope » Scopeis not your model -- Even though many of the samples show it this way -- Scope should be the glue between your controller and your model (accessed through services) -- Remember, services are singletons
- 57. 2. Scope » Scopeinheritence -- Avoid $rootScope, try to use services instead -- Create subscopes when invoking subcontroller from controller --- Can be a little confusing, especially with frameworks (e.g. Bootstrap modal) -- Batarang can be your friend
- 58. 1. Performance Howdo Iprevent performance bottlenecks?
- 59. 1. Performance » Youare not in control of when Angular invokes functions based on changes to $scope » A single change in scope (e.g keypress) can call multiple functions
- 60. 1. Performance » Mostchanges to $scope are processed in fractions of a second -- Faster than the human eye can detect on a page -- However, once you start reaching 1500+ function calls on a scope change, thing's deteriorate -- Deteriorate really quickly
- 61. 1. Performance » Usingng-repeat or ng-switch can compound this
- 62. 1. Performance <tr ng-repeat="itemin items"> <td>{{item.name}}</td> <td>{{item.description}}</td> <td>{{getPrice(item.id)}}</td> </tr> » How many times will getPrice function be called?
- 63. 1. Performance » Overcomingthis bottleneck -- Never call $scope functions from within ng- repeat or ng-switch statements -- Use watch collection to calculate everyting when the controller is first invoked
- 64. 1. Performance $scope.$watchCollection('items', function(newItems) { for (var i = 0; i < newItems.length; i++) { newItems[i].price = getPrice(newItems.id); } $scope.items = newItems; });
- 65. 1. Performance <tr ng-repeat="itemin items"> <td>{{item.name}}</td> <td>{{item.description}}</td> <td>{{item.price}}</td> </tr>
- 66.
- 67. TheTenAgain -- 10. Structure --9. Minification -- 8. Directives -- 7. Page Loading -- 6. Internet Explorer -- 5. Development Environment -- 4. Non-Angular Stuff -- 3. Separation of Concerns -- 2. Scope -- 1. Performance
- 68.
- 69. Q&A » Simon Guest,Distinguished Engineer, Neudesic LLC » simonguest.com (@simonguest) » http://github.com/simonguest/gids » http://slideshare.net/simonguest
- 70.