The purpose of this presentation is also largely to explain some of the fun parts of JavaScript (dynamic function invocation with reflection, dynamic arguments, etc). I don't necessarily encourage putting complex logic throughout your templates with lodash, though there may be times it is appropriate. Lets talk about lodash and how it can easily be married to Angular. Using a six line filter, I will expose the power of lodash directly within angular templates. This will be an introduction to lodash, angular templates, and we'll talk about scope and reflection within JavaScript.

1. JavaScript FundamentalsJavaScript Fundamentals
with Angular and Lodashwith Angular and Lodash
Bret Little - @little_bret
blittle.github.io/blog/
http://slides.com/bretlittle/js-fundamentals-angular-lodash

2. JavaScript scope is not $scopeJavaScript scope is not $scope

3. Just because you can, doesn't mean you should
Caution!Caution!

4. <div
class='active-users'
ng-repeat='user in users | lodash:"filter":{active: true}'>
{{ user.name }}
</div>
var users = [
{ 'name': 'barney', 'age': 36, 'active': true },
{ 'name': 'fred', 'age': 40, 'active': false }
]
_.filter(users, { 'active': true })
// returns [{ 'name': 'barney', 'age': 36, 'active': true }]

5. <div class='selected-user'>
{{ users
| lodash:'findWhere':{active: true, age: 36}
| lodash:'result':'name' }}
</div>
var users = [
{ 'name': 'barney', 'age': 36, 'active': true },
{ 'name': 'fred', 'age': 40, 'active': false }
]
_.result(
_.findWhere(users, { 'active': true, 'age': 36 }), 'name'
)
// returns 'barney'

6. <div ng-repeat="i in 10 | lodash:'range'">
{{ $index }}
</div>
_.range(10);
// → [0, 1, 2, 3, 4, 5, 6, 7, 8, 9]

7. <span>{{name | lodash:'capitalize'}}</span>
$scope.name = 'alfred';
<span>Alfred</span>

8. <span class='{{dynamicClassName | lodash:'kebabCase'}}'>
Hello
</span>
$scope.dynamicClass = 'someDyanmicClassName';
<span class='some-dyanmic-class-name'>Hello</span>

9. <span>
{{value | lodash:'padLeft':10:0}}
</span>
$scope.value = 123;
<span>0000000123</span>

10. <span>
{{longVal | lodash:'trunc':28}}
</span>
$scope.longVal = 'Crocodiles have the most acidic stomach
of any vertebrate. They can easily digest bones, hooves
and horns.';
<span>Crocodiles have the most ...</span>

11. <div ng-repeat='user in users
| lodash
:"slice":(page * amountPerPage)
:((page + 1) * amountPerPage)'
>
{{user.name}}
</div>
<button ng-click='page = page - 1'>Previous</button>
<button ng-click='page = page + 1'>Next</button>
http://output.jsbin.com/zesuhuhttp://output.jsbin.com/zesuhu

12. angular.module('myApp')
.filter('lodash', function() {
return function(input, method) {
var args = [input].concat(
Array.prototype.slice.call(arguments, 2)
);
return _[method].apply(_, args);
}
});

13. JavaScript FundamentalsJavaScript Fundamentals
Higher-order FunctionsHigher-order Functions
ClosuresClosures
Scope & ContextScope & Context
Dynamic function invocationDynamic function invocation
ArgumentsArguments
JavaScript 2015JavaScript 2015

14. JavaScript does not have block scope;JavaScript does not have block scope;
it has lexical scope.it has lexical scope.
var something = 1;
{
var something = 2;
}
console.log(something);
-> 2

15. var something = 1;
function run() {
var something = 2;
console.log(something);
}
run();
console.log(something);
-> 2
-> 1

16. var something = 1;
function run() {
if (!something) {
var something = 2;
}
console.log(something);
}
run();
-> 2
JavaScript Variable HoistingJavaScript Variable Hoisting

17. angular.module('myApp')
.filter('lodash', function() {
return function(input, method) {
var args = [input].concat(
Array.prototype.slice.call(arguments, 2)
);
return _[method].apply(_, args);
}
});

18. Higher-order FunctionsHigher-order Functions
"Functions that operate on other"Functions that operate on other
functions, either by taking them asfunctions, either by taking them as
arguments or by returning them"arguments or by returning them"
http://eloquentjavascript.net/05_higher_order.htmlhttp://eloquentjavascript.net/05_higher_order.html

19. function greaterThan(n) {
return function(m) { return m > n; };
}
var greaterThan10 = greaterThan(10);
console.log(greaterThan10(11));
// -> true
Higher-order FunctionsHigher-order Functions
notenote nn is still available withinis still available within
the returned functionthe returned function

