Successfully reported this slideshow.
We use your LinkedIn profile and activity data to personalize ads and to show you more relevant ads. You can change your ad preferences anytime.
Your Cloud. 
Your Business. 
AngularJS: From a Different Angle 
Jeremy Likness 
Principal Architect 
@JeremyLikness
www.ivision.com 
• Business Process 
Management/ALM 
• Custom Application 
Development 
• Collaboration 
• Business Intell...
TODAY’S AGENDA 
1. Why? An Angular Case Study 
2. What? 101 Walkthrough of Capabilities 
3. How? Some best practices, tips...
WHY?
WHY? 
Because Angular is …
WHY? 
No, seriously! I’m biased because … 
25 
developers 
80,000+ 
L.O.Ts.C 
200+ 
components 
3 
years 
4x 
Improvement ...
WHY? 
4x 
Improvement 
• Began effort (6 mos.) with JavaScript and KnockoutJS 
• Changed to use AngularJS and TypeScript 
...
WHY? 
Source: 
Google 
Trends
WHAT?
WHAT? 
Angular is … 
Expressions 
Angular 
Glue 
Templates Container 
Tools 
Testable
WHAT? 
• Angular parses expressions right in the DOM 
• Expressions look a lot like JavaScript 
• Conditional DOM compilat...
DEMO: Expressions
WHAT? 
• Angular enables data-binding 
• Declarative vs. Imperative 
• No special ceremonies – POJOs accepted 
• Designer ...
Imperative vs. Declarative 
function isNumeric(str) { 
var regEx = /^d+$/; 
return regEx.test(str); 
} 
var elem = documen...
No Special Ceremonies 
var person = Ember.Object.create({ 
name: 'Jeremy', 
age: 40 }); 
var age = person.get('age'); 
VS....
DEMO: Glue
WHAT? 
• Angular makes it easy to tag items and then 
retrieve them 
• 100% for pure JavaScript 
• Angular doesn’t transfo...
DEMO: Container
WHAT? 
• template [tem-plit] anything that determines or 
serves as a pattern; a model 
• Don’t Repeat Yourself (DRY) 
• U...
DEMO: Templates
WHAT? 
• Angular is loaded with out-of-the-box tools 
• $log 
• $http and $resource 
• ngAnimate 
• ngRoute 
Tools
DEMO: Tools
WHAT? 
• Angular promotes testability from square one 
• Angular provides its own set of mocks 
• Works well with popular ...
DEMO: Testable
RECAP … 
Angular is … 
Expressions 
Angular 
Glue 
Templates Container 
Tools 
Testable
HOW?
HOW? 
TypeScript 
Directory 
Structure 
Controller 
As 
JavaScript 
First 
Properties 
Watches 
Value $log 
$exception 
Ha...
HOW? (The Stack) 
ASP.NET MVC / 
Web API 
Entity 
Framework 
NodeJS Express 
MongoDB 
Driver 
Angular 
SQL MongoDB
HOW? (Add a New Autocomplete) 
Step One: Register a mapping 
var foo = new PairQueryMapper<Table, Database>( 
i => i.ItemI...
Next Step … 
Build a Responsive Angular Health App: 
https://github.com/JeremyLikness/AngularHealthApp/
Questions? 
• Expressions: http://jsfiddle.net/jeremylikness/hpx1rL85/ 
• Glue: http://jsfiddle.net/jeremylikness/g205mkys...
Upcoming SlideShare
Loading in …5
×

Angular from a Different Angle

13,744 views

Published on

“There is no doubt AngularJS is one of the hottest JavaScript and Single Page Application (SPA) frameworks in use today. Is Angular just a bunch of hype, or is there substance behind its promise of teaching HTML new tricks? Join iVision principal architect Jeremy Likness when he shares his hands-on experience developing a massive Angular enterprise application with globally distributed teams of dozens developers over a period of several years. See practical examples of Angular and learn about the various concepts that make it a useful framework that isn’t as opinionated as other options in the market. Beginners will benefit from understanding what Angular does and how it impacts the bottom line of technology, people and process and experienced developers will learn best practices and advanced techniques from Jeremy’s extensive Angular experience. There’s something for everyone so be sure to RSVP now!”

Published in: Software
  • Be the first to comment

Angular from a Different Angle

  1. 1. Your Cloud. Your Business. AngularJS: From a Different Angle Jeremy Likness Principal Architect @JeremyLikness
  2. 2. www.ivision.com • Business Process Management/ALM • Custom Application Development • Collaboration • Business Intelligence
  3. 3. TODAY’S AGENDA 1. Why? An Angular Case Study 2. What? 101 Walkthrough of Capabilities 3. How? Some best practices, tips, and techniques 4. Q&A Questions (hopefully answers!)
  4. 4. WHY?
  5. 5. WHY? Because Angular is …
  6. 6. WHY? No, seriously! I’m biased because … 25 developers 80,000+ L.O.Ts.C 200+ components 3 years 4x Improvement Global Parallel Team
  7. 7. WHY? 4x Improvement • Began effort (6 mos.) with JavaScript and KnockoutJS • Changed to use AngularJS and TypeScript • 4x faster development, attributed in a large part to Angular
  8. 8. WHY? Source: Google Trends
  9. 9. WHAT?
  10. 10. WHAT? Angular is … Expressions Angular Glue Templates Container Tools Testable
  11. 11. WHAT? • Angular parses expressions right in the DOM • Expressions look a lot like JavaScript • Conditional DOM compilation based on expressions • Easily initialize/set properties of your model Expressions
  12. 12. DEMO: Expressions
  13. 13. WHAT? • Angular enables data-binding • Declarative vs. Imperative • No special ceremonies – POJOs accepted • Designer  Developer Glue
  14. 14. Imperative vs. Declarative function isNumeric(str) { var regEx = /^d+$/; return regEx.test(str); } var elem = document.getElementById('#inputField'); elem.addEventListener('oninput', function() { if (isNumeric(elem.value)) { etc... } }); VS. <input id="inputField" data-ensure-is-numeric="true"/>
  15. 15. No Special Ceremonies var person = Ember.Object.create({ name: 'Jeremy', age: 40 }); var age = person.get('age'); VS. var person = { name: 'Jeremy', age: 40 }; var age = person.age;
  16. 16. DEMO: Glue
  17. 17. WHAT? • Angular makes it easy to tag items and then retrieve them • 100% for pure JavaScript • Angular doesn’t transform things into some weird Angular-ized version • If you have foo that depends on bar, Angular will take care of that, too Container
  18. 18. DEMO: Container
  19. 19. WHAT? • template [tem-plit] anything that determines or serves as a pattern; a model • Don’t Repeat Yourself (DRY) • UI templates (with glue) • Reusable text templates (filters) • Reusable components (directives) Templates
  20. 20. DEMO: Templates
  21. 21. WHAT? • Angular is loaded with out-of-the-box tools • $log • $http and $resource • ngAnimate • ngRoute Tools
  22. 22. DEMO: Tools
  23. 23. WHAT? • Angular promotes testability from square one • Angular provides its own set of mocks • Works well with popular frameworks like QUnit and Jasmine • Has it’s own “uber-test” framework called Protractor • Testing promotes cleaner APIs, well-organized and quality code Testable
  24. 24. DEMO: Testable
  25. 25. RECAP … Angular is … Expressions Angular Glue Templates Container Tools Testable
  26. 26. HOW?
  27. 27. HOW? TypeScript Directory Structure Controller As JavaScript First Properties Watches Value $log $exception Handler $provide angular .extend() $injector resolve batarang ::bindonce ng-if interceptors
  28. 28. HOW? (The Stack) ASP.NET MVC / Web API Entity Framework NodeJS Express MongoDB Driver Angular SQL MongoDB
  29. 29. HOW? (Add a New Autocomplete) Step One: Register a mapping var foo = new PairQueryMapper<Table, Database>( i => i.ItemIdentifier, i => i.Description, query => query.Where(i => i.Filter.Equals("Y"))); container.RegisterInstance<IPairQueryMapper>("foo", foo); Step Two: Drop in the directive <pair-selector item="fooSelector" pair="foo"> </pair-selector> Step Three: Wait, I’m Done?! DANCE and SHOUT!
  30. 30. Next Step … Build a Responsive Angular Health App: https://github.com/JeremyLikness/AngularHealthApp/
  31. 31. Questions? • Expressions: http://jsfiddle.net/jeremylikness/hpx1rL85/ • Glue: http://jsfiddle.net/jeremylikness/g205mkys/ • Container: http://jsfiddle.net/jeremylikness/qmvnn1ca/ • Templates: http://jsfiddle.net/jeremylikness/4mp5u64j/ • Tools: http://jsfiddle.net/jeremylikness/oda7e989/ • Testable: http://jeremylikness.github.io/AngularHealthApp/test.html • Advanced: http://bit.ly/expertangular/ Jeremy Likness, Principal Architect @JeremyLikness

×