Single page app

.gitignore

@@ -1,4 +1,5 @@
 bower_components/
 node_modules/
 docs/
-.sass-cache/
+.sass-cache/
+bin/

GruntFile.js

@@ -6,16 +6,17 @@ module.exports = function (grunt)
 			options: {
 				separator: "\n\n"
 			},
-			dist: {
+			dev: {
 				src: ['src/resources/js/**/*.js'],
 				dest: 'src/<%= pkg.name %>.js'
 			},
 			deps: {
 				src: [
 					'bower_components/modernizr/modernizr.js',
-					'bower_components/jquery/dist/jquery.js',
-					'bower_components/bootstrap/dist/js/bootstrap.js',
+					'bower_components/jquery/dist/jquery.min.js',
+					'bower_components/bootstrap/dist/js/bootstrap.min.js',
 					'bower_components/angularjs/angular.min.js',
+					'bower_components/angular-route/angular-route.min.js'
 				],
 				dest: 'src/<%= pkg.name %>-deps.js'
 			},
@@ -25,9 +26,35 @@ module.exports = function (grunt)
 				],
 				dest: 'src/resources/css/<%= pkg.name %>.css'
 			},
-			move: {
+			dist: {
+				files: {
+					'bin/<%= pkg.name %>.min.js': ['src/<%= pkg.name %>.min.js'],
+					'bin/<%= pkg.name %>-deps.js': ['src/<%= pkg.name %>-deps.js']
+				}
+			},
+			moveMap: {
 				src: ['bower_components/angularjs/angular.min.js.map'],
 				dest: 'src/angular.min.js.map'
+			},
+			moveRoute: {
+				src: ['bower_components/angular-route/angular-route.min.js.map'],
+				dest: 'src/angular-route.min.js.map'
+			}
+		},
+
+		ngAnnotate: {
+			options: {
+				singleQuotes: true
+			},
+			dist: {
+				files: [
+					{
+						expand: true,
+						src: 'src/<%= pkg.name %>.js',
+						ext: '.annotated.js',
+						extDot: 'last'
+					}
+				]
 			}
 		},
 
@@ -36,6 +63,33 @@ module.exports = function (grunt)
 				files: {
 					'src/resources/css/styles.css': 'src/resources/css/styles.scss'
 				}
+			},
+			dist: {
+				options: {
+					style: 'compressed',
+					noCache: true,
+					banner: '/*! <%= pkg.name %> - v<%= pkg.version %> - ' +
+					'<%= grunt.template.today("mm-dd-yyyy") %> */'
+				},
+				files: [{
+					expand: true,
+					src: '*/resources/css/styles.scss',
+					dest: 'bin/',
+					ext: '.css'
+				}]
+			}
+		},
+
+		uglify: {
+			options: {
+				mangle: false,
+				banner: '/*! <%= pkg.name %> - v<%= pkg.version %> - ' +
+				'<%= grunt.template.today("mm-dd-yyyy") %> */'
+			},
+			distJS: {
+				files: {
+					'src/<%= pkg.name %>.min.js': ['src/<%= pkg.name %>.js']
+				}
 			}
 		},
 
@@ -46,7 +100,7 @@ module.exports = function (grunt)
 			},
 			styles: {
 				files: ['src/resources/css/*.scss'],
-				tasks: ['sass']
+				tasks: ['sass:dev', 'concat:css']
 			}
 		}
 	});
@@ -57,13 +111,14 @@ module.exports = function (grunt)
 	grunt.loadNpmTasks('grunt-contrib-sass');
 	grunt.loadNpmTasks('grunt-contrib-uglify');
 	grunt.loadNpmTasks('grunt-contrib-watch');
+	grunt.loadNpmTasks('grunt-ng-annotate');
 	grunt.loadNpmTasks('grunt-ngdocs');
 
 	//tasks
 	grunt.registerTask('default', 'Default Task Alias', ['build']);
 
 	grunt.registerTask('build', 'Build the application', 
 		['sass:dev',
-		'concat'
+		'concat:dist', 'ngAnnotate:dist', 'concat:css', 'concat:moveMap', 'concat:moveRoute'
 		]);
 }

README.md

