Your Cloud.
Your Business.
Advanced Angular Tips and Tricks
Jeremy Likness
Principal Architect
@JeremyLikness
www.ivision.com
TODAY’S AGENDA
1. Background Where did these tips and tricks come from?
2. Integration Tips for integrating existing JavaS...
BACKGROUND
BACKGROUND
• Several Enterprise AngularJS Projects
• Largest Project:
• 80,000+ lines of TypeScript code (generated JavaSc...
Lessons Learned
• It’s important you pick a code structure. There is no “best one” but it is
important to have one. We did...
DEMO: Lessons Learned
INTEGRATION
INTEGRATION
• Register and reuse third-party components with Angular’s
dependency injection system
• Wrap third-party comp...
DEMO: Integration
BEST PRACTICES
BEST PRACTICES
• $scope (addressed earlier)
• Use values (or constants) where it makes sense
• Wrap APIs in services and u...
DEMO: Best Practices
DEBUGGING
DEBUGGING
• All major browsers provide F12 “debug tools”
• In Chrome, you can inspect/select an element and reference it a...
DEMO: Debugging
PERFORMANCE
PERFORMANCE
• Batarang
• Zone to instrument
• Bindonce or new :: prefix
• Double-list approach
• ng-if vs. ng-show
• Measu...
DEMO: Performance
Questions?
Source for this deck
https://github.com/JeremyLikness/AngularTipsAndTricks
Running example for this deck
http:/...
Upcoming SlideShare
Loading in …5
×

Advanced AngularJS Tips and Tricks

4,628 views

Published on

What happens when two third-party Angular modules export a service with the same name? How do you access scope or dependency injection from a third-party control? How can you always ensure asynchronous code is executed within a digest loop without having to check? Should you store commonly referenced variables in $rootScope or a service? How do you ensure promises are resolved before your controller is invoked? In this talk, Jeremy Likness covers advanced tips, tricks, and techniques for building Angular apps. Based on his hands-on experience building large scale enterprise Angular applications with distributed teams of over 20 developers authoring hundreds of services, controllers, filters, and directives across tens of thousands of lines of code, Jeremy shares common problems and straightforward solutions.

Published in: Software
0 Comments
3 Likes
Statistics
Notes
  • Be the first to comment

No Downloads
Views
Total views
4,628
On SlideShare
0
From Embeds
0
Number of Embeds
1,207
Actions
Shares
0
Downloads
47
Comments
0
Likes
3
Embeds 0
No embeds

No notes for slide

Advanced AngularJS Tips and Tricks

  1. 1. Your Cloud. Your Business. Advanced Angular Tips and Tricks Jeremy Likness Principal Architect @JeremyLikness
  2. 2. www.ivision.com
  3. 3. TODAY’S AGENDA 1. Background Where did these tips and tricks come from? 2. Integration Tips for integrating existing JavaScript code 3. Best Practices Lessons learned in the trenches 4. Debugging Debugging Angular apps 5. Performance Writing Angular apps that scale and perform well
  4. 4. BACKGROUND
  5. 5. BACKGROUND • Several Enterprise AngularJS Projects • Largest Project: • 80,000+ lines of TypeScript code (generated JavaScript even bigger) • 100s of controllers, services, filters, and directives • Global team of 25+ developers • 2 years of development before go-live • Exceeded client expectations for performance in most areas • How much content have you read began with “I was tinkering with…” or “I was exploring…”?
  6. 6. Lessons Learned • It’s important you pick a code structure. There is no “best one” but it is important to have one. We did: /controllers ../common ../products ../customers /directives ../common ../products • Decouple from $scope as fast as you can! • Don’t rely on $scope hierarchy/inheritance • Use services for communication • Use controller as syntax • Maxim of Least Angular • Test Early, and Test Often! • For large teams, consider TypeScript
  7. 7. DEMO: Lessons Learned
  8. 8. INTEGRATION
  9. 9. INTEGRATION • Register and reuse third-party components with Angular’s dependency injection system • Wrap third-party components to trigger digest • Extend third-party components to be “Angular aware” • Wrap third-party controls with Angular directives • Create reusable libraries with Angular modules • Consume third-party modules with Angular
  10. 10. DEMO: Integration
  11. 11. BEST PRACTICES
  12. 12. BEST PRACTICES • $scope (addressed earlier) • Use values (or constants) where it makes sense • Wrap APIs in services and understand interceptors • Use $log and $exceptionHandler • Apply behaviors by decorating existing services with $provide • Define code using Angular’s extend • Lazy-load components with the injector when they aren’t commonly used • Use route’s “resolve” to guarantee asynchronous context
  13. 13. DEMO: Best Practices
  14. 14. DEBUGGING
  15. 15. DEBUGGING • All major browsers provide F12 “debug tools” • In Chrome, you can inspect/select an element and reference it as $0 • angular.element(x) wraps a DOM element as a node with Angular functions e.g. angular.element($0) • scope() • isolateScope() • controller() • injector() • Expand objects then navigate to source and set breakpoints/watches • Batarang
  16. 16. DEMO: Debugging
  17. 17. PERFORMANCE
  18. 18. PERFORMANCE • Batarang • Zone to instrument • Bindonce or new :: prefix • Double-list approach • ng-if vs. ng-show • Measure twice, cut once!
  19. 19. DEMO: Performance
  20. 20. Questions? Source for this deck https://github.com/JeremyLikness/AngularTipsAndTricks Running example for this deck http://jeremylikness.github.io/AngularTipsAndTricks/ Mastering AngularJS Course: fundamentals, scope, digest, filters, dependency injection, services, web services, routes, directives, testing, debugging and performance https://www.wintellectnow.com/course/detail/mastering-angularjs Jeremy Likness, Principal Architect @JeremyLikness

×