scotch-io · wwsun · Mar 8, 2015 · Mar 8, 2015 · Mar 16, 2015 · Mar 16, 2015
diff --git a/.gitignore b/.gitignore
@@ -1,3 +1,6 @@
+# Webstorm IDE
+.idea/
+
 lib-cov
 *.seed
 *.log

diff --git a/Gruntfile.js b/Gruntfile.js
@@ -0,0 +1,62 @@
+module.exports = function(grunt) {
+
+    // ------------------
+    // CONFIGURE GRUNT
+
+    grunt.initConfig({
+
+        // jshint: check all js files for errors
+        jshint: {
+            all: ['public/js/**/*.js']
+        },
+
+        // todo: uglify
+
+        // todo: cssmin
+
+        // watch: watch css and js files and process the above tasks
+        watch: {
+            css: {
+                files: ['public/css/**/*.css'],
+                tasks: []
+            },
+
+            js: {
+                files: ['public/js/**/*.js'],
+                tasks: ['jshint']
+            }
+        },
+
+        // watch our node server for changes
+        nodemon: {
+            dev: {
+                script: 'server.js'
+            }
+        },
+
+        // run watch and nodemon at the same time
+        concurrent: {
+            options: {
+                logConcurrentOutput: true
+            },
+            tasks: ['nodemon', 'watch']
+        }
+    });
+
+    // ------------------
+    // LOAD GRUNT PLUGINS
+
+    grunt.loadNpmTasks('grunt-contrib-jshint');
+    grunt.loadNpmTasks('grunt-contrib-uglify');
+    grunt.loadNpmTasks('grunt-contrib-cssmin');
+    grunt.loadNpmTasks('grunt-contrib-watch');
+    grunt.loadNpmTasks('grunt-nodemon');
+    grunt.loadNpmTasks('grunt-concurrent');
+
+
+    // ------------------
+    // CREATE TASKS
+
+    // register the nodemon task when we runt grunt
+    grunt.registerTask('default', ['jshint', 'concurrent']);
+};
diff --git a/README.md b/README.md
@@ -6,15 +6,16 @@ This is a repo for a starter appliation for a Single Page MEAN Stack application
 1. Download the repository
 2. Install npm modules: `npm install`
 3. Install bower dependencies `bower install`
-4. Start up the server: `node server.js`
+4. Start up the server: `node server.js` or `grunt`
 5. View in browser at http://localhost:8080
 
 Use this starter kit to build any MEAN stack application you like.
 
-If you have any questions or requests, email us at [[email protected]](mailto:[email protected]) and we'll keep updating this to make it perfect.
-
 ## Future Additions
 - CRUD examples
 - Development and Production Environments
 - Link examples
 - Single Page AngularJS Animations
+- Using [Angular-ui-router](https://github.com/angular-ui/ui-router) as the routing system
+- Using ControllerAs syntax
+- [Using Grunt to automate your development](https://scotch.io/tutorials/using-gruntjs-in-a-mean-stack-application)
diff --git a/bower.json b/bower.json
@@ -4,6 +4,6 @@
 	"dependencies": {
 		"bootstrap": "latest",
 		"angular": "latest",
-		"angular-route": "latest"	
+		"angular-ui-router": "latest"
 	}
 }
diff --git a/package.json b/package.json
@@ -2,10 +2,18 @@
   "name": "starter-node-angular",
   "main": "server.js",
   "dependencies": {
-    "express" : "~4.5.1",
-	"mongoose" : "~3.8.0",
-	"body-parser" : "~1.4.2",
-	"method-override" : "~2.0.2"
+    "express": "~4.5.1",
+    "mongoose": "~3.8.0",
+    "body-parser": "~1.4.2",
+    "method-override": "~2.0.2"
+  },
+  "devDependencies": {
+    "grunt": "^0.4.5",
+    "grunt-concurrent": "^1.0.0",
+    "grunt-contrib-cssmin": "^0.12.2",
+    "grunt-contrib-jshint": "^0.11.0",
+    "grunt-contrib-uglify": "^0.8.0",
+    "grunt-contrib-watch": "^0.6.1",
+    "grunt-nodemon": "^0.4.0"
   }
 }
-
diff --git a/public/index.html b/public/index.html
@@ -12,7 +12,7 @@
 
 	<!-- JS -->
 	<script src="libs/angular/angular.min.js"></script>
-	<script src="libs/angular-route/angular-route.min.js"></script>
+	<script src="libs/angular-ui-router/release/angular-ui-router.min.js"></script>
 
 	<!-- ANGULAR CUSTOM -->
 	<script src="js/controllers/MainCtrl.js"></script>
@@ -23,7 +23,7 @@
 	<script src="js/appRoutes.js"></script>
 	<script src="js/app.js"></script>
 </head>
