Advanced Tips & Tricks for using Angular JS
45 likesā¢19,433 views
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.
![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/85/Advanced-Tips-Tricks-for-using-Angular-JS-64-320.jpg)
Advanced Tips & Tricks for using Angular JS
- 2. The lastdecade ofserver-side HTML...
- 5. What's wrongwiththis model? Ā» Most UI actions require round trip Ā» Poor mobile experience Ā» Devices are getting more powerful Ā» Servers need to scale Ā» Any ofļ¬ine scenario is near impossible
- 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 Ā» Ofļ¬ine becomes more manageable
- 12. Audience Poll
- 14. Who has builtAngularJS sample apps?
- 15. Who is usingAngularJS for an ongoing project?
- 16. Angular's ups and downs...
- 21. 10. Structure Howshould I structure my AngularJS project?
- 22. 10. Structure Ā» Roll your own Ā» Angular Seed (https://github.com/angular/angular- seed) Ā» Yeoman Angular Generator (http://yeoman.io)
- 24. 10. Structure Ā» Roll your own Ā» Angular Seed (https://github.com/angular/angular- seed) Ā» Yeoman Angular Generator (http://yeoman.io)
- 25. 10. Structure Ā» Come back 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. Miniļ¬cation Should I minifymy AngularJS project?
- 29. 9. Miniļ¬cation Ā» Due to the "DI" way that Angular works, miniļ¬cation is hard
- 30. 9. Miniļ¬cation Ā» Due to the "DI" way that Angular works, miniļ¬cation is hard Ā» Do you really need to minify?
- 31. 9. Miniļ¬cation Ā» Due to the "DI" way that Angular works, miniļ¬cation is hard Ā» Do you really need to minify? -- AngularJS includes are already compiled JS -- Yeoman template includes as much miniļ¬cation as you need -- Disable property renaming, and manually change constructors
- 33. 8. Directives Ā» They make 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 Howdo I 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
- 39. 6. InternetExplorer Ā» Support for 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 should I be using?
- 41. 5. DevelopmentEnvironment Ā» Angular Support 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 Ā» Javascript Debugging -- Use 'debugger' in any controller to add breakpoint -- Very useful combined with Batarang
- 47. 4.Angular- Supported Frameworks Howdo I dealwith non- 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 Howdo I 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 I needto know about$scope?
- 56. 2. Scope Ā» Scope is 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 Ā» Scope inheritence -- 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 I prevent performance bottlenecks?
- 59. 1. Performance Ā» You are 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 Ā» Most changes 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 Ā» Using ng-repeat or ng-switch can compound this
- 62. 1. Performance <tr ng-repeat="item in 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 Ā» Overcoming this bottleneck -- Never call $scope functions from within ng- repeat or ng-switch statements -- Use watch collection to calculate everyting when the controller is ļ¬rst 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="item in items"> <td>{{item.name}}</td> <td>{{item.description}}</td> <td>{{item.price}}</td> </tr>
- 66. TheTenAgain
- 67. TheTenAgain -- 10. Structure -- 9. Miniļ¬cation -- 8. Directives -- 7. Page Loading -- 6. Internet Explorer -- 5. Development Environment -- 4. Non-Angular Stuff -- 3. Separation of Concerns -- 2. Scope -- 1. Performance
- 68. Thankyou!
- 69. Q&A Ā» Simon Guest, Distinguished Engineer, Neudesic LLC Ā» simonguest.com (@simonguest) Ā» http://github.com/simonguest/gids Ā» http://slideshare.net/simonguest