From 9daed439ada73d8e9ded6d62bac1e7ce16afb9d7 Mon Sep 17 00:00:00 2001 From: Dan Stineback Date: Mon, 20 Jun 2016 21:03:07 -0700 Subject: [PATCH 01/11] init file set up --- dan-stineback/.eslintignore | 8 ++ dan-stineback/.eslintrc | 41 +++++++++ dan-stineback/.gitignore | 85 +++++++++++++++++++ dan-stineback/app/css/style.css | 0 dan-stineback/app/index.html | 11 +++ dan-stineback/app/js/client.js | 6 ++ .../js/first/controllers/imageController.js | 9 ++ .../app/js/first/controllers/index.js | 6 ++ .../app/js/first/directives/imageDirective.js | 15 ++++ .../app/js/first/directives/index.js | 0 dan-stineback/app/js/first/index.js | 4 + .../app/templates/firstApp/firstApp.html | 0 dan-stineback/gulpfile.js | 54 ++++++++++++ dan-stineback/karma.conf.js | 69 +++++++++++++++ dan-stineback/package.json | 26 ++++++ dan-stineback/server.js | 9 ++ dan-stineback/test/browser_test.js | 26 ++++++ 17 files changed, 369 insertions(+) create mode 100644 dan-stineback/.eslintignore create mode 100644 dan-stineback/.eslintrc create mode 100644 dan-stineback/.gitignore create mode 100644 dan-stineback/app/css/style.css create mode 100644 dan-stineback/app/index.html create mode 100644 dan-stineback/app/js/client.js create mode 100644 dan-stineback/app/js/first/controllers/imageController.js create mode 100644 dan-stineback/app/js/first/controllers/index.js create mode 100644 dan-stineback/app/js/first/directives/imageDirective.js create mode 100644 dan-stineback/app/js/first/directives/index.js create mode 100644 dan-stineback/app/js/first/index.js create mode 100644 dan-stineback/app/templates/firstApp/firstApp.html create mode 100644 dan-stineback/gulpfile.js create mode 100644 dan-stineback/karma.conf.js create mode 100644 dan-stineback/package.json create mode 100644 dan-stineback/server.js create mode 100644 dan-stineback/test/browser_test.js diff --git a/dan-stineback/.eslintignore b/dan-stineback/.eslintignore new file mode 100644 index 0000000..8c5c3c8 --- /dev/null +++ b/dan-stineback/.eslintignore @@ -0,0 +1,8 @@ +**/node_modules/* +**/vendor/* +**/*.min.js +/*.md +/package.json +/npm-debug.log +/procfile +/build/* diff --git a/dan-stineback/.eslintrc b/dan-stineback/.eslintrc new file mode 100644 index 0000000..6d505ad --- /dev/null +++ b/dan-stineback/.eslintrc @@ -0,0 +1,41 @@ +{ +"rules": { +"no-console": 0, +"indent": [ +2, +2 +], +"quotes": [ +2, +"single" +], +"linebreak-style": [ +2, +"unix" +], +"semi": [ +2, +"always" +] +}, +"env": { +"es6": true, +"node": true, +"browser": true, +"mocha": true +}, +"globals": { +"describe": false, +"it": false, +"beforeEach": false, +"afterEach": false, +"before": false, +"after": false +}, +"ecmaFeatures": { +"modules": true, +"experimentalObjectRestSpread": true, +"impliedStrict": true +}, +"extends": "eslint:recommended" +} diff --git a/dan-stineback/.gitignore b/dan-stineback/.gitignore new file mode 100644 index 0000000..a2bd22b --- /dev/null +++ b/dan-stineback/.gitignore @@ -0,0 +1,85 @@ +# application specific +build/* + +# Created by https://www.gitignore.io/api/node,osx,vim + +### Node ### +# Logs +logs +*.log +npm-debug.log* + +# Runtime data +pids +*.pid +*.seed + +# Directory for instrumented libs generated by jscoverage/JSCover +lib-cov + +# Coverage directory used by tools like istanbul +coverage + +# nyc test coverage +.nyc_output + +# Grunt intermediate storage (http://gruntjs.com/creating-plugins#storing-task-files) +.grunt + +# node-waf configuration +.lock-wscript + +# Compiled binary addons (http://nodejs.org/api/addons.html) +build/Release + +# Dependency directories +node_modules +jspm_packages + +# Optional npm cache directory +.npm + +# Optional REPL history +.node_repl_history + + +### OSX ### +*.DS_Store +.AppleDouble +.LSOverride + +# Icon must end with two \r +Icon + + +# Thumbnails +._* + +# Files that might appear in the root of a volume +.DocumentRevisions-V100 +.fseventsd +.Spotlight-V100 +.TemporaryItems +.Trashes +.VolumeIcon.icns +.com.apple.timemachine.donotpresent + +# Directories potentially created on remote AFP share +.AppleDB +.AppleDesktop +Network Trash Folder +Temporary Items +.apdisk + + +### Vim ### +# swap +[._]*.s[a-w][a-z] +[._]s[a-w][a-z] +# session +Session.vim +# temporary +.netrwhist +*~ +# auto-generated tag files +tags diff --git a/dan-stineback/app/css/style.css b/dan-stineback/app/css/style.css new file mode 100644 index 0000000..e69de29 diff --git a/dan-stineback/app/index.html b/dan-stineback/app/index.html new file mode 100644 index 0000000..064e511 --- /dev/null +++ b/dan-stineback/app/index.html @@ -0,0 +1,11 @@ + + + + + + + + + + + diff --git a/dan-stineback/app/js/client.js b/dan-stineback/app/js/client.js new file mode 100644 index 0000000..73693ca --- /dev/null +++ b/dan-stineback/app/js/client.js @@ -0,0 +1,6 @@ +'use strict'; + +const angular = require('angular'); + +var FirstApp = angular.module('FirstApp', []); +require('./first')(FirstApp); diff --git a/dan-stineback/app/js/first/controllers/imageController.js b/dan-stineback/app/js/first/controllers/imageController.js new file mode 100644 index 0000000..f9c8ba1 --- /dev/null +++ b/dan-stineback/app/js/first/controllers/imageController.js @@ -0,0 +1,9 @@ +'use strict'; +module.exports = function(app) { + app.controller('imageController', ['$scope', function() { + this.url = 'https://static.pexels.com/photos/2232/vegetables-italian-pizza-restaurant.jpg'; + this.height = 400; + this.width = 400; + this.title = 'Food'; + }]); +}; diff --git a/dan-stineback/app/js/first/controllers/index.js b/dan-stineback/app/js/first/controllers/index.js new file mode 100644 index 0000000..4bc6a08 --- /dev/null +++ b/dan-stineback/app/js/first/controllers/index.js @@ -0,0 +1,6 @@ +'use strict'; + +module.exports = function(app) { + require('./FirstController')(app); + require('./imageController')(app); +}; diff --git a/dan-stineback/app/js/first/directives/imageDirective.js b/dan-stineback/app/js/first/directives/imageDirective.js new file mode 100644 index 0000000..6717ff6 --- /dev/null +++ b/dan-stineback/app/js/first/directives/imageDirective.js @@ -0,0 +1,15 @@ +'use strict'; +module.exports = function(app){ + app.directive('imageDisplay', function(){ + return{ + restrict: 'E', + template: '{{title}}', + scope: { + url: '@', + height: '@', + width: '@', + alt: '@title' + } + }; + }); +}; diff --git a/dan-stineback/app/js/first/directives/index.js b/dan-stineback/app/js/first/directives/index.js new file mode 100644 index 0000000..e69de29 diff --git a/dan-stineback/app/js/first/index.js b/dan-stineback/app/js/first/index.js new file mode 100644 index 0000000..e7d6cfa --- /dev/null +++ b/dan-stineback/app/js/first/index.js @@ -0,0 +1,4 @@ +module.exports = function(app) { + require('./controllers')(app); + require('./directives')(app); +}; diff --git a/dan-stineback/app/templates/firstApp/firstApp.html b/dan-stineback/app/templates/firstApp/firstApp.html new file mode 100644 index 0000000..e69de29 diff --git a/dan-stineback/gulpfile.js b/dan-stineback/gulpfile.js new file mode 100644 index 0000000..75cf11c --- /dev/null +++ b/dan-stineback/gulpfile.js @@ -0,0 +1,54 @@ +'use strict'; + +const gulp = require('gulp'); +const webpack = require('webpack-stream'); +const clean = require('gulp-clean'); + +const paths = { + js: __dirname + '/app/**/*.js', + html: __dirname + '/app/index.html', + css: __dirname + '/app/**/*.css' +}; + +gulp.task('clean', ()=>{ + return gulp.src('./build/*', {read:false}) + .pipe(clean()); +}); + +gulp.task('copy-html', ['clean'], ()=>{ + return gulp.src(paths.html) + .pipe(gulp.dest('./build')); +}); + +gulp.task('copy-css', ['clean'], ()=>{ + return gulp.src(paths.css) + .pipe(gulp.dest('./build')); +}); + +gulp.task('bundle', ['clean'], ()=>{ + return gulp.src(paths.js) + .pipe(webpack({ + output: { + filename: 'bundle.js' + } + })) + .pipe(gulp.dest('./build')); +}); + +gulp.task('bundle:test', () => { + return gulp.src(__dirname + '/test/*_test.js') + .pipe(webpack({ + output: { + filename: 'test_bundle.js' + } + })) + .pipe(gulp.dest(__dirname + '/test')); +}); + +gulp.task('watch', ()=>{ + gulp.watch('./app/*', ['build']); +}); + +gulp.task('build', ['clean', 'copy', 'bundle']); + +gulp.task('default', ['build']); diff --git a/dan-stineback/karma.conf.js b/dan-stineback/karma.conf.js new file mode 100644 index 0000000..4fb873d --- /dev/null +++ b/dan-stineback/karma.conf.js @@ -0,0 +1,69 @@ +// Karma configuration +// Generated on Wed Jun 15 2016 14:20:45 GMT-0700 (PDT) + +module.exports = function(config) { + config.set({ + + // base path that will be used to resolve all patterns (eg. files, exclude) + basePath: '', + + + // frameworks to use + // available frameworks: https://npmjs.org/browse/keyword/karma-adapter + frameworks: ['jasmine'], + + + // list of files / patterns to load in the browser + files: [ + 'test/test_bundle.js' + ], + + + // list of files to exclude + exclude: [ + ], + + + // preprocess matching files before serving them to the browser + // available preprocessors: https://npmjs.org/browse/keyword/karma-preprocessor + preprocessors: { + }, + + + // test results reporter to use + // possible values: 'dots', 'progress' + // available reporters: https://npmjs.org/browse/keyword/karma-reporter + reporters: ['progress'], + + + // web server port + port: 9876, + + + // enable / disable colors in the output (reporters and logs) + colors: true, + + + // level of logging + // possible values: config.LOG_DISABLE || config.LOG_ERROR || config.LOG_WARN || config.LOG_INFO || config.LOG_DEBUG + logLevel: config.LOG_INFO, + + + // enable / disable watching file and executing tests whenever any file changes + autoWatch: false, + + + // start these browsers + // available browser launchers: https://npmjs.org/browse/keyword/karma-launcher + browsers: ['Chrome'], + + + // Continuous Integration mode + // if true, Karma captures browsers, runs the tests and exits + singleRun: true, + + // Concurrency level + // how many browser should be started simultaneous + concurrency: Infinity + }); +}; diff --git a/dan-stineback/package.json b/dan-stineback/package.json new file mode 100644 index 0000000..3c9332e --- /dev/null +++ b/dan-stineback/package.json @@ -0,0 +1,26 @@ +{ + "name": "template-angular", + "version": "0.1.0", + "description": "template-angular", + "main": "index.html", + "scripts": { + "test": "echo \"Error: no test specified\" && exit 1", + "start": "node server.js" + }, + "keywords": [], + "author": "", + "license": "ISC", + "dependencies": { + "express": "^4.13.4" + }, + "devDependencies": { + "angular": "^1.5.6", + "angular-mocks": "^1.5.7", + "gulp": "^3.9.1", + "gulp-clean": "^0.3.2", + "jasmine-core": "^2.4.1", + "karma": "^0.13.22", + "karma-chrome-launcher": "^1.0.1", + "webpack-stream": "^3.2.0" + } +} diff --git a/dan-stineback/server.js b/dan-stineback/server.js new file mode 100644 index 0000000..393e55b --- /dev/null +++ b/dan-stineback/server.js @@ -0,0 +1,9 @@ +'use strict'; +const express = require('express'); +const app = express(); + +app.use(express.static(__dirname + '/build')); + +app.listen(3030, () => { + console.log('server is running on 8080'); +}); diff --git a/dan-stineback/test/browser_test.js b/dan-stineback/test/browser_test.js new file mode 100644 index 0000000..2976e9f --- /dev/null +++ b/dan-stineback/test/browser_test.js @@ -0,0 +1,26 @@ +'use strict'; +const angular = require('angular'); + +require('angular-mocks'); +require('../app/js/client'); + +describe('controller tests', ()=>{ + + let ctrlVar1 + + it('should run a test', ()=>{ + expect(true).toBe(true); + }); + + beforeEach(()=>{ + angular.mock.module('YourApp'); + angular.mock.inject(function($controller){ + ctrlVar1 = new $controller('YourController'); + }); + }); + + it('should test your controller', ()=>{ + expect(ctrlVar1.someBooleanProperty).toBe(true); + }); + +}); From 2728788d3b86fae13c528de2b72f28e320fdbe86 Mon Sep 17 00:00:00 2001 From: Dan Stineback Date: Mon, 20 Jun 2016 21:06:57 -0700 Subject: [PATCH 02/11] added controllers to the directive index --- dan-stineback/app/js/first/controllers/imageController.js | 4 ++-- dan-stineback/app/js/first/directives/index.js | 5 +++++ 2 files changed, 7 insertions(+), 2 deletions(-) diff --git a/dan-stineback/app/js/first/controllers/imageController.js b/dan-stineback/app/js/first/controllers/imageController.js index f9c8ba1..9f0246a 100644 --- a/dan-stineback/app/js/first/controllers/imageController.js +++ b/dan-stineback/app/js/first/controllers/imageController.js @@ -1,9 +1,9 @@ 'use strict'; module.exports = function(app) { app.controller('imageController', ['$scope', function() { - this.url = 'https://static.pexels.com/photos/2232/vegetables-italian-pizza-restaurant.jpg'; + this.url = 'http://f.cl.ly/items/3g3J1G0w122M360w380O/3726490195_f7cc75d377_o.jpg'; this.height = 400; this.width = 400; - this.title = 'Food'; + this.title = 'Bunny'; }]); }; diff --git a/dan-stineback/app/js/first/directives/index.js b/dan-stineback/app/js/first/directives/index.js index e69de29..1fc0971 100644 --- a/dan-stineback/app/js/first/directives/index.js +++ b/dan-stineback/app/js/first/directives/index.js @@ -0,0 +1,5 @@ +'use strict'; +module.exports =function(app) { + require('./FirstController')(app); + require('./imageController')(app); +}; From e1e36a2cd10973d6d1fc3b2ca05dd9b18c1065af Mon Sep 17 00:00:00 2001 From: Dan Stineback Date: Mon, 20 Jun 2016 21:10:15 -0700 Subject: [PATCH 03/11] added thumbnail controller --- .../app/js/first/controllers/thumbnailController.js | 9 +++++++++ 1 file changed, 9 insertions(+) create mode 100644 dan-stineback/app/js/first/controllers/thumbnailController.js diff --git a/dan-stineback/app/js/first/controllers/thumbnailController.js b/dan-stineback/app/js/first/controllers/thumbnailController.js new file mode 100644 index 0000000..629fe30 --- /dev/null +++ b/dan-stineback/app/js/first/controllers/thumbnailController.js @@ -0,0 +1,9 @@ +'use strict'; +module.exports = function(app) { + app.controller('imageController', ['$scope', function() { + this.url = 'http://f.cl.ly/items/3g3J1G0w122M360w380O/3726490195_f7cc75d377_o.jpg'; + this.height = 100; + this.width = 100; + this.title = 'Bunny thumbnail'; + }]); +}; From d4533a9a6885a8fbd99e6bc2fcbabd54a334ca61 Mon Sep 17 00:00:00 2001 From: Dan Stineback Date: Mon, 20 Jun 2016 21:14:52 -0700 Subject: [PATCH 04/11] added thumbnail directive --- dan-stineback/app/js/first/controllers/index.js | 2 +- dan-stineback/app/js/first/directives/index.js | 2 +- .../app/js/first/directives/thumbnailDirective.js | 15 +++++++++++++++ 3 files changed, 17 insertions(+), 2 deletions(-) create mode 100644 dan-stineback/app/js/first/directives/thumbnailDirective.js diff --git a/dan-stineback/app/js/first/controllers/index.js b/dan-stineback/app/js/first/controllers/index.js index 4bc6a08..e290180 100644 --- a/dan-stineback/app/js/first/controllers/index.js +++ b/dan-stineback/app/js/first/controllers/index.js @@ -1,6 +1,6 @@ 'use strict'; module.exports = function(app) { - require('./FirstController')(app); + require('./thumbnailController')(app); require('./imageController')(app); }; diff --git a/dan-stineback/app/js/first/directives/index.js b/dan-stineback/app/js/first/directives/index.js index 1fc0971..a4f2dcb 100644 --- a/dan-stineback/app/js/first/directives/index.js +++ b/dan-stineback/app/js/first/directives/index.js @@ -1,5 +1,5 @@ 'use strict'; module.exports =function(app) { - require('./FirstController')(app); + require('./thumbnailController')(app); require('./imageController')(app); }; diff --git a/dan-stineback/app/js/first/directives/thumbnailDirective.js b/dan-stineback/app/js/first/directives/thumbnailDirective.js new file mode 100644 index 0000000..9fd4346 --- /dev/null +++ b/dan-stineback/app/js/first/directives/thumbnailDirective.js @@ -0,0 +1,15 @@ +'use strict'; +module.exports = function(app){ + app.directive('thumbnailDisplay', function(){ + return{ + restrict: 'E', + template: '{{title}}', + scope: { + url: '@', + height: '@', + width: '@', + alt: '@title' + } + }; + }); +}; From 1ffa8b63797b8e7f47236ea5cb1cc85e4e1bfb92 Mon Sep 17 00:00:00 2001 From: Dan Stineback Date: Mon, 20 Jun 2016 21:25:07 -0700 Subject: [PATCH 05/11] renamed the template html --- dan-stineback/app/js/client.js | 4 ++-- .../app/templates/firstApp/{firstApp.html => bunnyApp.html} | 0 2 files changed, 2 insertions(+), 2 deletions(-) rename dan-stineback/app/templates/firstApp/{firstApp.html => bunnyApp.html} (100%) diff --git a/dan-stineback/app/js/client.js b/dan-stineback/app/js/client.js index 73693ca..a864747 100644 --- a/dan-stineback/app/js/client.js +++ b/dan-stineback/app/js/client.js @@ -2,5 +2,5 @@ const angular = require('angular'); -var FirstApp = angular.module('FirstApp', []); -require('./first')(FirstApp); +var bunnyApp = angular.module('bunnyApp', []); +require('./first')(bunnyApp); diff --git a/dan-stineback/app/templates/firstApp/firstApp.html b/dan-stineback/app/templates/firstApp/bunnyApp.html similarity index 100% rename from dan-stineback/app/templates/firstApp/firstApp.html rename to dan-stineback/app/templates/firstApp/bunnyApp.html From 0c37af5255e34ebffcc23670f13712b9f608efae Mon Sep 17 00:00:00 2001 From: Dan Stineback Date: Mon, 20 Jun 2016 21:50:59 -0700 Subject: [PATCH 06/11] added directives to index.html --- dan-stineback/app/index.html | 17 +++++++++++++++-- .../app/js/first/directives/imageDirective.js | 3 ++- .../js/first/directives/thumbnailDirective.js | 3 ++- 3 files changed, 19 insertions(+), 4 deletions(-) diff --git a/dan-stineback/app/index.html b/dan-stineback/app/index.html index 064e511..5ff3130 100644 --- a/dan-stineback/app/index.html +++ b/dan-stineback/app/index.html @@ -3,9 +3,22 @@ - + Bunny App - + +
+
+

Title {{thumb.title}}

+

Picture sourece {{thumb.url}}

+

Description: {{description}}

+
+
+ +
+
+ +
+
diff --git a/dan-stineback/app/js/first/directives/imageDirective.js b/dan-stineback/app/js/first/directives/imageDirective.js index 6717ff6..ddf17e7 100644 --- a/dan-stineback/app/js/first/directives/imageDirective.js +++ b/dan-stineback/app/js/first/directives/imageDirective.js @@ -8,7 +8,8 @@ module.exports = function(app){ url: '@', height: '@', width: '@', - alt: '@title' + alt: '@title', + description: '@' } }; }); diff --git a/dan-stineback/app/js/first/directives/thumbnailDirective.js b/dan-stineback/app/js/first/directives/thumbnailDirective.js index 9fd4346..48335a6 100644 --- a/dan-stineback/app/js/first/directives/thumbnailDirective.js +++ b/dan-stineback/app/js/first/directives/thumbnailDirective.js @@ -8,7 +8,8 @@ module.exports = function(app){ url: '@', height: '@', width: '@', - alt: '@title' + alt: '@title', + description: '@' } }; }); From 5d30866baaacf14ab97cf0ea98fa0455f5d63c20 Mon Sep 17 00:00:00 2001 From: Dan Stineback Date: Mon, 20 Jun 2016 21:56:53 -0700 Subject: [PATCH 07/11] added stuff to .eslint and took out test folder, also took out dependancy that were not being used --- dan-stineback/.gitignore | 1 + dan-stineback/gulpfile.js | 2 +- dan-stineback/package.json | 44 ++++++++++++++---------------- dan-stineback/test/browser_test.js | 26 ------------------ 4 files changed, 22 insertions(+), 51 deletions(-) delete mode 100644 dan-stineback/test/browser_test.js diff --git a/dan-stineback/.gitignore b/dan-stineback/.gitignore index a2bd22b..594c750 100644 --- a/dan-stineback/.gitignore +++ b/dan-stineback/.gitignore @@ -1,5 +1,6 @@ # application specific build/* +db/ # Created by https://www.gitignore.io/api/node,osx,vim diff --git a/dan-stineback/gulpfile.js b/dan-stineback/gulpfile.js index 75cf11c..108fc33 100644 --- a/dan-stineback/gulpfile.js +++ b/dan-stineback/gulpfile.js @@ -6,7 +6,7 @@ const clean = require('gulp-clean'); const paths = { js: __dirname + '/app/**/*.js', - html: __dirname + '/app/index.html', + html: __dirname + '/app/**/*.html', css: __dirname + '/app/**/*.css' }; diff --git a/dan-stineback/package.json b/dan-stineback/package.json index 3c9332e..2cebf20 100644 --- a/dan-stineback/package.json +++ b/dan-stineback/package.json @@ -1,26 +1,22 @@ { - "name": "template-angular", - "version": "0.1.0", - "description": "template-angular", - "main": "index.html", - "scripts": { - "test": "echo \"Error: no test specified\" && exit 1", - "start": "node server.js" - }, - "keywords": [], - "author": "", - "license": "ISC", - "dependencies": { - "express": "^4.13.4" - }, - "devDependencies": { - "angular": "^1.5.6", - "angular-mocks": "^1.5.7", - "gulp": "^3.9.1", - "gulp-clean": "^0.3.2", - "jasmine-core": "^2.4.1", - "karma": "^0.13.22", - "karma-chrome-launcher": "^1.0.1", - "webpack-stream": "^3.2.0" - } + "name": "template-angular", + "version": "0.1.0", + "description": "template-angular", + "main": "index.html", + "scripts": { + "test": "echo \"Error: no test specified\" && exit 1", + "start": "node server.js" + }, + "keywords": [], + "author": "", + "license": "ISC", + "dependencies": { + "express": "^4.13.4" + }, + "devDependencies": { + "angular": "^1.5.6", + "gulp": "^3.9.1", + "gulp-clean": "^0.3.2", + "webpack-stream": "^3.2.0" + } } diff --git a/dan-stineback/test/browser_test.js b/dan-stineback/test/browser_test.js deleted file mode 100644 index 2976e9f..0000000 --- a/dan-stineback/test/browser_test.js +++ /dev/null @@ -1,26 +0,0 @@ -'use strict'; -const angular = require('angular'); - -require('angular-mocks'); -require('../app/js/client'); - -describe('controller tests', ()=>{ - - let ctrlVar1 - - it('should run a test', ()=>{ - expect(true).toBe(true); - }); - - beforeEach(()=>{ - angular.mock.module('YourApp'); - angular.mock.inject(function($controller){ - ctrlVar1 = new $controller('YourController'); - }); - }); - - it('should test your controller', ()=>{ - expect(ctrlVar1.someBooleanProperty).toBe(true); - }); - -}); From 481bd0a42e8e472c3c452cd91ff40db38092f90c Mon Sep 17 00:00:00 2001 From: Dan Stineback Date: Mon, 20 Jun 2016 22:27:27 -0700 Subject: [PATCH 08/11] first test of app and it was not working --- dan-stineback/.eslintrc | 3 ++- dan-stineback/app/index.html | 16 ++++++++-------- .../js/first/controllers/thumbnailController.js | 2 +- dan-stineback/app/js/first/directives/index.js | 4 ++-- dan-stineback/gulpfile.js | 2 +- dan-stineback/server.js | 2 +- 6 files changed, 15 insertions(+), 14 deletions(-) diff --git a/dan-stineback/.eslintrc b/dan-stineback/.eslintrc index 6d505ad..4d749b1 100644 --- a/dan-stineback/.eslintrc +++ b/dan-stineback/.eslintrc @@ -22,7 +22,8 @@ "es6": true, "node": true, "browser": true, -"mocha": true +"mocha": true, +"jasmine": true }, "globals": { "describe": false, diff --git a/dan-stineback/app/index.html b/dan-stineback/app/index.html index 5ff3130..373bf76 100644 --- a/dan-stineback/app/index.html +++ b/dan-stineback/app/index.html @@ -7,16 +7,16 @@
-
-

