TIY-Durham · al-the-x · Oct 21, 2015 · Oct 21, 2015 · Oct 21, 2015 · Oct 21, 2015
diff --git a/bower.json b/bower.json
@@ -1,6 +1,6 @@
 {
   "name": "tiy-catalog",
-  "version": "0.0.0",
+  "version": "0.0.1",
   "homepage": "https://github.com/TIY-Durham/TIY-Catalog",
   "authors": [
     "David Rogers <david@theironyard.com>",
@@ -23,6 +23,7 @@
     "jquery": "~2.1.4",
     "modernizr": "~3.1.0",
     "normalize-css": "normalize.css#~3.0.3",
-    "font-awesome": "~4.4.0"
+    "font-awesome": "~4.4.0",
+    "angular-route": "~1.4.7"
   }
 }
diff --git a/build-script.md b/build-script.md
@@ -0,0 +1,9 @@
+# Build List TODOs:
+
+1. Create a `dist/` folder or clean out the `dist/` folder, at least...
+2. Copy pieces of `bower_components/` into `dist/` in a _new_ `dist/bower_components/`
+3. Build the Sass into CSS; copy our built CSS into `dist/css/main.css`
+4. Copy our `src/js/` into `dist/js/`
+5. Copy our `index.html` into `dist/`; copy `partials/` into `dist/partials/`
+6. Switch `$http` requests to use the _real_ API instead of our cached copy.
+7. BONUS: Minify and concatenate all the JavaScript; update links in `index.html`
diff --git a/firebase.json b/firebase.json
@@ -0,0 +1,9 @@
+{
+  "firebase": "tiy-catalog",
+  "public": "dist",
+  "ignore": [
+    "firebase.json",
+    "**/.*",
+    "**/node_modules/**"
+  ]
+}
diff --git a/package.json b/package.json
@@ -1,11 +1,12 @@
 {
   "name": "tiy-catalog",
-  "version": "0.0.0",
+  "version": "0.0.1",
   "description": "Etsy Catalog built with Angular JS",
   "main": "src/index.html",
   "scripts": {
     "test": "echo \"Error: no test specified\" && exit 1",
-    "start": "browser-sync start --server --directory --files='src/*.html, src/main.css'",
+    "start": "browser-sync start --server --directory",
+    "start:watch": "npm start -- --files='src/*.html,src/css/main.css,src/js/*.js'",
     "sass": "node-sass src/scss/main.scss src/css/main.css",
     "install:bower": "bower install --save",
     "postinstall:bower": "wiredep --src 'src/*.html'",

diff --git a/src/category.html b/src/category.html
@@ -27,6 +27,7 @@
         <!-- bower:js -->
         <script src="../bower_components/jquery/dist/jquery.js"></script>
         <script src="../bower_components/angular/angular.js"></script>
+        <script src="../bower_components/angular-route/angular-route.js"></script>
         <!-- endbower -->
         <script src="js/plugins.js"></script>
         <script src="js/main.js"></script>

diff --git a/src/featured.html b/src/featured.html
@@ -27,6 +27,7 @@
         <!-- bower:js -->
         <script src="../bower_components/jquery/dist/jquery.js"></script>
         <script src="../bower_components/angular/angular.js"></script>
+        <script src="../bower_components/angular-route/angular-route.js"></script>
         <!-- endbower -->
         <script src="js/plugins.js"></script>
         <script src="js/main.js"></script>

diff --git a/src/index.html b/src/index.html
@@ -3,7 +3,7 @@
     <head>
         <meta charset="utf-8">
         <meta http-equiv="x-ua-compatible" content="ie=edge">
-        <title></title>
+        <title>TIY-Catalog</title>
         <meta name="description" content="">
         <meta name="viewport" content="width=device-width, initial-scale=1">
 
@@ -14,20 +14,20 @@
         <link rel="stylesheet" href="../bower_components/normalize-css/normalize.css" />
         <!-- endbower -->
         <link rel="stylesheet" href="css/main.css">
-        <link rel="stylesheet" href="css/feature--listing-header.css"
     </head>
     <body>
         <!--[if lt IE 8]>
             <p class="browserupgrade">You are using an <strong>outdated</strong> browser. Please <a href="http://browsehappy.com/">upgrade your browser</a> to improve your experience.</p>
         <![endif]-->
         <!--Need containers for the heading-->
-        <main class="container">
-          <!-- DON'T PUT ANYTHING ELSE IN HERE! -->
+        <main class="container" ng-app="TIY-Catalog">
+          <ng-view />
         </main><!-- .container -->
 
         <!-- bower:js -->
         <script src="../bower_components/jquery/dist/jquery.js"></script>
         <script src="../bower_components/angular/angular.js"></script>
+        <script src="../bower_components/angular-route/angular-route.js"></script>
         <!-- endbower -->
         <script src="js/plugins.js"></script>
         <script src="js/main.js"></script>

diff --git a/src/js/main.js b/src/js/main.js
@@ -1,31 +1,69 @@
 (function() {
+  //controller for the item-tabs area of the Listing/Product page
+  $("nav#item-tabs a").click(function(){
+    $(this).addClass("active").siblings().removeClass("active");
+    $("section.tabs").removeClass("active");
+    $($(this).attr("href")).addClass("active");
+  });
 
-//controller for the item-tabs area of the Listing/Product page
-$("nav#item-tabs a").click(function(){
-  $(this).addClass("active").siblings().removeClass("active");
-  $("section.tabs").removeClass("active");
-  $($(this).attr("href")).addClass("active");
-});
 
+  // When you click on the collection button, menu drops down
+  $('.collect-button').on('click', function(){
+    $('.collect-drop-down').toggleClass('show');
+    $('.add-to-list').removeClass('active');
+  });
 
-// When you click on the collection button, menu drops down
-$('.collect-button').on('click', function(){
-  $('.collect-drop-down').toggleClass('show');
-  $('.add-to-list').removeClass('active');
-});
+  // When you click on the favorite button, icon turns red
+  $('.favorite-button').on('click', function(){
+    $(this).toggleClass('user-favorite');
+  });
 
-// When you click on the favorite button, icon turns red
-$('.favorite-button').on('click', function(){
-  $(this).toggleClass('user-favorite');
-});
+  // When you click on the drop down input field, add button appears
+  $('input.list-text').on('click', function(){
+    $('.add-to-list').addClass('active');
+  });
+})(); //end IIFE
 
-// When you click on the drop down input field, add button appears
-$('input.list-text').on('click', function(){
-  $('.add-to-list').addClass('active');
-});
+(function(){ // IIFE for Angular JS!
+  angular.module('TIY-Catalog', [ 'ngRoute' ], function($routeProvider){
+    $routeProvider
+      .when('/trending', { // route
+        // controller: 'name of a controller' || function(){ },
+        // controllerAs: 'identifier name for controller?',
+        // template: 'string HTML template' || function(){
+        //   return 'an HTML template';
+        // },
+        // templateUrl: 'string path' || function(){
+        //   return 'string path';
+        // },
+        templateUrl: 'trending.html'
+        // resolve: see documentation?
+        // redirectTo: 'string path' || function(){
+        //   return 'string path'
+        // }
+      }) // END when(path, route)
+      .when('/listing/0123456789', {
+        templateUrl: 'product.html'
+      })
 
+  });
 
+  angular.module('TIY-Catalog')
+    .config(function($routeProvider){
+      $routeProvider
+    });
+})(); // END IIFE
 
 
 
-})(); //end IIFE
+
+
+
+
+
+
+
+
+
+
+/* WHY YOU NO LIKE EXTRA LINES ATOM!? */
diff --git a/src/listing-body-grid.html b/src/listing-body-grid.html
@@ -52,6 +52,7 @@ <h2>Store Front</h2>
         <!-- bower:js -->
         <script src="../bower_components/jquery/dist/jquery.js"></script>
         <script src="../bower_components/angular/angular.js"></script>
