angularjs in practice

©2014 Dealertrack, Inc. All rights reserved.

Jon HoguetSr. UI [email protected]

AngularJS in Practice


Jon Hoguet who?


▪ Our Architecture▪ Overview▪ Metrics▪ File Structure▪ Lessons Learned

▪ Angular ▪ Controller▪ Directive▪ $compile▪ Directives and Isolate Scope▪ Lessons Learned

▪ Build▪ Grunt▪ Testing with Karma▪ Testing with Protractor

▪ Debugging▪ $log▪ in the browser

▪ I reading this online, you should check out the ▪ Correlating Blog Post

What to expect

https://raw.githubusercontent.com/jhoguet/presentations/master/angular/AngularJs-in-practice/angularjs-in-practice-v2.md


Our Architecture


15 Angular Modules

43 Angular Directives

15 Angular Controllers

36 Angular Services

52 Angular Templates

13,669 lines of javascript

Focusing on Angular


Some Humility


File Structure


Minimal Grails dependency


Do organize around functionality

Build First

Don’t mix templating languages

Lessons Learned


Don’t mix templating languages

<inventory:firedoor firedoorClass="search-firedoor lifecycle-criteria"

ngshow="lifecycles.targetLifecycle.isEditingCriteria" fluid="false"

customButtons="${[ [click:

'lifecycles.targetLifecycle.isEditingCriteria=false', icon: 'check', text: 'Done', customClass:

'btn-primary'] ]}">

<div class="form-group lifecycle-name-group">

<input type="text" class="form-control input-lg"

ng-model="lifecycles.targetLifecycle.model.name"

ng-change="lifecycles.targetLifecycle.dirty()"

placeholder="Enter a name...">

</div><div criteria-form title="Lifecycle Criteria"

criteria-model="lifecycles.targetLifecycle.model.criteria"

dirty="lifecycles.targetLifecycle.dirty">

</div>

</inventory:firedoor>


Controllers vs Directives


A controller is an abstraction of

a directive


Consider...


Controller right?


Somewhere else in the dom...


Controller abstraction of directive isn’t working… use a directive


$compile = BFF

$compile( markup / directives )( scope ) = live dom

fragment

1. Most important thing angular does2. composable3. makes testing easy4. makes experimentation easy


live dom element

var ioc = angular.element('[ng-app]').injector(),

$rootScope = ioc.get('$rootScope'),

$compile = ioc.get('$compile');

var scope = $rootScope.$new(true);

scope.child = {

name : 'Lance',

age : 3

};

var markup = "<div>{{ child.name }} is {{ child.age }} years old!</div>";

var el;

scope.$apply(function(){

el = $compile(markup)(scope);

});

// el.html() === 'Lance is 3 years old!'


What do you mean live?


scope.child = {

name : 'Lana',

age : 2

};

});

//el.html() === 'Lana is 2 years old!'


Live meaning 2 way

markup = "<input type=\"text\" ng-model=\"child.name\" />";

var input;

// note we are applying the same scope to this markup


input = $compile(markup)(scope);

});

input.val('Lana Hoguet');

input.change();

// scope.name === 'Lana Hoguet'

// el.html() === 'Lana Hoguet is 2 years old!'


Live meaning 2 way

markup = "<input type=\"text\" ng-model=\"child.name\" />";

var input;

// note we are applying the same scope to this markup


input = $compile(markup)(scope);

});

input.val('Lana Hoguet');

input.change();

// scope.child.name === 'Lana Hoguet'

// el.html() === 'Lana Hoguet is 2 years old!'


Hurt yet?


Directives Refresher


Directives Refresher

= for two way

@ for one way

& for functions


one way / two way misnomer


one way / two way misnomer$compile source code


one way / two way misnomer

Note: $interpolate and $parse are not coupled to $scope


= for two way uses $parse

@ for one way uses $interpolate

& for functions


& demystified


& demystified

$compile source code


= for two way uses $parse

@ for one way uses $interpolate

& for functions wraps $parse in fn


= for two way uses $parse and watches

@ for one way uses $interpolate and watches

& for functions wraps $parse in fn


Beware the ng-model monster

fiddle

http://jsfiddle.net/jhoguet/s0v6L3xv/


angular-templates

Not proposing you use inline scripts - just simple example


angular-templates

$templateCache

$http

Not proposing you use inline scripts - just simple example


angular-templates

ng-include, ng-view, ui-view, or templateUrl

$http $templateCache


angular-templates

npm install grunt-angular-templates --save-dev


angular-templates


angular-modules


Unit testing directives is easy!


Protractor

Not Just for Angular

But has angular specific hooks built in

Promises!!


Debugging - Log More


Debugging - In the Browser

You can get anything out of IOC



You can inspect any scope



You can mutate the scope and verify how the view reacts


Conclusion

angularjs in practice

Software