Final version

pajacobs · Mar 25, 2014 · 87f7d7c · 87f7d7c
1 parent 9cf69cf
commit 87f7d7c
Show file tree

Hide file tree

Showing 2 changed files with 28 additions and 49 deletions.
diff --git a/angular-intro/index.html b/angular-intro/index.html
@@ -1,5 +1,5 @@
 <!doctype html>
-<html lang="en">
+<html lang="en" ng-app="AngularIntro">
   <head>
     <meta charset="utf-8">
 
@@ -34,9 +34,9 @@
   <body>
 
     <!-- Section Title -->
-    <div class="df-frame">
-      <div class="df-bar">
-        <h2 id="section-title"></h2>
+    <div ng-controller="SectionTitleCtrl" class="df-frame">
+      <div class="df-bar" ng-hide="!section.title">
+        <h2>{{ section.title }}</h2>
       </div>
     </div>
     <!-- / Section Title -->
@@ -164,7 +164,7 @@ <h3>January 16, 2014 <em>|</em> 29 Sessions</h3>
 
         <section data-background="#F3B41B" data-title="5 Reasons You Should Hack on Angular">
           <img src="img/brucelee.png" style="width:400px; display: block; margin-left: -50px;">
-          <blockquote style="position: absolute; right: 0; top: 10%;">"Absorb what is useful discard what is not<br> add what is uniquely your own"</blockquote>
+          <blockquote style="position: absolute; right: 0; top: 10%;">"Absorb what is useful<br> discard what is not<br> add what is uniquely your own"</blockquote>
         </section>
 
         <section data-title="5 Reasons You Should Hack on Angular">
@@ -233,7 +233,7 @@ <h4>Use <code>$watch</code> in your custom directives, <strong class="green">avo
         </section>
 
         <section data-title="Angular Like a Boss">
-          <h4>Use <code>$apply</code> to <strong class="green">let Angular that you've made changes</strong> after an asynchronous operation</h4>
+          <h4>Use <code>$apply</code> to <strong class="green">let Angular know that you've made changes</strong> after an asynchronous operation</h4>
         </section>
 
 
@@ -299,7 +299,7 @@ <h1 style="text-align: left;" class="text-uppercase">Q&amp;A  <span class="blue"
 
     <script src="/sub_modules/reveal/lib/js/head.min.js"></script>
     <script src="/sub_modules/reveal/js/reveal.min.js"></script>
-    <script src="/bower_components/jquery/dist/jquery.min.js"></script>
+    <script src="/bower_components/angular/angular.js"></script>
     <script src="js/main.js"></script>
 
     <script>

diff --git a/angular-intro/js/main.js b/angular-intro/js/main.js
@@ -3,45 +3,24 @@
 
 'use strict';
 
-(function($, Reveal) {
-  Reveal.addEventListener('slidechanged', function(e) {
-    var slideNumber = Reveal.getIndices().h;
-
-    if (slideNumber === 29) {
-      setInterval(itBeRainbowTime, 200);
-    }
-
-    var previousTitle = null;
-
-    if (e.previousSlide) {
-      previousTitle = $(e.previousSlide).data('title');
-    }
-
-    var currentTitle = $(e.currentSlide).data('title');
-
-    if (!currentTitle) {
-      $('.df-frame').hide();
-      return;
-    }
-    if (previousTitle === currentTitle) return;
-
-    $('.df-frame').show();
-    $('#section-title').text(currentTitle);
-  });
-
-  function itBeRainbowTime() {
-    $('.df-bar').css('background-color', getRandomColor());
-    $('#section-title').css('color', getRandomColor());
-  }
-
-  function getRandomColor() {
-      var letters = '0123456789ABCDEF'.split('');
-      var color = '#';
-      for (var i = 0; i < 6; i++ ) {
-          color += letters[Math.round(Math.random() * 15)];
-      }
-      return color;
-  }
-})(jQuery, Reveal);
-
-
+angular
+  .module('AngularIntro', [])
+  .controller('SectionTitleCtrl', ['$scope', function($scope) {
+    $scope.section = {}
+
+    $scope.$watch(function() {
+      return Reveal.getCurrentSlide().getAttribute('data-title');
+    }, function(newVal, oldVal) {
+      $scope.section.title = newVal;
+    });
+
+    Reveal.addEventListener('slidechanged', $scope.$apply.bind($scope));
+
+    // function updateTitle() {
+    //   var title = Reveal.getCurrentSlide().getAttribute('data-title');
+    //   console.log(title);
+    //   $scope.$apply(function() {
+    //     $scope.section.title = title;
+    //   });
+    // }
+  }]);