Title {{thumb.title}}

-

Picture sourece {{thumb.url}}

-

Description: {{description}}

+
+

Title {{thumbs.title}}

+

Picture sourece {{thumbs.url}}

+

Description: {{description}}

-
- +
+
-
- +
+
diff --git a/dan-stineback/app/js/first/controllers/thumbnailController.js b/dan-stineback/app/js/first/controllers/thumbnailController.js index 629fe30..ba6aba7 100644 --- a/dan-stineback/app/js/first/controllers/thumbnailController.js +++ b/dan-stineback/app/js/first/controllers/thumbnailController.js @@ -1,6 +1,6 @@ 'use strict'; module.exports = function(app) { - app.controller('imageController', ['$scope', function() { + app.controller('thumbnailController', ['$scope', function() { this.url = 'http://f.cl.ly/items/3g3J1G0w122M360w380O/3726490195_f7cc75d377_o.jpg'; this.height = 100; this.width = 100; diff --git a/dan-stineback/app/js/first/directives/index.js b/dan-stineback/app/js/first/directives/index.js index a4f2dcb..c206799 100644 --- a/dan-stineback/app/js/first/directives/index.js +++ b/dan-stineback/app/js/first/directives/index.js @@ -1,5 +1,5 @@ 'use strict'; module.exports =function(app) { - require('./thumbnailController')(app); - require('./imageController')(app); + require('./thumbnailDirective')(app); + require('./imageDirective')(app); }; diff --git a/dan-stineback/gulpfile.js b/dan-stineback/gulpfile.js index 108fc33..fd391c8 100644 --- a/dan-stineback/gulpfile.js +++ b/dan-stineback/gulpfile.js @@ -49,6 +49,6 @@ gulp.task('watch', ()=>{ gulp.watch('./app/*', ['build']); }); -gulp.task('build', ['clean', 'copy', 'bundle']); +gulp.task('build', ['clean', 'copy-html', 'bundle']); gulp.task('default', ['build']); diff --git a/dan-stineback/server.js b/dan-stineback/server.js index 393e55b..75bc855 100644 --- a/dan-stineback/server.js +++ b/dan-stineback/server.js @@ -5,5 +5,5 @@ const app = express(); app.use(express.static(__dirname + '/build')); app.listen(3030, () => { - console.log('server is running on 8080'); + console.log('server is running on 3030'); }); From a0621606c78116824465bc1f307c52f3251fd5d7 Mon Sep 17 00:00:00 2001 From: Dan Stineback Date: Mon, 20 Jun 2016 23:01:13 -0700 Subject: [PATCH 09/11] was able to fix all the path bugs and finally had pictures displaying on page. Now I just need to fix the lay out --- dan-stineback/app/index.html | 13 +++++++------ dan-stineback/app/js/client.js | 4 ++-- dan-stineback/app/js/first/controllers/index.js | 1 + .../app/js/first/controllers/titleController.js | 8 ++++++++ dan-stineback/app/js/first/directives/index.js | 1 + .../app/js/first/directives/titleDirective.js | 15 +++++++++++++++ .../app/templates/firstApp/bunnyApp.html | 5 +++++ 7 files changed, 39 insertions(+), 8 deletions(-) create mode 100644 dan-stineback/app/js/first/controllers/titleController.js create mode 100644 dan-stineback/app/js/first/directives/titleDirective.js diff --git a/dan-stineback/app/index.html b/dan-stineback/app/index.html index 373bf76..e6c39c6 100644 --- a/dan-stineback/app/index.html +++ b/dan-stineback/app/index.html @@ -5,12 +5,13 @@ Bunny App - +
-
-

Title {{thumbs.title}}

-

Picture sourece {{thumbs.url}}

-

Description: {{description}}

+
+ +
@@ -19,6 +20,6 @@

Description: {{description}}

- + diff --git a/dan-stineback/app/js/client.js b/dan-stineback/app/js/client.js index a864747..33c7a9a 100644 --- a/dan-stineback/app/js/client.js +++ b/dan-stineback/app/js/client.js @@ -2,5 +2,5 @@ const angular = require('angular'); -var bunnyApp = angular.module('bunnyApp', []); -require('./first')(bunnyApp); +var BunnyApp = angular.module('BunnyApp', []); +require('./first')(BunnyApp); diff --git a/dan-stineback/app/js/first/controllers/index.js b/dan-stineback/app/js/first/controllers/index.js index e290180..1bb98a1 100644 --- a/dan-stineback/app/js/first/controllers/index.js +++ b/dan-stineback/app/js/first/controllers/index.js @@ -3,4 +3,5 @@ module.exports = function(app) { require('./thumbnailController')(app); require('./imageController')(app); + require('./titleController')(app); }; diff --git a/dan-stineback/app/js/first/controllers/titleController.js b/dan-stineback/app/js/first/controllers/titleController.js new file mode 100644 index 0000000..a7e6ce5 --- /dev/null +++ b/dan-stineback/app/js/first/controllers/titleController.js @@ -0,0 +1,8 @@ +'use strict'; +module.exports = function(app) { + app.controller('titleController', ['$scope', function() { + this.title = 'Bunny Picture'; + this.url = 'http://f.cl.ly/items/3g3J1G0w122M360w380O/3726490195_f7cc75d377_o.jpg'; + this.description = 'Cute picture of a bunny.'; + }]); +}; diff --git a/dan-stineback/app/js/first/directives/index.js b/dan-stineback/app/js/first/directives/index.js index c206799..e04c6a1 100644 --- a/dan-stineback/app/js/first/directives/index.js +++ b/dan-stineback/app/js/first/directives/index.js @@ -2,4 +2,5 @@ module.exports =function(app) { require('./thumbnailDirective')(app); require('./imageDirective')(app); + require('./titleDirective')(app); }; diff --git a/dan-stineback/app/js/first/directives/titleDirective.js b/dan-stineback/app/js/first/directives/titleDirective.js new file mode 100644 index 0000000..bb10f79 --- /dev/null +++ b/dan-stineback/app/js/first/directives/titleDirective.js @@ -0,0 +1,15 @@ +'use strict'; +module.exports = function(app) { + app.directive('titleDirective', function() { + return { + templateUrl: './templates/firstApp/bunnyApp.html', + restrict: 'AEC', + scope: { + title: '@', + description: '@', + url: '@' + } + }; + + }); +}; diff --git a/dan-stineback/app/templates/firstApp/bunnyApp.html b/dan-stineback/app/templates/firstApp/bunnyApp.html index e69de29..4ebd8cb 100644 --- a/dan-stineback/app/templates/firstApp/bunnyApp.html +++ b/dan-stineback/app/templates/firstApp/bunnyApp.html @@ -0,0 +1,5 @@ +
+ Title: {{title}}
+ url: {{url}}
+ description: {{description}} +
From 16e2f08fd852d28b1824ccccf071bdac150ed0b8 Mon Sep 17 00:00:00 2001 From: Dan Stineback Date: Mon, 20 Jun 2016 23:22:57 -0700 Subject: [PATCH 10/11] hacked way at a few different things but will need to make another html, controller and directive but going to bed so will do that in the moring --- dan-stineback/app/css/style.css | 4 ++++ dan-stineback/app/index.html | 7 ++++--- dan-stineback/app/js/first/directives/imageDirective.js | 2 +- 3 files changed, 9 insertions(+), 4 deletions(-) diff --git a/dan-stineback/app/css/style.css b/dan-stineback/app/css/style.css index e69de29..7172549 100644 --- a/dan-stineback/app/css/style.css +++ b/dan-stineback/app/css/style.css @@ -0,0 +1,4 @@ +div { + margin-top: 20px; + padding: 30px; +} diff --git a/dan-stineback/app/index.html b/dan-stineback/app/index.html index e6c39c6..46d7aa5 100644 --- a/dan-stineback/app/index.html +++ b/dan-stineback/app/index.html @@ -9,15 +9,16 @@
-
+
+ + //need to make a new controller, html and directive for picture. +
diff --git a/dan-stineback/app/js/first/directives/imageDirective.js b/dan-stineback/app/js/first/directives/imageDirective.js index ddf17e7..5b86e3b 100644 --- a/dan-stineback/app/js/first/directives/imageDirective.js +++ b/dan-stineback/app/js/first/directives/imageDirective.js @@ -3,7 +3,7 @@ module.exports = function(app){ app.directive('imageDisplay', function(){ return{ restrict: 'E', - template: '{{title}}', + template: '{{title}}', scope: { url: '@', height: '@', From fbd2603f0ae1ff215c748be4afd9aaafce54fc37 Mon Sep 17 00:00:00 2001 From: Dan Stineback Date: Tue, 21 Jun 2016 11:10:36 -0700 Subject: [PATCH 11/11] Took out 2 controllers. Found out we needed just one controller for the assignment. --- dan-stineback/app/css/style.css | 4 ---- dan-stineback/app/index.html | 23 +++++++------------ .../js/first/controllers/imageController.js | 5 +++- .../app/js/first/controllers/index.js | 2 -- .../first/controllers/thumbnailController.js | 9 -------- .../js/first/controllers/titleController.js | 8 ------- .../app/js/first/directives/imageDirective.js | 9 ++++---- .../js/first/directives/thumbnailDirective.js | 8 +++---- .../app/templates/firstApp/image.html | 5 ++++ .../app/templates/firstApp/thumbnail.html | 3 +++ dan-stineback/gulpfile.js | 12 +++++----- 11 files changed, 34 insertions(+), 54 deletions(-) delete mode 100644 dan-stineback/app/css/style.css delete mode 100644 dan-stineback/app/js/first/controllers/thumbnailController.js delete mode 100644 dan-stineback/app/js/first/controllers/titleController.js create mode 100644 dan-stineback/app/templates/firstApp/image.html create mode 100644 dan-stineback/app/templates/firstApp/thumbnail.html diff --git a/dan-stineback/app/css/style.css b/dan-stineback/app/css/style.css deleted file mode 100644 index 7172549..0000000 --- a/dan-stineback/app/css/style.css +++ /dev/null @@ -1,4 +0,0 @@ -div { - margin-top: 20px; - padding: 30px; -} diff --git a/dan-stineback/app/index.html b/dan-stineback/app/index.html index 46d7aa5..f2d753e 100644 --- a/dan-stineback/app/index.html +++ b/dan-stineback/app/index.html @@ -2,24 +2,17 @@ - Bunny App -
-
- -
-
- -
-
- -
- - //need to make a new controller, html and directive for picture. -
-
+
+ + + + + + +
diff --git a/dan-stineback/app/js/first/controllers/imageController.js b/dan-stineback/app/js/first/controllers/imageController.js index 9f0246a..ad53688 100644 --- a/dan-stineback/app/js/first/controllers/imageController.js +++ b/dan-stineback/app/js/first/controllers/imageController.js @@ -4,6 +4,9 @@ module.exports = function(app) { this.url = 'http://f.cl.ly/items/3g3J1G0w122M360w380O/3726490195_f7cc75d377_o.jpg'; this.height = 400; this.width = 400; - this.title = 'Bunny'; + this.title = 'Bunny Picture'; + this.description = 'A Cute picture of a bunny.'; + this.big = 'A BIG Cute Bunny Picture'; + }]); }; diff --git a/dan-stineback/app/js/first/controllers/index.js b/dan-stineback/app/js/first/controllers/index.js index 1bb98a1..999d0be 100644 --- a/dan-stineback/app/js/first/controllers/index.js +++ b/dan-stineback/app/js/first/controllers/index.js @@ -1,7 +1,5 @@ 'use strict'; module.exports = function(app) { - require('./thumbnailController')(app); require('./imageController')(app); - require('./titleController')(app); }; diff --git a/dan-stineback/app/js/first/controllers/thumbnailController.js b/dan-stineback/app/js/first/controllers/thumbnailController.js deleted file mode 100644 index ba6aba7..0000000 --- a/dan-stineback/app/js/first/controllers/thumbnailController.js +++ /dev/null @@ -1,9 +0,0 @@ -'use strict'; -module.exports = function(app) { - app.controller('thumbnailController', ['$scope', function() { - this.url = 'http://f.cl.ly/items/3g3J1G0w122M360w380O/3726490195_f7cc75d377_o.jpg'; - this.height = 100; - this.width = 100; - this.title = 'Bunny thumbnail'; - }]); -}; diff --git a/dan-stineback/app/js/first/controllers/titleController.js b/dan-stineback/app/js/first/controllers/titleController.js deleted file mode 100644 index a7e6ce5..0000000 --- a/dan-stineback/app/js/first/controllers/titleController.js +++ /dev/null @@ -1,8 +0,0 @@ -'use strict'; -module.exports = function(app) { - app.controller('titleController', ['$scope', function() { - this.title = 'Bunny Picture'; - this.url = 'http://f.cl.ly/items/3g3J1G0w122M360w380O/3726490195_f7cc75d377_o.jpg'; - this.description = 'Cute picture of a bunny.'; - }]); -}; diff --git a/dan-stineback/app/js/first/directives/imageDirective.js b/dan-stineback/app/js/first/directives/imageDirective.js index 5b86e3b..e7aebcd 100644 --- a/dan-stineback/app/js/first/directives/imageDirective.js +++ b/dan-stineback/app/js/first/directives/imageDirective.js @@ -2,14 +2,15 @@ module.exports = function(app){ app.directive('imageDisplay', function(){ return{ - restrict: 'E', - template: '{{title}}', + restrict: 'AEC', + templateUrl: './templates/firstApp/image.html', scope: { url: '@', height: '@', width: '@', - alt: '@title', - description: '@' + title: '@', + description: '@', + big: '@' } }; }); diff --git a/dan-stineback/app/js/first/directives/thumbnailDirective.js b/dan-stineback/app/js/first/directives/thumbnailDirective.js index 48335a6..031c4ba 100644 --- a/dan-stineback/app/js/first/directives/thumbnailDirective.js +++ b/dan-stineback/app/js/first/directives/thumbnailDirective.js @@ -2,14 +2,12 @@ module.exports = function(app){ app.directive('thumbnailDisplay', function(){ return{ - restrict: 'E', - template: '{{title}}', + restrict: 'AEC', + templateUrl: './templates/firstApp/thumbnail.html', scope: { url: '@', height: '@', - width: '@', - alt: '@title', - description: '@' + width: '@' } }; }); diff --git a/dan-stineback/app/templates/firstApp/image.html b/dan-stineback/app/templates/firstApp/image.html new file mode 100644 index 0000000..d993255 --- /dev/null +++ b/dan-stineback/app/templates/firstApp/image.html @@ -0,0 +1,5 @@ +
+
+ Title: {{title}}
+ description: {{big}} +
diff --git a/dan-stineback/app/templates/firstApp/thumbnail.html b/dan-stineback/app/templates/firstApp/thumbnail.html new file mode 100644 index 0000000..c9803fb --- /dev/null +++ b/dan-stineback/app/templates/firstApp/thumbnail.html @@ -0,0 +1,3 @@ +
+ +
diff --git a/dan-stineback/gulpfile.js b/dan-stineback/gulpfile.js index fd391c8..9fb5705 100644 --- a/dan-stineback/gulpfile.js +++ b/dan-stineback/gulpfile.js @@ -6,8 +6,8 @@ const clean = require('gulp-clean'); const paths = { js: __dirname + '/app/**/*.js', - html: __dirname + '/app/**/*.html', - css: __dirname + '/app/**/*.css' + html: __dirname + '/app/**/*.html' + // css: __dirname + '/app/**/*.css' }; gulp.task('clean', ()=>{ @@ -20,10 +20,10 @@ gulp.task('copy-html', ['clean'], ()=>{ .pipe(gulp.dest('./build')); }); -gulp.task('copy-css', ['clean'], ()=>{ - return gulp.src(paths.css) - .pipe(gulp.dest('./build')); -}); +// gulp.task('copy-css', ['clean'], ()=>{ +// return gulp.src(paths.css) +// .pipe(gulp.dest('./build')); +// }); gulp.task('bundle', ['clean'], ()=>{ return gulp.src(paths.js)