+        <script src="../bower_components/angular-route/angular-route.js"></script>
         <!-- endbower -->
         <script src="js/plugins.js"></script>
         <script src="js/main.js"></script>

diff --git a/src/listing-image-slider.html b/src/listing-image-slider.html
@@ -38,6 +38,7 @@ <h4 id="image-zoom"><i class="fa fa-search-plus"></i>zoom</h4>
         <!-- bower:js -->
         <script src="../bower_components/jquery/dist/jquery.js"></script>
         <script src="../bower_components/angular/angular.js"></script>
+        <script src="../bower_components/angular-route/angular-route.js"></script>
         <!-- endbower -->
         <script src="js/plugins.js"></script>
         <script src="js/main.js"></script>

diff --git a/src/product.html b/src/product.html
@@ -538,6 +538,7 @@ <h3 id="location-store-front">{{item.results[0].shop_location}}</h3>
         <!-- bower:js -->
         <script src="../bower_components/jquery/dist/jquery.js"></script>
         <script src="../bower_components/angular/angular.js"></script>
+        <script src="../bower_components/angular-route/angular-route.js"></script>
         <!-- endbower -->
         <script src="js/plugins.js"></script>
         <script src="js/main.js"></script>

diff --git a/src/store-front.html b/src/store-front.html
@@ -204,6 +204,7 @@ <h3 id="location-store-front">{{location}}</h3>
         <!-- bower:js -->
         <script src="../bower_components/jquery/dist/jquery.js"></script>
         <script src="../bower_components/angular/angular.js"></script>