-<body ng-app="sampleApp" ng-controller="NerdController">
+<body ng-app="sampleApp">
 <div class="container">
 
 	<!-- HEADER -->
@@ -32,13 +32,14 @@
 			<a class="navbar-brand" href="/">Stencil: Node and Angular</a>
 		</div>
 		<ul class="nav navbar-nav">
-			<li><a href="/nerds">Nerds</a></li>
-			<li><a href="/geeks">Geeks</a></li>
+            <li><a ui-sref="home">Home</a></li>
+			<li><a ui-sref="nerds">Nerds</a></li>
+			<li><a ui-sref="geeks">Geeks</a></li>
 		</ul>
 	</nav>
 
 	<!-- ANGULAR DYNAMIC CONTENT -->
-	<div ng-view></div>
+	<div ui-view></div>
 
 </div>
 </body>

diff --git a/public/js/app.js b/public/js/app.js
diff --git a/public/js/appRoutes.js b/public/js/appRoutes.js
@@ -1,23 +1,23 @@
-angular.module('appRoutes', []).config(['$routeProvider', '$locationProvider', function($routeProvider, $locationProvider) {
+angular.module('appRoutes', []).config(function($stateProvider, $urlRouterProvider) {
 
-	$routeProvider
+    $urlRouterProvider.otherwise('/');
 
-		// home page
-		.when('/', {
-			templateUrl: 'views/home.html',
-			controller: 'MainController'
-		})
+    $stateProvider
+        .state('home', {
+            url: '/',
+            templateUrl: 'views/home.html',
+            controller: 'MainController as mainCtrl'
+        })
 
-		.when('/nerds', {
-			templateUrl: 'views/nerd.html',
-			controller: 'NerdController'
-		})
+        .state('nerds', {
+            url: '/nerds',
+            templateUrl: 'views/nerd.html',
+            controller: 'NerdController as nerdCtrl'
+        })
 
-		.when('/geeks', {
-			templateUrl: 'views/geek.html',
-			controller: 'GeekController'	
-		});
-
-	$locationProvider.html5Mode(true);
-
-}]);
+        .state('geeks', {
+            url: '/geeks',
+            templateUrl: 'views/geek.html',
+            controller: 'GeekController as geekCtrl'
+        });
+});
diff --git a/public/js/controllers/GeekCtrl.js b/public/js/controllers/GeekCtrl.js
@@ -1,5 +1,6 @@
-angular.module('GeekCtrl', []).controller('GeekController', function($scope) {
+angular.module('GeekCtrl', []).controller('GeekController', function() {
 
-	$scope.tagline = 'The square root of life is pi!';	
+    var vm = this;
+    vm.tagline = 'The square root of life is pi!';
 
 });
diff --git a/public/js/controllers/MainCtrl.js b/public/js/controllers/MainCtrl.js
@@ -1,5 +1,6 @@
-angular.module('MainCtrl', []).controller('MainController', function($scope) {
+angular.module('MainCtrl', []).controller('MainController', function() {
 
-	$scope.tagline = 'To the moon and back!';	
+    var vm = this;
+    vm.tagline = 'To the moon and back!';
 
 });
diff --git a/public/js/controllers/NerdCtrl.js b/public/js/controllers/NerdCtrl.js
@@ -1,5 +1,6 @@
-angular.module('NerdCtrl', []).controller('NerdController', function($scope) {
+angular.module('NerdCtrl', []).controller('NerdController', function() {
 
-	$scope.tagline = 'Nothing beats a pocket protector!';
+    var vm = this;
+    vm.tagline = 'Nothing beats a pocket protector!';
 
 });
diff --git a/public/views/geek.html b/public/views/geek.html
@@ -1,5 +1,5 @@
 <div class="jumbotron text-center">
 	<h1>Geek City</h1>
 
-	<p>{{ tagline }}</p>
+	<p>{{ geekCtrl.tagline }}</p>
 </div>
diff --git a/public/views/home.html b/public/views/home.html
@@ -1,5 +1,5 @@
 <div class="jumbotron text-center">
 	<h1>Home Page 4 Life</h1>
 
-	<p>{{ tagline }}</p>
+	<p>{{ mainCtrl.tagline }}</p>
 </div>
diff --git a/public/views/nerd.html b/public/views/nerd.html
@@ -1,5 +1,5 @@
 <div class="jumbotron text-center">
 	<h1>Nerds and Proud</h1>
 
-	<p>{{ tagline }}</p>
+	<p>{{ nerdCtrl.tagline }}</p>
 </div>
-Original file line number
+Diff line change
@@ -1,3 +1,6 @@
+    # Webstorm IDE
+    .idea/
     lib-cov
     *.seed
     *.log
@@ Expand Down @@