init

.gitignore

@@ -0,0 +1,6 @@
+.git
+node_modules
+.settings
+*.log
+client/app/bundle.js
+client/app/bundle.js.map

Gulpfile.js

@@ -0,0 +1,94 @@
+var gulp	 		= require('gulp'),
+		webpack		= require('gulp-webpack'),
+		path			= require('path'),
+		sync			= require('run-sequence'),
+		serve			= require('browser-sync'),
+		rename		= require('gulp-rename'),
+		template	= require('gulp-template'),
+		fs				= require('fs'),
+		yargs			= require('yargs').argv,
+		lodash 		= require('lodash'),
+		reload		= function () { return serve.reload() };
+
+
+// helper method to resolveToApp paths
+var resolveToApp = function(glob){
+	glob = glob || '';
+	return path.join(root, 'app', glob); // app/{glob}
+};
+
+var resolveToComponents = function(glob){
+	glob = glob || '';
+	return path.join(root, 'app/components', glob); // app/components/{glob}
+};
+
+var root = 'client';
+
+// map of all our paths
+var paths = {
+	js: resolveToApp('components/**/*!(.spec.js).js'), // don't include spec files
+	styl: resolveToApp('**/*.styl'), // our stylus files
+	html: [
+		resolveToApp('components/**/*.html'),
+		path.join(root, 'index.html')
+	],
+
+	entry: path.join(root, 'app/app.js'),
+	output: root,
+	blankTemplates: path.join(__dirname, 'generator', 'component/**/*.**')
+};
+
+// use our webpack.config.js to 
+// build our modules
+gulp.task('webpack', function(){
+	return gulp.src(paths.entry)
+		.pipe(webpack(require('./webpack.config')))
+		.pipe(gulp.dest(paths.output));
+});
+
+gulp.task('serve', function(){
+	serve({
+		port: process.env.PORT || 3000,
+		open: false,
+		server: {
+			baseDir: root
+		}
+	});
+});
+
+
+gulp.task('watch', function(){
+	var allPaths = [].concat(
+		paths.js,
+		paths.html,
+		paths.styl
+	);
+
+
+	gulp.watch(allPaths, ['webpack', reload]);
+});
+
+gulp.task('component', function(){
+	var cap = function(val){
+		return val.charAt(0).toUpperCase() + val.slice(1);
+	};
+
+	var name = yargs.name;
+	var parentPath = yargs.parent || '';
+	var destPath = path.join(resolveToComponents(), parentPath, name);
+
+	return gulp.src(paths.blankTemplates)
+		.pipe(template({
+			name: name,
+			upCaseName: cap(name)
+		}))
+		.pipe(rename(function(path){
+			path.basename = path.basename.replace('temp', name);
+		}))
+		.pipe(gulp.dest(destPath));
+});
+
+
+gulp.task('default', function(done){
+	sync('webpack', 'serve', 'watch', done);
+});

client/app/app.component.js

@@ -0,0 +1,11 @@
+import template from './app.html';
+import './app.styl';
+
+let appComonent = ()=>{
+	return {
+		template, // because we have a variable name template we can use the shorcut here
+		restrict: 'E'
+	};
+};
+
+export default appComonent;

client/app/app.html

@@ -0,0 +1,2 @@
+<!--Anything you want to be on every page, place it in this file-->
+<div ui-view></div>

client/app/app.js

@@ -0,0 +1,12 @@
+import angular from 'angular';
+import uiRouter from 'angular-ui-router';
+import Common from './common/common';
+import Components from './components/components';
+import AppComponent from './app.component';
+
+angular.module('app', [
+	uiRouter,
+	Common.name,
+	Components.name
+])
+.directive('app', AppComponent);

client/app/common/common.js

@@ -0,0 +1,12 @@
+import angular from 'angular';
+import Navbar from './navbar/navbar';
+import Hero from './hero/hero';
+import User from './user/user';
+
+let commonModule = angular.module('app.common', [
+	Navbar.name,
+	Hero.name,
+	User.name
+]);
+
+export default commonModule;

client/app/common/common.styl

@@ -0,0 +1,7 @@
+@import 'reset'
+
+primaryColor = red
+accentColor = blue
+
+darkBgColor = lighten(black, 30%)
+lightBgColor = lighten(black, 50%)

client/app/common/hero/hero.component.js

@@ -0,0 +1,16 @@
+import template from './hero.html';
+import controller from './hero.controller';
+import './hero.styl';
+
+let heroComponent = function(){
+	return {
+		template,
+		controller,
+		restrict: 'E',
+		controllerAs: 'vm',
+		scope: {},
+		bindToController: true
+	};
+};
+
+export default heroComponent;

client/app/common/hero/hero.controller.js

@@ -0,0 +1,8 @@
+class HeroController {
+	constructor(){
+		this.name = 'hero';
+	}
+}
+
+
+export default HeroController;

client/app/common/hero/hero.html

@@ -0,0 +1,3 @@
+<div>
+	<h1>{{ vm.name }}</h1>
+</div>

client/app/common/hero/hero.js

@@ -0,0 +1,10 @@
+import angular from 'angular';
+import uiRouter from 'angular-ui-router';
+import heroComponent from './hero.component'; 
+
+let heroModule = angular.module('hero', [
+	uiRouter
+])
+.directive('hero', heroComponent);
+
+export default heroModule;

