step-4 components

mhevery · Sep 12, 2012 · b541fb5 · b541fb5
1 parent da1ceb9
commit b541fb5
Show file tree

Hide file tree

Showing 6 changed files with 78 additions and 37 deletions.
diff --git a/app/css/app.css b/app/css/app.css
@@ -5,3 +5,35 @@ h1, h2, h3, h4 {
 body {
   padding: .5em 1em;
 }
+
+.header {
+  text-align: right;
+}
+
+div[ng-repeat] {
+  display: inline-block;
+}
+
+.profile > img {
+  width: 80px;
+  height: 80px;
+}
+
+.profile {
+  margin: 3px;
+  width: 120px;
+  height: 120px;
+  display: inline-block;
+  border: 1px solid black;
+  -webkit-border-radius: 3px;
+  padding: 5px;
+  text-align: center;
+  overflow: hidden;
+  background-color: #EEE;
+}
+
+.profile>h1 {
+  margin: 0;
+  padding: 0;
+  font-size: 11px;
+}
diff --git a/app/index.html b/app/index.html
@@ -15,15 +15,25 @@
   <script src="js/bootstrap.js"></script>
 </head>
 <body ng-controller="Demo">
-  Name: <input ng-model="name">
-  <hr>
+  <div class="header">
+    <h1>I am</h1>
+    <div class="profile">
+      <img ng-src="{{email|gravatar}}">
+      <h1>{{email}}</h1>
+    </div>
+  </div>
+
+  <hr/>
 
-  <ul>
-    <li ng-repeat="i in [1, 2, 3]">
-      <div demo-greet="name"></div>
-      <tt>leak={{leak}}</tt>
-    </li>
-  </ul>
+  <div>
+    <h1>AngularJS Developers</h1>
+    <div ng-repeat="email in devs">
+      <div class="profile">
+        <img ng-src="{{email|gravatar}}">
+        <h1>{{email}}</h1>
+      </div>
+    </div>
+  </div>
 
   <hr>
   <pre>name={{name}}
@@ -32,12 +42,10 @@
 </html>
 
 <!--
-- Show the controller
-- Show difference between compile and link
-- Explain restrict / Directive invocation
-- Show how directors can leak state
-- Show how scope encapsulates state
-- Show how to watch an expression
-- Show how to change the state
-- Show Dependency Injection
+- Show HTML duplication
+- Show extraction to separate file
+- Explain 'restrict'
+- Show leaking into component
+- Show leaking out of component
+- Show component parameters
 -->
diff --git a/app/js/controllers.js b/app/js/controllers.js
@@ -3,4 +3,12 @@
 myApp.controller('Demo', function($scope) {
   $scope.name = 'world';
   $scope.leak = 'none';
+
+  $scope.email = 'misko@hevery.com';
+
+  $scope.devs = [
+    'misko@hevery.com',
+    'iiminar@gmail.com',
+    'vojta.jina@gmail.com'
+  ];
 });
diff --git a/app/js/directives.js b/app/js/directives.js
@@ -1,26 +1,8 @@
 'use strict';
 
-myApp.directive('demoGreet', function($parse) {
+myApp.directive('profile', function() {
   return {
-    scope: true,
-    compile: function compileFn(cElement, attrs) {
-      console.log('compileFn(', cElement, attrs, ')');
-      cElement.addClass('greet');
-      return function linkFn(scope, lElement, attrs) {
-        console.log('linkingFn(', scope, lElement, attrs, ')', cElement == lElement);
-
-        scope.leak = 'LEAKING';
-
-        scope.$watch(attrs.greet, function(name) {
-          lElement.text('Hello ' + name + '!');
-        });
-
-        lElement.bind('click', function() {
-          scope.$apply(function() {
-            $parse(attrs.greet).assign(scope, 'WORLD');
-          });
-        });
-      }
-    }
+    //restrict: 'E',
+    //templateUrl: 'partials/profile.html'
   };
 });
diff --git a/app/js/filters.js b/app/js/filters.js
@@ -1,2 +1,9 @@
 'use strict';
 
+myApp.filter('gravatar', function() {
+  return function(email) {
+    if (email) {
+      return 'http://www.gravatar.com/avatar/' + hex_md5(email) + '.jpg';
+    }
+  }
+});
diff --git a/app/partials/profile.html b/app/partials/profile.html
@@ -0,0 +1,4 @@
+<div class="profile">
+  <img ng-src="{{email|gravatar}}">
+  <h1>{{email}}</h1>
+</div>