Added some initial angular controllers/services and connected UI up t…

…o API for some really basic product info.
alihalabyah · Apr 23, 2014 · f4eda23 · f4eda23
1 parent bca3e44
commit f4eda23
Show file tree

Hide file tree

Showing 20 changed files with 189 additions and 76 deletions.
diff --git a/api/api.products.js b/api/api.products.js
@@ -16,7 +16,7 @@ function list(req, res)
 }
 
 function view(req, res)
-{
+{ 
     db.getById(req.params.id, function(data){
         res.json(data);
     });

diff --git a/client/basket/index.html b/client/basket/index.html
diff --git a/client/media/css/app.css b/client/media/css/app.css
diff --git a/client/media/js/project.js b/client/media/js/project.js
diff --git a/db/db.products.js b/db/db.products.js
@@ -9,8 +9,9 @@ exports.getById = function(id, callback){
     mongoclient.open(function(err, mongoclient) {  
         var dbName = mongoHandler.dbName();
         var db = mongoclient.db(dbName); 
-
-        db.collection(collectionName).findOne({"_id": mongoHandler.makeObjectID(id)}, function(err, result) {
+        var mongoId = mongoHandler.makeObjectID(id);
+        console.log("id:"+mongoId);
+        db.collection(collectionName).findOne({"_id": mongoId}, function(err, result) {
             mongoclient.close(); 
             if (err){
                 mongoclient.close(); 

diff --git a/client/admin/index.html → public/admin/index.html b/client/admin/index.html → public/admin/index.html
diff --git a/client/checkout/index.html → public/checkout/index.html b/client/checkout/index.html → public/checkout/index.html
diff --git a/public/css/app.css b/public/css/app.css
@@ -0,0 +1,20 @@
+#main-container{
+    margin-top:60px;
+
+}
+
+#basket-table{
+    width:100%;
+}
+
+
+#basket-table tr:nth-child(2n) td{
+    background-color:#efefef;
+}
+
+#basket-table th,
+#basket-table td{
+    padding:5px;
+}
+
+
diff --git a/client/media/img/horse524.jpg → public/img/horse524.jpg b/client/media/img/horse524.jpg → public/img/horse524.jpg
diff --git a/client/index.html → public/index.html b/client/index.html → public/index.html
@@ -1,23 +1,30 @@
 <!DOCTYPE html>
-<html lang="en" ng-app>
+<html lang="en">
     <head>
         <meta charset="utf-8">
         <meta http-equiv="X-UA-Compatible" content="IE=edge">
         <meta name="viewport" content="width=device-width, initial-scale=1">
         <title>Hello, traider.io</title>
         <link rel="stylesheet" href="//netdna.bootstrapcdn.com/bootstrap/3.1.1/css/bootstrap.min.css">
         <link rel="stylesheet" href="//netdna.bootstrapcdn.com/bootstrap/3.1.1/css/bootstrap-theme.min.css">
-        <link rel="stylesheet" href="/media/css/app.css">
+        <link rel="stylesheet" href="/css/app.css">
+        <base href="/">
         <!-- HTML5 Shim and Respond.js IE8 support of HTML5 elements and media queries -->
         <!-- WARNING: Respond.js doesn't work if you view the page via file:// -->
         <!--[if lt IE 9]>
           <script src="https://oss.maxcdn.com/libs/html5shiv/3.7.0/html5shiv.js"></script>
           <script src="https://oss.maxcdn.com/libs/respond.js/1.4.2/respond.min.js"></script>
         <![endif]-->
         <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.16/angular.min.js"></script>
-        <script src="/media/js/project.js"></script>
+        <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.16/angular-route.min.js"></script> 
+	<script src="/js/controllers/ProductListCtrl.js"></script>
+	<script src="/js/controllers/ProductDetailsCtrl.js"></script>
+	<script src="/js/controllers/BasketCtrl.js"></script>
+	<script src="/js/services/ProductService.js"></script>
+	<script src="/js/appRoutes.js"></script>
+	<script src="/js/app.js"></script> 
     </head>
-    <body>
+    <body ng-app="frontendApp">
 
         <div class="navbar navbar-inverse navbar-fixed-top" role="navigation">
           <div class="container">
@@ -32,29 +39,18 @@
             </div>
             <div class="collapse navbar-collapse">
               <ul class="nav navbar-nav">
-                <li class="active"><a href="#">Home</a></li> 
+                <li  class="active"><a href="#">Home</a></li> 
+                <li class="active"><a href="#basket">Basket</a></li> 
               </ul>
             </div><!--/.nav-collapse -->
           </div>
         </div> 
         <div class="container" id="main-container"> 
             <div> 
                 <div class="container-fluid"> 
-                    <div class="col-sm-3"  data-ng-repeat="i in [1,2,3,4,5,6,7,8,9,10]">
-                        <form>
-                            <img src="/media/img/horse524.jpg" alt="A horse" style="width:100%;" />
-                            <p>Horse</p>
-                            <select> 
-                                <option value="">Qty</option> 
-                                <option data-ng-repeat="i in [1,2,3,4,5,6,7,8,9,10]">{{i}}</option> 
-                            </select>
-                            <input type="submit" value="Add to basket" />
-                        </form>
-                    </div> 
-
+                    <div ng-view></div>
                 </div> 
             </div>
-
         </div><!-- /.container -->  
         <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script>
         <script src="//netdna.bootstrapcdn.com/bootstrap/3.1.1/js/bootstrap.min.js"></script>

diff --git a/public/js/app.js b/public/js/app.js
diff --git a/public/js/appRoutes.js b/public/js/appRoutes.js
@@ -0,0 +1,23 @@
+
+
+// public/js/appRoutes.js
+	angular.module('appRoutes', []).config(['$routeProvider', '$locationProvider', function($routeProvider, $locationProvider) {
+
+
+	$routeProvider  
+            .when('/', {
+                    templateUrl: '/views/product-list.html',
+                    controller: 'ProductListController'
+            }) 
+            .when('/product/:id', {
+                    templateUrl: '/views/product-details.html',
+                    controller: 'ProductDetailsController'
+            })
+            .when('/basket', {
+                    templateUrl: '/views/basket.html',
+                    controller: 'BasketController'
+            });
+
+	$locationProvider.html5Mode(true);
+
+}]);
diff --git a/public/js/controllers/BasketCtrl.js b/public/js/controllers/BasketCtrl.js
@@ -0,0 +1,8 @@
+
+
+
+angular.module('BasketCtrl', []).controller('BasketController', function($scope, Products) { 
+    Products.getAll(function(data){
+        $scope.products = data;
+    });	 
+});
diff --git a/public/js/controllers/ProductDetailsCtrl.js b/public/js/controllers/ProductDetailsCtrl.js
@@ -0,0 +1,7 @@
+
+angular.module('ProductDetailsCtrl', []).controller('ProductDetailsController', function($scope, $routeParams, Products) {  
+        var id = $routeParams.id; 
+	Products.getOne(id, function(data){
+            $scope.product=data;
+        });  
+});
diff --git a/public/js/controllers/ProductListCtrl.js b/public/js/controllers/ProductListCtrl.js
@@ -0,0 +1,8 @@
+
+
+
+angular.module('ProductListCtrl', []).controller('ProductListController', function($scope, Products) { 
+    Products.getAll(function(data){
+        $scope.products = data;
+    });	 
+});
diff --git a/public/js/services/ProductService.js b/public/js/services/ProductService.js
@@ -0,0 +1,40 @@
+
+angular.module('ProductService', []).factory('Products', ['$http', function($http) {
+
+        return {
+            getAll: function(callback) { 
+                $http({
+                    method: 'get',
+                    url: '/api/products'
+                }).success(function(data) { 
+                    //console.log(data);
+                    callback(data);
+                }).error(function() {
+                    alert("error");
+                }); 
+            },
+
+            getOne : function(id, callback) { 
+                $http({
+                    method: 'get',
+                    url: '/api/products/'+id
+                }).success(function(data) { 
+                    //console.log(data);
+                    callback(data);
+                }).error(function() {
+                    alert("error");
+                }); 
+            }
+
+//            ,
+//
+//            create : function(productData) {
+//                    return $http.post('/api/products', productData);
+//            },
+//
+//            delete : function(id) {
+//                    return $http.delete('/api/products/' + id);
+//            }
+	};
+
+}]);
diff --git a/public/views/basket.html b/public/views/basket.html
@@ -0,0 +1,31 @@
+<table id="basket-table">
+    <thead>
+        <tr>
+            <th>Product</th>
+            <th>Qty</th>
+            <th>Price</th>
+        </tr> 
+    </thead>
+    <tbody>
+        <tr>
+            <td>Product #1</td>
+            <td>1</td>
+            <td>&pound;10.00</td> 
+        </tr>
+        <tr>
+            <td>Product #2</td>
+            <td>1</td>
+            <td>&pound;10.00</td> 
+        </tr>
+        <tr>
+            <td>Product #3</td>
+            <td>1</td>
+            <td>&pound;10.00</td> 
+        </tr>
+        <tr>
+            <td colspan="2" align="right">Total</td>
+            <td>&pound;30.00</td>
+
+        </tr>
+    </tbody>
+</table>
diff --git a/public/views/product-details.html b/public/views/product-details.html
@@ -0,0 +1,17 @@
+
+                        <form>
+                            <div class="row">
+                                <div class="col-md-9" >
+                                    <img src="/img/horse524.jpg" alt="A horse" style="width:100%;" />
+                                </div>
+
+                                <div class="col-md-3" > 
+                                    <h1>{{product.Name}}</h1> 
+                                    <select> 
+                                        <option value="">Qty</option> 
+                                        <option data-ng-repeat="i in [1,2,3,4,5,6,7,8,9,10]">{{i}}</option> 
+                                    </select>
+                                    <input type="submit" value="Add to basket" />
+                                </div>
+                            </div>
+                        </form> 
diff --git a/public/views/product-list.html b/public/views/product-list.html
@@ -0,0 +1,13 @@
+                    <h1>product list </h1>
+                    <div class="col-sm-3"  data-ng-repeat="i in products"> 
+                        <form>
+                            <a href="/product/{{i._id}}">
+                                <img src="/img/horse524.jpg" alt="A horse" style="width:100%;" /></a>
+                            <p>{{i.Name}} : {{_id}}</p>
+                            <select> 
+                                <option value="">Qty</option> 
+                                <option data-ng-repeat="j in [1,2,3,4,5,6,7,8,9,10]">{{j}}</option> 
+                            </select>
+                            <input type="submit" value="Add to basket" />
+                        </form>
+                    </div> 
diff --git a/traider.js b/traider.js
@@ -9,7 +9,9 @@ createServer = function createServer () {
     //server.use(express.cookieParser());
 
     //server.use(express.bodyParser());
-    server.use(express.static(__dirname + '/client'));
+    server.use(express.static(__dirname + '/public'));
+    server.use('/product/*', express.static(__dirname + '/public'));
+    server.use('/basket/', express.static(__dirname + '/public'));
 
     // attach router handlers
     routes.attachHandlers(server); //, passport);