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