20. ClosuresClosures
"A closure is a special kind of object that"A closure is a special kind of object that
combines two things: a function, andcombines two things: a function, and
the environment in which that functionthe environment in which that function
was created."was created."
https://developer.mozilla.org/en-US/docs/Web/JavaScript/Closureshttps://developer.mozilla.org/en-US/docs/Web/JavaScript/Closures

21. function makeFunc() {
var name = "Pangolin";
function displayName() {
debugger;
alert(name);
}
return displayName;
};
var myFunc = makeFunc();
myFunc();
ClosuresClosures

22. var counter = (function() {
var privateCounter = 0;
function changeBy(val) {
privateCounter += val;
}
return {
increment: function() {
changeBy(1);
},
decrement: function() {
changeBy(-1);
},
value: function() {
return privateCounter;
}
};
})();
console.log(counter.value()); // logs 0
counter.increment();
console.log(counter.value()); // logs 1
Practical ClosuresPractical Closures

23. angular.module('myApp')
.filter('lodash', function(someService) {
return function(input, method) {
var args = [input].concat(
Array.prototype.slice.call(arguments, 2)
);
return _[method].apply(_, args);
}
});

24. angular.module('myApp')
.filter('lodash', function() {
return function(input, method) {
var args = [input].concat(
Array.prototype.slice.call(arguments, 2)
);
return _[method].apply(_, args);
}
});

25. function sayHello() {
for (var i = 0, iLength = arguments.length; i < iLength; i++) {
console.log('Hello', arguments[i]);
}
}
sayHello('Chester Nimitz', 'Raymond Spruance');
Dynamic ArgumentsDynamic Arguments
-> Hello Chester Nimitz
-> Hello Raymond Spruance

26. angular.module('myApp')
.filter('lodash', function() {
return function(input, method) {
var args = [input].concat(
Array.prototype.slice.call(arguments, 2)
);
return _[method].apply(_, args);
}
});

27. angular.module('myApp')
.filter('lodash', function() {
return function(input, method) {
var args = [input].concat(
Array.prototype.slice.call(arguments, 2)
);
return _[method].apply(_, args);
}
});

28. JavaScript ContextJavaScript Context
The environment in which a functionThe environment in which a function
executes.executes.
thethe thisthis keywordkeyword
Context is most often determined byContext is most often determined by
how a function is invokedhow a function is invoked

29. Function Statement ContextFunction Statement Context
function billMe() {
console.log(this);
function sendPayment() {
console.log(this);
}
sendPayment();
}
billMe();
The context for forThe context for for
function statement isfunction statement is
the global objectthe global object

30. Object ContextObject Context
var obj = {
foo: function(){
return this;
}
};
obj.foo();
obj.foo() === obj; // true

31. Constructor ContextConstructor Context
function Legate(rank) {
this.rank = rank;
}
var legate = new Legate(100);
console.log(legate.rank);

32. Dynamic Function ContextDynamic Function Context
function add(c, d){
return this.a + this.b + c + d;
}
var o = {a:1, b:3};
add.call(o, 5, 7); // 1 + 3 + 5 + 7 = 16
add.apply(o, [10, 20]); // 1 + 3 + 10 + 20 = 34

33. Function.prototype.bindFunction.prototype.bind
var myWidget = {
type: 'myAwesomeWidget',
clickCallback: function() {
console.log(this.type);
}
}
document.getElementById('submit').addEventListener(
'click', myWidget.clickCallback.bind(myWidget)
);

34. jQueryjQuery
$( "li" ).each(function myIterator(index) {
$( this ).text();
});
jQuery controls the context of the callbackjQuery controls the context of the callback
andand thisthis becomes eachbecomes each lili elementelement

35. AngularAngular
angular.module('app')
.controller('Customers', function() {
var vm = this;
vm.title = 'Customers';
});
Angular controls the context of the controller.Angular controls the context of the controller.
WithWith controllerAscontrollerAs the contextthe context becomesbecomes
bound to the template.bound to the template.

36. angular.module('myApp')
.filter('lodash', function() {
return function(input, method) {
var args = [input].concat(
Array.prototype.slice.call(arguments, 2)
);
return _[method].apply(_, args);
}
});

37. import _ from 'lodash';
import angular from 'angular';
angular.module('app')
.filter('lodash', function() {
return (input, method, ...args) => (
_[method].apply(_, [input, ...args])
)
});

38. 1. http://ryanmorr.com/understanding-scope-and-context-in-javascript/
2. https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Operators/this
3. https://developer.mozilla.org/en-US/docs/Web/JavaScript/Closures
4. http://eloquentjavascript.net
5. JS 2015-2016 - https://babeljs.io/
6. Axel Rauschmayer - http://www.2ality.com/
ResourcesResources