angular from a different angle
DESCRIPTION
“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!”TRANSCRIPT
![Page 1: Angular from a Different Angle](https://reader038.vdocuments.net/reader038/viewer/2022103110/5495445cb47959a1708b473c/html5/thumbnails/1.jpg)
Your Cloud.Your Business.
AngularJS: From a Different Angle Jeremy Likness Principal Architect @JeremyLikness
![Page 2: Angular from a Different Angle](https://reader038.vdocuments.net/reader038/viewer/2022103110/5495445cb47959a1708b473c/html5/thumbnails/2.jpg)
www.ivision.com
• Business Process Management/ALM
• Custom Application Development
• Collaboration• Business Intelligence
![Page 3: Angular from a Different Angle](https://reader038.vdocuments.net/reader038/viewer/2022103110/5495445cb47959a1708b473c/html5/thumbnails/3.jpg)
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!)
![Page 4: Angular from a Different Angle](https://reader038.vdocuments.net/reader038/viewer/2022103110/5495445cb47959a1708b473c/html5/thumbnails/4.jpg)
WHY?
![Page 5: Angular from a Different Angle](https://reader038.vdocuments.net/reader038/viewer/2022103110/5495445cb47959a1708b473c/html5/thumbnails/5.jpg)
WHY?
Because Angular is …
![Page 6: Angular from a Different Angle](https://reader038.vdocuments.net/reader038/viewer/2022103110/5495445cb47959a1708b473c/html5/thumbnails/6.jpg)
WHY?
No, seriously! I’m biased because …
25developers
80,000+L.O.Ts.C
200+components
3years
4xImprovement
Global Parallel Team
![Page 7: Angular from a Different Angle](https://reader038.vdocuments.net/reader038/viewer/2022103110/5495445cb47959a1708b473c/html5/thumbnails/7.jpg)
WHY?
• Began effort (6 mos.) with JavaScript and KnockoutJS• Changed to use AngularJS and TypeScript • 4x faster development, attributed in a large part to Angular
4xImprovement
![Page 8: Angular from a Different Angle](https://reader038.vdocuments.net/reader038/viewer/2022103110/5495445cb47959a1708b473c/html5/thumbnails/8.jpg)
WHY?
Source:GoogleTrends
![Page 9: Angular from a Different Angle](https://reader038.vdocuments.net/reader038/viewer/2022103110/5495445cb47959a1708b473c/html5/thumbnails/9.jpg)
WHAT?
![Page 10: Angular from a Different Angle](https://reader038.vdocuments.net/reader038/viewer/2022103110/5495445cb47959a1708b473c/html5/thumbnails/10.jpg)
WHAT?
Angular is …
Angular
Expressions
Glue
ContainerTemplates
Tools
Testable
![Page 11: Angular from a Different Angle](https://reader038.vdocuments.net/reader038/viewer/2022103110/5495445cb47959a1708b473c/html5/thumbnails/11.jpg)
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
![Page 12: Angular from a Different Angle](https://reader038.vdocuments.net/reader038/viewer/2022103110/5495445cb47959a1708b473c/html5/thumbnails/12.jpg)
DEMO: Expressions
![Page 13: Angular from a Different Angle](https://reader038.vdocuments.net/reader038/viewer/2022103110/5495445cb47959a1708b473c/html5/thumbnails/13.jpg)
WHAT?
• Angular enables data-binding• Declarative vs. Imperative• No special ceremonies – POJOs accepted• Designer Developer
Glue
![Page 14: Angular from a Different Angle](https://reader038.vdocuments.net/reader038/viewer/2022103110/5495445cb47959a1708b473c/html5/thumbnails/14.jpg)
Imperative vs. Declarativefunction isNumeric(str) { var regEx = /^\d+$/; return regEx.test(str); } var elem = document.getElementById('#inputField'); elem.addEventListener('oninput', function() { if (isNumeric(elem.value)) { etc... }});
<input id="inputField" data-ensure-is-numeric="true"/>
VS.
![Page 15: Angular from a Different Angle](https://reader038.vdocuments.net/reader038/viewer/2022103110/5495445cb47959a1708b473c/html5/thumbnails/15.jpg)
No Special Ceremoniesvar person = Ember.Object.create({ name: 'Jeremy', age: 40 });
var age = person.get('age');
var person = { name: 'Jeremy', age: 40 }; var age = person.age;
VS.
![Page 16: Angular from a Different Angle](https://reader038.vdocuments.net/reader038/viewer/2022103110/5495445cb47959a1708b473c/html5/thumbnails/16.jpg)
DEMO: Glue
![Page 17: Angular from a Different Angle](https://reader038.vdocuments.net/reader038/viewer/2022103110/5495445cb47959a1708b473c/html5/thumbnails/17.jpg)
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
![Page 18: Angular from a Different Angle](https://reader038.vdocuments.net/reader038/viewer/2022103110/5495445cb47959a1708b473c/html5/thumbnails/18.jpg)
DEMO: Container
![Page 19: Angular from a Different Angle](https://reader038.vdocuments.net/reader038/viewer/2022103110/5495445cb47959a1708b473c/html5/thumbnails/19.jpg)
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
![Page 20: Angular from a Different Angle](https://reader038.vdocuments.net/reader038/viewer/2022103110/5495445cb47959a1708b473c/html5/thumbnails/20.jpg)
DEMO: Templates
![Page 21: Angular from a Different Angle](https://reader038.vdocuments.net/reader038/viewer/2022103110/5495445cb47959a1708b473c/html5/thumbnails/21.jpg)
WHAT?
• Angular is loaded with out-of-the-box tools• $log • $http and $resource • ngAnimate • ngRoute
Tools
![Page 22: Angular from a Different Angle](https://reader038.vdocuments.net/reader038/viewer/2022103110/5495445cb47959a1708b473c/html5/thumbnails/22.jpg)
DEMO: Tools
![Page 23: Angular from a Different Angle](https://reader038.vdocuments.net/reader038/viewer/2022103110/5495445cb47959a1708b473c/html5/thumbnails/23.jpg)
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
![Page 24: Angular from a Different Angle](https://reader038.vdocuments.net/reader038/viewer/2022103110/5495445cb47959a1708b473c/html5/thumbnails/24.jpg)
DEMO: Testable
![Page 25: Angular from a Different Angle](https://reader038.vdocuments.net/reader038/viewer/2022103110/5495445cb47959a1708b473c/html5/thumbnails/25.jpg)
RECAP …
Angular is …
Angular
Expressions
Glue
ContainerTemplates
Tools
Testable
![Page 26: Angular from a Different Angle](https://reader038.vdocuments.net/reader038/viewer/2022103110/5495445cb47959a1708b473c/html5/thumbnails/26.jpg)
HOW?
![Page 27: Angular from a Different Angle](https://reader038.vdocuments.net/reader038/viewer/2022103110/5495445cb47959a1708b473c/html5/thumbnails/27.jpg)
HOW?
TypeScript Directory Structure
Controller As
JavaScript First
Properties Watches Value $log $exception
Handler
$provide angular .extend() $injector resolve
batarang ::bindonce ng-if interceptors
![Page 28: Angular from a Different Angle](https://reader038.vdocuments.net/reader038/viewer/2022103110/5495445cb47959a1708b473c/html5/thumbnails/28.jpg)
HOW? (The Stack)
SQL MongoDB
Entity Framework
MongoDBDriver
ASP.NET MVC / Web API NodeJS Express
Angular
![Page 29: Angular from a Different Angle](https://reader038.vdocuments.net/reader038/viewer/2022103110/5495445cb47959a1708b473c/html5/thumbnails/29.jpg)
HOW? (Add a New Autocomplete)
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);
<pair-selector item="fooSelector" pair="foo"></pair-selector>
Step One: Register a mapping
Step Two: Drop in the directive
Step Three: Wait, I’m Done?! DANCE and SHOUT!
![Page 30: Angular from a Different Angle](https://reader038.vdocuments.net/reader038/viewer/2022103110/5495445cb47959a1708b473c/html5/thumbnails/30.jpg)
Next Step …
Build a Responsive Angular Health App:
https://github.com/JeremyLikness/AngularHealthApp/
![Page 31: Angular from a Different Angle](https://reader038.vdocuments.net/reader038/viewer/2022103110/5495445cb47959a1708b473c/html5/thumbnails/31.jpg)
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