Complete rewrite with AngularJS

angular · Oct 28, 2011 · 87dfa69 · 87dfa69
1 parent 49e64b4
commit 87dfa69
Show file tree

Hide file tree

Showing 5 changed files with 360 additions and 636 deletions.
diff --git a/public/index.html b/public/index.html
@@ -1,63 +1,52 @@
 <!doctype html>
-
-<!--[if lt IE 7]> <html lang="en" class="no-js ie6"> <![endif]-->
-<!--[if IE 7]>    <html lang="en" class="no-js ie7"> <![endif]-->
-<!--[if IE 8]>    <html lang="en" class="no-js ie8"> <![endif]-->
-<!--[if IE 9]>    <html lang="en" class="no-js ie9"> <![endif]-->
-<!--[if (gt IE 9)|!(IE)]><!--> <html lang="en" class="no-js"> <!--<![endif]-->
+<html lang="en">
   <head>
     <meta charset="utf-8">
 
-    <title>Backbone Tunes</title>
+    <title>Angular Tunes</title>
     <meta name="author" content="David Goodlad <david@goodlad.ca>">
+    <meta name="author" content="Igor Minar <igor@angularjs.org>">
 
     <link rel="stylesheet" href="style/screen.css" media="screen, projection">
     <link rel="stylesheet" href="style/fancypants.css" media="screen, projection">
 
-    <script src="js/vendor/modernizr-1.6.min.js"></script>
-    <script src="js/vendor/jquery-1.5.1.min.js"></script>
-    <script src="js/vendor/underscore.js"></script>
-    <script src="js/vendor/backbone.js"></script>
+    <script src="js/vendor/angular.js" ng:autobind></script>
     <script src="js/Tunes.js"></script>
-
-    <script type="text/template" id="library-template">
-      <h1>Music Library</h1>
-      <ul class="albums"></ul>
-    </script>
-
-    <script type="text/template" id="playlist-template">
-      <h1>Playlist</h1>
-      <nav>
-        <button class="control play">Play</button>
-        <button class="control pause">Pause</button>
-        <button class="control prev">Prev</button>
-        <button class="control next">Next</button>
-      </nav>
-      <ul class="albums">
-      </ul>
-    </script>
-
-    <script type="text/template" id="album-template">
-      <button class="queue add"><img src="/images/add.png"></button>
-      <button class="queue remove"><img src="/images/remove.png"></button>
-      <span class="album-title"><%= title %></span>&nbsp;&nbsp;
-      <span class="artist-name"><%= artist %></span>
-      <ol class="tracks">
-        <% _.each(tracks, function(track) { %>
-          <li><%= track.title %></li>
-        <% }); %>
-      </ol>
-    </script>
-
-    <script type="application/javascript">
-      jQuery(function() {
-        window.library.fetch();
-      });
-    </script>
   </head>
 
-  <body>
+  <body ng:controller="TunesCtrl">
     <div id="container">
+      <div class="playlist">
+        <h1>Playlist</h1>
+        <nav>
+          <button class="control play" ng:click="player.play()" ng:hide="player.playing">Play</button>
+          <button class="control pause" ng:click="player.pause()" ng:show="player.playing">Pause</button>
+          <button class="control prev" ng:click="player.previous()">Prev</button>
+          <button class="control next" ng:click="player.next()">Next</button>
+        </nav>
+        <ul class="albums">
+          <li class="album" ng:repeat="album in player.playlist"
+              ng:class="player.current.album == $index && 'current'">
+            <button class="queue remove" ng:click="player.playlist.remove(album)"></button>
+            <span class="album-title">{{album.title}}</span>
+            <span class="artist-name">{{album.artist}}</span>
+            <ol class="tracks">
+              <li ng:repeat="track in album.tracks"
+                  ng:class="player.current.track == $index && 'current'">{{track.title}}</li>
+            </ol>
+          </li>
+        </ul>
+      </div>
+      <section class="library">
+        <h1>Music Library</h1>
+        <ul class="albums">
+          <li class="album current" ng:repeat="album in albums">
+            <button class="queue add" ng:click="player.playlist.add(album)"></button>
+            <span class="album-title">{{album.title}}</span>
+            <span class="artist-name">{{album.artist}}</span>
+          </li>
+        </ul>
+      </section>
     </div>
   </body>
 </html>