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 Intelligence
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!)
WHY?
WHY?
Because Angular is …
WHY?
No, seriously! I’m biased because …
25developers
80,000+L.O.Ts.C
200+components
3years
4xImprovement
Global Parallel Team
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
WHY?
Source:GoogleTrends
WHAT?
WHAT?
Angular is …
Angular
Expressions
Glue
ContainerTemplates
Tools
Testable
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
DEMO: Expressions
WHAT?
• Angular enables data-binding• Declarative vs. Imperative• No special ceremonies – POJOs accepted• Designer Developer
Glue
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.
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.
DEMO: Glue
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
DEMO: Container
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
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 frameworks like QUnit
and Jasmine• Has it’s own “uber-test” framework called
Protractor• Testing promotes cleaner APIs, well-organized
and quality code
Testable
DEMO: Testable
RECAP …
Angular is …
Angular
Expressions
Glue
ContainerTemplates
Tools
Testable
HOW?
HOW?
TypeScript Directory Structure
Controller As
JavaScript First
Properties Watches Value $log $exception
Handler
$provide angular .extend() $injector resolve
batarang ::bindonce ng-if interceptors
HOW? (The Stack)
SQL MongoDB
Entity Framework
MongoDBDriver
ASP.NET MVC / Web API NodeJS Express
Angular
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!
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/ • 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
Recommended