client/app/common/hero/hero.spec.js

@@ -0,0 +1,67 @@
+import HeroModule from './hero'
+import HeroController from './hero.controller';
+import HeroComponent from './hero.component';
+import HeroTemplate from './hero.html';
+
+describe('Hero', ()=>{
+	let $rootScope,
+	makeController;
+
+	beforeEach(window.module(HeroModule.name));
+	beforeEach(inject((_$rootScope_)=>{
+		$rootScope = _$rootScope_;
+		makeController = ()=>{
+			return new HeroController();
+		};
+	}));
+
+	describe('Module', ()=>{
+		// test things about the component module
+		// checking to see if it registers certain things and what not
+		// test for best practices with naming too
+		// test for routing
+	});
+
+	describe('Controller', ()=>{
+		// test your controller here
+
+		it('should have a name property [REMOVE]', ()=>{ // erase me if you remove this.name from the controller
+			let controller = makeController();
+
+			expect(controller).to.have.property('name'); 
+		});
+	});
+
+	describe('Template', ()=>{
+		// test the template
+		// use Regexes to test that you are using the right bindings {{  }}
+
+		it('should have name in template [REMOVE]', ()=>{
+			expect(HeroTemplate).to.match(/{{\s?vm\.name\s?}}/g);
+		});
+	});
+
+
+	describe('Component', ()=>{
+			// test the component/directive itself
+			let component = HeroComponent();
+
+			it('should use the right template',()=>{
+				expect(component.template).to.equal(HeroTemplate);
+			});
+
+			it('should use controllerAs', ()=>{
+				expect(component).to.have.property('controllerAs');
+			});
+
+			it('should use the right controller', ()=>{
+				expect(component.controller).to.equal(HeroController);
+			});
+	});
+});
+
+
+
+
+
+

client/app/common/hero/hero.styl

@@ -0,0 +1,2 @@
+.hero
+	color red

client/app/common/navbar/navbar.component.js

@@ -0,0 +1,16 @@
+import template from './navbar.html';
+import controller from './navbar.controller';
+import './navbar.styl';
+
+let navbarComponent = function(){
+	return {
+		template,
+		controller,
+		restrict: 'E',
+		controllerAs: 'vm',
+		scope: {},
+		bindToController: true
+	};
+};
+
+export default navbarComponent;

client/app/common/navbar/navbar.controller.js

@@ -0,0 +1,8 @@
+class NavbarController {
+	constructor(){
+		this.name = 'navbar';
+	}
+}
+
+
+export default NavbarController;

client/app/common/navbar/navbar.html

@@ -0,0 +1,3 @@
+<div class="navbar">
+	<h1>{{ vm.name }}</h1>
+</div>

client/app/common/navbar/navbar.js

@@ -0,0 +1,10 @@
+import angular from 'angular';
+import uiRouter from 'angular-ui-router';
+import navbarComponent from './navbar.component'; 
+
+let navbarModule = angular.module('navbar', [
+	uiRouter
+])
+.directive('navbar', navbarComponent);
+
+export default navbarModule;

client/app/common/navbar/navbar.spec.js

@@ -0,0 +1,67 @@
+import NavbarModule from './navbar'
+import NavbarController from './navbar.controller';
+import NavbarComponent from './navbar.component';
+import NavbarTemplate from './navbar.html';
+
+describe('Navbar', ()=>{
+	let $rootScope,
+	makeController;
+
+	beforeEach(window.module(NavbarModule.name));
+	beforeEach(inject((_$rootScope_)=>{
+		$rootScope = _$rootScope_;
+		makeController = ()=>{
+			return new NavbarController();
+		};
+	}));
+
+	describe('Module', ()=>{
+		// test things about the component module
+		// checking to see if it registers certain things and what not
+		// test for best practices with naming too
+		// test for routing
+	});
+
+	describe('Controller', ()=>{
+		// test your controller here
+
+		it('should have a name property [REMOVE]', ()=>{ // erase me if you remove this.name from the controller
+			let controller = makeController();
+
+			expect(controller).to.have.property('name'); 
+		});
+	});
+
+	describe('Template', ()=>{
+		// test the template
+		// use Regexes to test that you are using the right bindings {{  }}
+
+		it('should have name in template [REMOVE]', ()=>{
+			expect(NavbarTemplate).to.match(/{{\s?vm\.name\s?}}/g);
+		});
+	});
+
+
+	describe('Component', ()=>{
+			// test the component/directive itself
+			let component = NavbarComponent();
+
+			it('should use the right template',()=>{
+				expect(component.template).to.equal(NavbarTemplate);
+			});
+
+			it('should use controllerAs', ()=>{
+				expect(component).to.have.property('controllerAs');
+			});
+
+			it('should use the right controller', ()=>{
+				expect(component.controller).to.equal(NavbarController);
+			});
+	});
+});
+
+
+
+
+
+

client/app/common/navbar/navbar.styl

@@ -0,0 +1,10 @@
+@import '../common'
+
+.navbar
+[navbar]
+	height 65px
+	background-color primaryColor
+	padding 10px
+
+
+