“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!”

1. Your Cloud.
Your Business.
AngularJS: From a Different Angle
Jeremy Likness
Principal Architect
@JeremyLikness

2. www.ivision.com
• Business Process
Management/ALM
• Custom Application
Development
• Collaboration
• Business Intelligence

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. WHY?

5. WHY?
Because Angular is …

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. 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. WHY?
Source:
Google
Trends

9. WHAT?

10. WHAT?
Angular is …
Expressions
Angular
Glue
Templates Container
Tools
Testable

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. DEMO: Expressions

13. WHAT?
• Angular enables data-binding
• Declarative vs. Imperative
• No special ceremonies – POJOs accepted
• Designer  Developer
Glue

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. 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. DEMO: Glue

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. DEMO: Container

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. DEMO: Templates

21. WHAT?
• Angular is loaded with out-of-the-box tools
• $log
• $http and $resource
• ngAnimate
• ngRoute
Tools

22. DEMO: Tools

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. DEMO: Testable

25. RECAP …
Angular is …
Expressions
Angular
Glue
Templates Container
Tools
Testable

26. HOW?

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. HOW? (The Stack)
ASP.NET MVC /
Web API
Entity
Framework
NodeJS Express
MongoDB
Driver
Angular
SQL MongoDB

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. Next Step …
Build a Responsive Angular Health App:
https://github.com/JeremyLikness/AngularHealthApp/

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