├── Procfile ├── app ├── images │ ├── Inc.png │ ├── Forbes.png │ ├── Thumbs.db │ ├── fan-box.png │ ├── seats.jpg │ ├── works1.png │ ├── works2.png │ ├── works3.png │ ├── entrepreneur.png │ ├── techcrunch.png │ ├── bg_description.jpg │ └── SportsIllustrated.png ├── css │ ├── fonts │ │ ├── _DS_Store │ │ ├── icomoon.eot │ │ ├── icomoon.ttf │ │ ├── icomoon.woff │ │ └── icomoon.svg │ ├── blue.css │ ├── icons.css │ ├── font-awesome.min.css │ ├── style.css │ └── bootstrap.min.css ├── controllers │ ├── MainCtrl.js │ ├── moviesCtrl.js │ ├── OrderCtrl.js │ ├── ContactCtrl.js │ └── WorkCtrl.js ├── main │ ├── main.html │ └── main.js ├── work │ ├── work.js │ └── work.html ├── contact │ ├── contact.js │ └── contact.html ├── app.js ├── order │ ├── order.js │ └── order.html └── js │ ├── angular-route.min.js │ └── angular-route.min.js.map ├── server.js ├── .gitignore ├── package.json ├── README.md ├── index.html └── _PRESS-RELEASE.md /Procfile: -------------------------------------------------------------------------------- 1 | web: node server.js -------------------------------------------------------------------------------- /app/images/Inc.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/ratracegrad/FanBox/HEAD/app/images/Inc.png -------------------------------------------------------------------------------- /app/images/Forbes.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/ratracegrad/FanBox/HEAD/app/images/Forbes.png -------------------------------------------------------------------------------- /app/images/Thumbs.db: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/ratracegrad/FanBox/HEAD/app/images/Thumbs.db -------------------------------------------------------------------------------- /app/images/fan-box.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/ratracegrad/FanBox/HEAD/app/images/fan-box.png -------------------------------------------------------------------------------- /app/images/seats.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/ratracegrad/FanBox/HEAD/app/images/seats.jpg -------------------------------------------------------------------------------- /app/images/works1.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/ratracegrad/FanBox/HEAD/app/images/works1.png -------------------------------------------------------------------------------- /app/images/works2.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/ratracegrad/FanBox/HEAD/app/images/works2.png -------------------------------------------------------------------------------- /app/images/works3.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/ratracegrad/FanBox/HEAD/app/images/works3.png -------------------------------------------------------------------------------- /app/css/fonts/_DS_Store: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/ratracegrad/FanBox/HEAD/app/css/fonts/_DS_Store -------------------------------------------------------------------------------- /app/css/fonts/icomoon.eot: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/ratracegrad/FanBox/HEAD/app/css/fonts/icomoon.eot -------------------------------------------------------------------------------- /app/css/fonts/icomoon.ttf: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/ratracegrad/FanBox/HEAD/app/css/fonts/icomoon.ttf -------------------------------------------------------------------------------- /app/css/fonts/icomoon.woff: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/ratracegrad/FanBox/HEAD/app/css/fonts/icomoon.woff -------------------------------------------------------------------------------- /app/images/entrepreneur.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/ratracegrad/FanBox/HEAD/app/images/entrepreneur.png -------------------------------------------------------------------------------- /app/images/techcrunch.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/ratracegrad/FanBox/HEAD/app/images/techcrunch.png -------------------------------------------------------------------------------- /app/images/bg_description.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/ratracegrad/FanBox/HEAD/app/images/bg_description.jpg -------------------------------------------------------------------------------- /app/images/SportsIllustrated.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/ratracegrad/FanBox/HEAD/app/images/SportsIllustrated.png -------------------------------------------------------------------------------- /app/controllers/MainCtrl.js: -------------------------------------------------------------------------------- 1 | fanboxApp.controller("MainCtrl", function ($scope){ 2 | $scope.message = 'Look! Main Page'; 3 | }); -------------------------------------------------------------------------------- /app/controllers/moviesCtrl.js: -------------------------------------------------------------------------------- 1 | fanboxApp.controller("OrderCtrl", function ($scope){ 2 | $scope.message = 'Look! Order Page'; 3 | }); 4 | -------------------------------------------------------------------------------- /app/controllers/OrderCtrl.js: -------------------------------------------------------------------------------- 1 | fanboxApp.controller("OrderCtrl", function ($scope){ 2 | $scope.message = 'Look! Order Page'; 3 | }); 4 | -------------------------------------------------------------------------------- /app/controllers/ContactCtrl.js: -------------------------------------------------------------------------------- 1 | fanboxApp.controller("ContactCtrl", function ($scope){ 2 | $scope.message = 'Look! Contact Page'; 3 | }); 4 | -------------------------------------------------------------------------------- /app/main/main.html: -------------------------------------------------------------------------------- 1 |
4 | 5 | 6 | -------------------------------------------------------------------------------- /app/controllers/WorkCtrl.js: -------------------------------------------------------------------------------- 1 | fanboxApp.controller("WorkCtrl", function ($scope){ 2 | $scope.message = 'Look! How it works Page'; 3 | }); 4 | 5 | -------------------------------------------------------------------------------- /app/main/main.js: -------------------------------------------------------------------------------- 1 | angular.module('fanbox.main', ['ngRoute']) 2 | 3 | .config(['$routeProvider', function($routeProvider) { 4 | $routeProvider.when('/', { 5 | templateUrl: 'app/main/main.html', 6 | controller: 'MainCtrl' 7 | }); 8 | }]) 9 | 10 | .controller('MainCtrl', [function() { 11 | 12 | }]); -------------------------------------------------------------------------------- /app/work/work.js: -------------------------------------------------------------------------------- 1 | angular.module('fanbox.work', ['ngRoute']) 2 | 3 | .config(['$routeProvider', function($routeProvider) { 4 | $routeProvider.when('/work', { 5 | templateUrl: 'app/work/work.html', 6 | controller: 'WorkCtrl' 7 | }); 8 | }]) 9 | 10 | .controller('WorkCtrl', [function() { 11 | 12 | }]); -------------------------------------------------------------------------------- /server.js: -------------------------------------------------------------------------------- 1 | var express = require('express'); 2 | var app = express(); 3 | var port = process.env.PORT || 3000; 4 | 5 | app.configure(function () { 6 | app.use( 7 | "/", 8 | express.static(__dirname) 9 | ); 10 | }); 11 | app.listen(port); 12 | console.log("Server running on port: " + port + "/\nCTRL + C to shutdown"); -------------------------------------------------------------------------------- /app/contact/contact.js: -------------------------------------------------------------------------------- 1 | angular.module('fanbox.contact', ['ngRoute']) 2 | 3 | .config(['$routeProvider', function($routeProvider) { 4 | $routeProvider.when('/contact', { 5 | templateUrl: 'app/contact/contact.html', 6 | controller: 'ContactCtrl' 7 | }); 8 | }]) 9 | 10 | .controller('ContactCtrl', [function() { 11 | 12 | }]); -------------------------------------------------------------------------------- /app/app.js: -------------------------------------------------------------------------------- 1 | angular.module("fanbox", [ 2 | 'ngRoute', 3 | 'fanbox.main', 4 | 'fanbox.work', 5 | 'fanbox.order', 6 | 'fanbox.contact' 7 | ]) 8 | .config(['$routeProvider', function($routeProvider) { 9 | $routeProvider.when('/', { 10 | templateUrl: 'app/main/main.html', 11 | controller: 'MainCtrl' 12 | }) 13 | .otherwise({ 14 | redirectTo: '/' 15 | }) 16 | }]) 17 | -------------------------------------------------------------------------------- /app/order/order.js: -------------------------------------------------------------------------------- 1 | angular.module('fanbox.order', ['ngRoute']) 2 | 3 | .config(['$routeProvider', function($routeProvider) { 4 | $routeProvider.when('/order', { 5 | templateUrl: 'app/order/order.html', 6 | controller: 'OrderCtrl' 7 | }); 8 | }]) 9 | 10 | .controller('OrderCtrl', function($scope) { 11 | $scope.quantity = [ 12 | { label: '0', value: 0 }, 13 | { label: '1', value: 1 }, 14 | { label: '2', value: 2 }, 15 | { label: '3', value: 3 } 16 | ]; 17 | 18 | $scope.teamList = [ 19 | { name: 'Georgia', price: 97 }, 20 | { name: 'Alabama', price: 67 }, 21 | { name: 'Furman', price: 47 } 22 | ]; 23 | 24 | $scope.georgia = $scope.quantity[0]; 25 | $scope.alabama = $scope.quantity[0]; 26 | $scope.furman = $scope.quantity[0]; 27 | }); -------------------------------------------------------------------------------- /.gitignore: -------------------------------------------------------------------------------- 1 | ### node etc ### 2 | 3 | # Logs 4 | logs 5 | *.log 6 | 7 | # Runtime data 8 | pids 9 | *.pid 10 | *.seed 11 | 12 | # Directory for instrumented libs generated by jscoverage/JSCover 13 | lib-cov 14 | 15 | # Coverage directory used by tools like istanbul 16 | coverage 17 | 18 | # Grunt intermediate storage (http://gruntjs.com/creating-plugins#storing-task-files) 19 | .grunt 20 | 21 | # Compiled Dirs (http://nodejs.org/api/addons.html) 22 | build/ 23 | dist/ 24 | 25 | # Dependency directorys 26 | # Deployed apps should consider commenting these lines out: 27 | # see https://npmjs.org/doc/faq.html#Should-I-check-my-node_modules-folder-into-git 28 | node_modules/ 29 | bower_components/ 30 | 31 | # Floobits 32 | .floo 33 | .floobit 34 | .floo 35 | .flooignore 36 | 37 | # Ignore Product Presentation document 38 | 'Product Presentation.docx' -------------------------------------------------------------------------------- /package.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "fanbox", 3 | "version": "0.1.0", 4 | "description": "Fan Box - For The Ultimate Fan", 5 | "author": "Jennifer Bland", 6 | "main": "server.js", 7 | "scripts": { 8 | "test": "echo \"Error: no test specified\" && exit 1", 9 | "start": "node server.js" 10 | }, 11 | "repository": { 12 | "type": "git", 13 | "url": "https://github.com/ratracegrad/Angular-Demo.git" 14 | }, 15 | "license": "ISC", 16 | "bugs": { 17 | "url": "https://github.com/ratracegrad/Angular-Demo/issues" 18 | }, 19 | "homepage": "https://github.com/ratracegrad/Angular-Demo", 20 | "keywords": [ 21 | "jennifer", 22 | "bland", 23 | "angular", 24 | "nodejs", 25 | "angular demo", 26 | "express" 27 | ], 28 | "dependencies": { 29 | "express": "^3.x.x", 30 | "nodemon": "^1.3.7" 31 | } 32 | } 33 | -------------------------------------------------------------------------------- /README.md: -------------------------------------------------------------------------------- 1 | # Fan Box - For the Ultimate Fan 2 | 3 | > This is a demonstration of multiple features found in AngularJS. It is running on a NodeJS Express server. 4 | It utilizes multiple views and routes to display the features on the website. 5 | 6 | > I created Fax Box to demonstrate how you would use AngularJS in a corporate website or ecommerce environment. 7 | 8 | > This is a great repo to use for learning how to use the many features found in AngularJS. 9 | 10 | **Table of Contents** 11 | 12 | - [Fan Box - For the Ultimate Fan](#fan-box---for-the-ultimate-fan) 13 | - [Technology Stack](#technology-stack) 14 | - [Requirements](#requirements) 15 | - [Installation](#installation) 16 | - [Live Demonstration](#live-demonstration) 17 | - [Screenshot](#screenshot) 18 | 19 | ## Technology Stack 20 | 1. NodeJS 21 | 2. Express 22 | 3. AngularJS 23 | 4. Twitter Bootstrap 24 | 25 | ## Requirements 26 | - Node 27 | - Express 28 | - Angular 29 | - Bootstrap 30 | 31 | ## Installation 32 | To use this repo, clone it to your computer. Run `npm install` to install all required dependencies. 33 | 34 | Start the server using `node server.js` or `nodemon server.js`. 35 | 36 | Open your browser to http:localhost:3000 37 | 38 | ## Live Demonstration 39 | [You can view this app in production here](https://jb-fanbox.herokuapp.com) 40 | 41 | ## Screenshot 42 | Home page for Fan Box 43 |  44 | 45 | How it Works page 46 |  47 | 48 | Order Page 49 |  50 | 51 | Contact Page 52 |  53 | -------------------------------------------------------------------------------- /app/css/blue.css: -------------------------------------------------------------------------------- 1 | /* 2DAFF0 * 0F91D2 */ 2 | 3 | .product-info div h4, 4 | #sdbr-title , 5 | #project-modal .close:hover, 6 | .dark-bg a, 7 | .navbar-inverse .navbar-nav>li>a:hover, 8 | .navbar-inverse .navbar-nav>li>a:focus, 9 | .navbar-inverse .navbar-brand:hover, 10 | .navbar-inverse .navbar-brand:focus, 11 | .navbar-inverse .navbar-nav>li>a.active, 12 | .navbar-inverse .navbar-nav>.active>a:hover, 13 | .navbar-inverse .navbar-nav>.active>a:focus, 14 | .navbar-header, 15 | #style-switcher h2, 16 | #style-switcher h2 a { 17 | color: #2DAFF0; 18 | } 19 | 20 | .slides-navigation a.next:hover, 21 | .slides-navigation a.prev:hover, 22 | .social-links li a:hover { 23 | background-color: #2DAFF0; 24 | border-color: #2DAFF0; 25 | } 26 | 27 | .btn-store, 28 | .slides-pagination a.current, 29 | .carousel-indicators li.active , 30 | .hover-mask2, 31 | .color-bg, 32 | .dropdown-toggle, 33 | .dropdown-menu>li>a:hover,.dropdown-menu>li>a:focus, 34 | .navbar-inverse .navbar-toggle:hover, .navbar-inverse .navbar-toggle:focus, 35 | .social-profiles li a:hover, 36 | .btn-store.outline:hover, 37 | .btn-store.outline:focus, 38 | .btn-store.outline:active { 39 | background-color: #2DAFF0; 40 | } 41 | 42 | .btn-store:hover, 43 | .btn-store:focus, 44 | .btn-store:active { 45 | background-color: #0F91D2; 46 | } 47 | 48 | .btn-store.outline { 49 | color:#2DAFF0; 50 | border-color: #2DAFF0; 51 | } 52 | 53 | #contact-form .form-control:focus, 54 | #order-form .form-control:focus, 55 | .input-group .form-control:focus { 56 | border:2px solid #2DAFF0; 57 | } 58 | 59 | .social-profiles li a { 60 | border:2px solid #2DAFF0; 61 | color:#2DAFF0; 62 | } 63 | 64 | .container-fluid { 65 | padding-right: 0px; 66 | padding-left: 0px; 67 | } -------------------------------------------------------------------------------- /app/contact/contact.html: -------------------------------------------------------------------------------- 1 |Do you have some kind of problem with our products?
7 |
19 |
28 |