Levels 3.4, 3.6: using a configurable gravatar-service-generated image in templates.

index.html

@@ -44,6 +44,7 @@
     <script src="./node_modules/angular/angular.js"></script>
     <script src="./node_modules/angular-route/angular-route.js"></script>
     <script src="./node_modules/angular-resource/angular-resource.js"></script>
+    <script src="./node_modules/crypto-js/crypto-js.js"></script>
     <script src="./node_modules/markdown/lib/markdown.js"></script>
 
     <script src="./js/app.js"></script>

js/controllers/users-index-controller.js

@@ -0,0 +1,7 @@
+angular.module("noteWrangler")
+  .controller("UsersIndexController", ['$scope', 'Gravatar', function ($scope, Gravatar) {
+    $scope.gravatarUrl = function (email) {
+      // Would be Gravatar.generate(email) with non-simplified syntax.
+      return Gravatar(email);
+    };
+}]);

js/directives/nw-card.js

@@ -31,6 +31,7 @@ angular.module("noteWrangler")
         // needed around note.header) and "&".
         header: "=",
         icon: "=",
+        image: "=",
       },
       templateUrl: "templates/directives/nw-card.html",
     }

js/routes.js

@@ -15,7 +15,8 @@ angular.module("noteWrangler")
         // controllerAs: 'indexController'
       })
       .when("/users", {
-        templateUrl: "templates/pages/users/index.html"
+        templateUrl: "templates/pages/users/index.html",
+        controller: 'UsersIndexController',
       })
       .when("/", {
         templateUrl: "templates/pages/notes/index.html"

js/services/gravatar.js

@@ -0,0 +1,17 @@
+angular.module("noteWrangler")
+  .factory('Gravatar', function GravatarFactory(user) {
+    const avatarSize = 80; // px.
+    const avatarUrlBase = "http://gravatar.com/avatar/";
+    const generate = function (email) {
+      const hash = CryptoJS.MD5(user.email);
+      const avatarUrl = avatarUrlBase + hash + "?size=" + avatarSize.toString();
+      return avatarUrl;
+    };
+    // Normal format:
+    // return { generate: generate };
+    // Then call Gravatar.generate(email)
+
+    // Simplified format for services with a single method:
+    return generate;
+    // Then call Gravatar(email).
+  });

js/services/note.js

@@ -1,17 +1,14 @@
 /*
 There are 5 types of services:
 
-* Most popular:
-  * Factory: used to share functions and objects across an app.
-  * Provider: like factory, but with configuration
-* Others:
-  * Constant
-  * Service
-  * Value
+* Factory: most common. Used to share functions and objects across an app.
+* Value: often used, just share a value
+* Provider: common. Like factory, but with configuration
+* Constant: rarely used, to share a value within app configuration.
+* Service: rarely used, a ServiceService recipe (?) to share instances of methods and objects.
 
  */
 
-
 angular.module("noteWrangler")
   // Naming the function <service>Factory is a common convention.
   .factory('Note', ['$http', function NoteFactory($http) {

package.json

@@ -13,6 +13,7 @@
     "angular": "^1.6.7",
     "angular-resource": "^1.6.7",
     "angular-route": "^1.6.7",
+    "crypto-js": "^3.1.9-1",
     "jquery": "^3.2.1",
     "markdown": "^0.5.0",
     "material-design-icons": "^3.0.1"

templates/directives/nw-card.html

@@ -1,4 +1,5 @@
-<div class="card">
+<div class="card" title="{{ header }}">
+  <img ng-src="{{ image }}" ng-if="image" />
   <h2 class="h3">{{ header }}</h2>
   <i class="icon icon-card {{ icon }}"></i>
   <p class="hidden">{{ description }}</p>

templates/pages/users/index.html

@@ -3,11 +3,11 @@
 
   <div class="users-wrapper">
     <a class="card-users" ng-repeat="user in users">
-      <div class="card" title="{{user.name}}">
-        <h2 class="h3">{{ user.name }}</h2>
-        <p>{{ user.bio }}</p>
-      </div>
-
+      <nw-card header="{{user.name}}"
+        image="{{ gravatarUrl(user.email) }}"
+        body="{{ user.bio }}"
+        id="{{ user.id }}">
+      </nw-card>
     </a>
   </div>
 </div>

yarn.lock

@@ -205,6 +205,10 @@ cross-spawn@^5.1.0:
     shebang-command "^1.2.0"
     which "^1.2.9"
 
+crypto-js@^3.1.9-1:
+  version "3.1.9-1"
+  resolved "https://registry.yarnpkg.com/crypto-js/-/crypto-js-3.1.9-1.tgz#fda19e761fc077e01ffbfdc6e9fdfc59e8806cd8"
+
 debug@^3.0.1:
   version "3.1.0"
   resolved "https://registry.yarnpkg.com/debug/-/debug-3.1.0.tgz#5bb5a0672628b64149566ba16819e61518c67261"