forked from bennadel/JavaScript-Demos
-
Notifications
You must be signed in to change notification settings - Fork 0
/
Copy pathindex.htm
155 lines (111 loc) · 3.6 KB
/
index.htm
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
<!doctype html>
<html ng-app="Demo">
<head>
<meta charset="utf-8" />
<title>
Creating And Extending A Lodash / Underscore Service In AngularJS
</title>
</head>
<body ng-controller="AppController">
<h1>
Creating And Extending A Lodash / Underscore Service In AngularJS
</h1>
<!-- Load scripts. -->
<script type="text/javascript" src="../../vendor/jquery/jquery-2.1.0.min.js"></script>
<script type="text/javascript" src="../../vendor/angularjs/angular-1.2.22.min.js"></script>
<script type="text/javascript" src="../../vendor/lodash/lodash-2.4.1.min.js"></script>
<script type="text/javascript">
// Create an application module for our demo.
var app = angular.module( "Demo", [] );
// -------------------------------------------------- //
// -------------------------------------------------- //
// I control the root of the application.
app.controller(
"AppController",
function( $scope, _ ) {
// NOTE: We are injecting _ into this controller using Angular's
// dependency-injection framework.
// Set up friends collection for demo.
var friends = [
{
id: 1,
name: "Sarah",
isGoodFriend: true,
isBestFriend: false
},
{
id: 2,
name: "Tricia",
isGoodFriend: false,
isBestFriend: false
},
{
id: 3,
name: "Kim",
isGoodFriend: true,
isBestFriend: true
},
{
id: 4,
name: "Joanna",
isGoodFriend: true,
isBestFriend: false
}
];
// Find the good friends.
var goodFriends = _.where( friends, "isGoodFriend" );
// Of the good friends, find the best friends!
var bestFriends = _.where( goodFriends, "isBestFriend" );
// Log us some interesting stats on friendship.
console.info( "Good friends: %s", _.naturalList( _.pluck( goodFriends, "name" ) ) );
console.info( "Best friends: %s", _.naturalList( _.pluck( bestFriends, "name" ) ) );
}
);
// -------------------------------------------------- //
// -------------------------------------------------- //
// Make sure _ is invoked at runtime. This does nothing but force the "_" to
// be loaded after bootstrap. This is done so the "_" factory has a chance to
// "erase" the global reference to the lodash library.
app.run(
function( _ ) {
// ...
}
);
// I provide an injectable (and exteded) version of the underscore / lodash lib.
app.factory(
"_",
function( $window ) {
// Get a local handle on the global lodash reference.
var _ = $window._;
// OPTIONAL: Sometimes I like to delete the global reference to make sure
// that no one on the team gets lazy and tried to reference the library
// without injecting it. It's an easy mistake to make, and one that won't
// throw an error (since the core library is globally accessible).
// ALSO: See .run() block above.
delete( $window._ );
// ---
// CUSTOM LODASH METHODS.
// ---
// I return the given collection as a natural language list.
_.naturalList = function( collection ) {
if ( collection.length > 2 ) {
var head = collection.slice( 0, -1 );
var tail = collection[ collection.length - 1 ];
return( head.join( ", " ) + ", and " + tail );
}
if ( collection.length === 2 ) {
return( collection.join( " and " ) );
}
if ( collection.length ) {
return( collection[ 0 ] );
}
return( "" );
};
// Return the [formerly global] reference so that it can be injected
// into other aspects of the AngularJS application.
return( _ );
}
);
</script>
</body>
</html>