+        <script src="../bower_components/angular-route/angular-route.js"></script>
         <!-- endbower -->
         <script src="js/plugins.js"></script>
         <script src="js/main.js"></script>

diff --git a/src/trending.html b/src/trending.html
@@ -1,30 +1,3 @@
-<!doctype html>
-<html class="no-js" lang="">
-  <head>
-    <meta charset="utf-8">
-    <meta http-equiv="x-ua-compatible" content="ie=edge">
-    <title>Trending Items</title>
-    <meta name="description" content="">
-    <meta name="viewport" content="width=device-width, initial-scale=1">
-
-    <link rel="apple-touch-icon" href="apple-touch-icon.png">
-    <!-- Place favicon.ico in the root directory -->
-    <!-- TODO: add link to Guardian-EgypTT font -->
-    <!-- bower:css -->
-    <link rel="stylesheet" href="../bower_components/normalize-css/normalize.css" />
-    <link rel="stylesheet" href="../bower_components/font-awesome/css/font-awesome.min.css" />
-
-    <!-- endbower -->
-    <link rel="stylesheet" href="css/main.css">
-  </head>
-
-  <body>
-    <!--[if lt IE 8]>
-      <p class="browserupgrade">You are using an <strong>outdated</strong> browser. Please <a href="http://browsehappy.com/">upgrade your browser</a> to improve your experience.</p>
-    <![endif]-->
-
-    <main class="container" ng-app="tiy-catalog--trending">
-
       <header class="trending">
         <a href="#" class="pg-title">
           <h1>Trending Items</h1>
@@ -259,26 +232,3 @@ <h1>Trending Items</h1>
         </div>
         <!--END MAIN CONTENT-->
 
-    </main>
-    <!-- .container -->
-
-    <!-- bower:js -->
-    <script src="../bower_components/jquery/dist/jquery.js"></script>
-    <script src="../bower_components/angular/angular.js"></script>
-    <!-- endbower -->
-    <script src="js/plugins.js"></script>
-    <script src="js/trending.js"></script>
-    <script src="js/main.js"></script>
-
-    <!-- Google Analytics: change UA-XXXXX-X to be your site's ID. -->
-    <script>
-        (function(b,o,i,l,e,r){b.GoogleAnalyticsObject=l;b[l]||(b[l]=
-        function(){(b[l].q=b[l].q||[]).push(arguments)});b[l].l=+new Date;
-        e=o.createElement(i);r=o.getElementsByTagName(i)[0];
-        e.src='https://www.google-analytics.com/analytics.js';
-        r.parentNode.insertBefore(e,r)}(window,document,'script','ga'));
-        ga('create','UA-XXXXX-X','auto');ga('send','pageview');
-    </script>
-  </body>
-
-</html>