@@ -1,6 +1,6 @@
 # Accio Code Tutorials: AngularJS#
 
-***Updated: 12-6-14***
+***Updated: 2-10-16***
 
 This tutorial series for [AccioCode](https://www.youtube.com/user/CDPAdvertising "Accio Code on YouTube") will show how to use the basics of AngularJS. You will learn how to make a simple web page and a simple web application.
 
@@ -10,16 +10,17 @@ AngularJS is an open-source framework in JavaScript. It was created and maintain
 It is an MVC (Model-View-Controller) framework so a brief understanding of MVC is suggested, but not required, to use this tutorial.
 
 ## Course Videos ##
-1. [Setting up AngularJS Workspace](https://www.youtube.com/watch?v=ofASsumsf7E "Setting up AngularJS Workspace on YouTube")
-2. [Simple Data Binding with AngularJS](https://www.youtube.com/watch?v=ia_vAGm_PCQ "Simple Data Binding with AngularJS")
-3. [An Introduction to Controllers](https://www.youtube.com/watch?v=IGy2c-XwXgI "An Introduction to Controllers")
-4. [Writing Our First Directive](http://youtu.be/QwaVgz-GSXY "Writing our First Directive")
-5. [Scope, Element and Attributes](http://youtu.be/utKtjxLako4 "Scope, Element and Attributes")
-6. [Directive Element Binding](http://youtu.be/7vgvBffpSbs "Directive Element Binding")
-7. [Directive to Directive Communication](http://youtu.be/aG8VD0KvUw4 "Directive to Directive Communication")
-8. [Directive Restrictions Explained](http://youtu.be/mkEJDWneiPg "Directive Restrictions Explained")
-9. [Isolate Scope Part 1](https://www.youtube.com/watch?v=-a4E2eRHHVY "Isolate Scope Part 1")
-10. [Isolate Scope Part 2](http://youtu.be/UMoDVY8HAVk "Isolate Scope Part 2")
-11. [Services and JSON](http://youtu.be/rHmk0UhJSb4 "Services and JSON")
-12. [Ng-Repeat](http://youtu.be/CqaoKt1Gvyk "Ng-Repeat")
-13. [Filters and Sorting](http://youtu.be/7nOcg6SPspI "Filters and Sorting")
+1. [Starting The Single Page Website](https://www.youtube.com/watch?v=V6unYD1QrAs "Starting the Single Page Website")
+2. [Setting Up Gulp](https://www.youtube.com/watch?v=FhLpL24xGXU "Setting Up Gulp")
+3. [Single Page AngularJS Navigation](https://www.youtube.com/watch?v=IuBIk1oJ-Uw "Single Page AngularJS Navigation")
+4. [Making the Home Page](https://www.youtube.com/watch?v=xlmx19wo9Dc "Making the Home Page")
+5. [Adding Content to the Home Page](http://youtu.be/0Gzuaoo4j3s "Adding Content to the Home Page")
+6. [Making Our Marvel Phases Sub-Menu](http://youtu.be/3x90mxH5wVg "Making Our Marvel Phases Sub-Menu")
+7. [Parsing Upcoming Movies By Date](http://youtu.be/tS-XbfD1iVE "Parsing Upcoming Movies By Date")
+8. [Gulp Watch for Sass Files](https://www.youtube.com/watch?v=o8-MWsWKonI "Gulp Watch for Sass Files")
+9. [Date and Currency Formatting](https://www.youtube.com/watch?v=9AYXMQqJ_6g "Date and Currency Formatting")
+10. [Using Compile to Change Content](https://www.youtube.com/watch?v=Ob9E1-TFUBs "Using Compile to Change Content")
+11. [Starting Our Webpage Contact Form](http://youtu.be/L34s4xwBvwE "Starting Our Webpage Contact Form")
+12. [Styling Our Contact Form](https://www.youtube.com/watch?v=INuhVedMnso "Styling Our Contact Form")
+13. [Contact Form Controller](https://www.youtube.com/watch?v=_Dw5ngrt_Xg "Contact Form Controller")
+14. [Finishing Our Contact Form](https://www.youtube.com/watch?v=zdOBe4_qbWs "Finishing Our Contact Form")

bower.json

@@ -32,5 +32,9 @@
     "bootstrap": "~3.3.0",
     "modernizr": "~2.8.3",
     "jquery": "~2.1.1"
+  },
+  "devDependencies": {
+    "angular-route": "~1.3.7",
+    "angular-animate": "~1.3.10"
   }
 }

gulpfile.js

@@ -0,0 +1,75 @@
+var gulp 			= require('gulp');
+var clean 			= require('gulp-clean');
+var concat 			= require('gulp-concat');
+var ngdocs 			= require('gulp-ngdocs');
+var sass 			= require('gulp-sass');
+var uglify 			= require('gulp-uglify');
+var runSequence 	= require('run-sequence');
+
+var buildDir 		= 'bin/';
+var depsJS 			= ['bower_components/modernizr/modernizr.js',
+					'bower_components/jquery/dist/jquery.min.js',
+					'bower_components/bootstrap/dist/js/bootstrap.min.js',
+					'bower_components/angularjs/angular.min.js',
+					'bower_components/angular-route/angular-route.min.js'];
+var appJS 			= ['src/resources/js/general/app.js',
+						'src/resources/js/general/modules.js',
+						'src/resources/js/general/configs.js',
+						'src/resources/js/general/maincontent.directive.js',
+						'src/resources/js/general/phases.directive.js',
+						'src/resources/js/home/*.js',
+						'src/resources/js/phases/*.js',
+						'src/resources/js/upcomingfilms/*.js',
+						'src/resources/js/nextfilm/*.js',
+						'src/resources/js/contact/*.js'];
+
+/** tasks **/
+gulp.task('devDeps', function ()
+{
+	var depsjs = gulp.src(depsJS);
+	return depsjs.pipe(concat('mcu_deps.js'))
+		.pipe(gulp.dest('src'));
+});
+
+gulp.task('devJS', function ()
+{
+	var js = gulp.src(appJS);
+	return js.pipe(concat('mcu.js'))
+		.pipe(gulp.dest('src'));
+});
+
+/** sass tasks **/
+gulp.task('sass', function ()
+{
+	return gulp.src(['src/resources/css/styles.scss'])
+		.pipe(sass().on('error', sass.logError))
+		.pipe(gulp.dest('src/resources/css'));
+});
+
+gulp.task('devCSS', function ()
+{
+	return gulp.src(['bower_components/bootstrap/dist/css/bootstrap.min.css',
+		'src/resources/css/styles.css'])
+		.pipe(concat('mcu.css'))
+		.pipe(gulp.dest('src/resources/css/'));
+});
+
+gulp.task('buildStyles', function (callback)
+{
+	runSequence('sass', 'devCSS', callback);
+});
+
+/** initialize **/
+gulp.task('default', function (callback)
+{
+	runSequence('devDeps', 'devJS', callback);
+});
+
+
+
+/** watch **/
+gulp.task('watch', function ()
+{
+	gulp.watch('src/resources/**/*.js', ['devJS']);
+	gulp.watch('src/resources/**/*.scss', ['buildStyles']);
+});

package.json

@@ -8,12 +8,20 @@
     "grunt-cli": "~0.1.13"
   },
   "devDependencies": {
-    "grunt-contrib-uglify": "~0.6.0",
     "grunt-contrib-concat": "~0.5.0",
-    "grunt-contrib-sass": "~0.8.1",
     "grunt-contrib-copy": "~0.7.0",
+    "grunt-contrib-sass": "~0.8.1",
+    "grunt-contrib-uglify": "~0.6.0",
     "grunt-contrib-watch": "~0.6.1",
-    "grunt-ngdocs": "~0.2.6"
+    "grunt-ng-annotate": "~0.8.0",
+    "grunt-ngdocs": "~0.2.6",
+    "gulp": "3.9.0",
+    "gulp-clean": "^0.3.1",
+    "gulp-concat": "^2.6.0",
+    "gulp-ngdocs": "~0.2.10",
+    "gulp-sass": "^2.1.1",
+    "gulp-uglify": "^1.5.1",
+    "run-sequence": "^1.1.5"
   },
   "scripts": {
     "test": "echo \"Error: no test specified\" && exit 1"