Creating Modules

app/views/includes/foot.jade

@@ -1,22 +1,29 @@
 script(type='text/javascript', src='lib/jquery/jquery.min.js')
 
+//AngularJS
 script(type='text/javascript', src='lib/angular/angular.min.js')
 script(type='text/javascript', src='lib/angular-cookies/angular-cookies.min.js')
 script(type='text/javascript', src='lib/angular-resource/angular-resource.min.js')
+
+//Angular UI
 script(type='text/javascript', src='lib/angular-bootstrap/ui-bootstrap-tpls.min.js')
+script(type='text/javascript', src='lib/angular-ui-utils/modules/route/route.js')
 
+//Application Init
 script(type='text/javascript', src='js/app.js')
 script(type='text/javascript', src='js/config.js')
 script(type='text/javascript', src='js/directives.js')
 script(type='text/javascript', src='js/filters.js')
 
+//Application Services
 script(type='text/javascript', src='js/services/global.js')
 script(type='text/javascript', src='js/services/articles.js')
 
+//Application Controllers
 script(type='text/javascript', src='js/controllers/articles.js')
 script(type='text/javascript', src='js/controllers/index.js')
 script(type='text/javascript', src='js/controllers/header.js')	
 script(type='text/javascript', src='js/init.js')
 
-//livereload script rendered 
+//Livereload script rendered 
 script(type='text/javascript', src='http://localhost:35729/livereload.js')	

bower.json

@@ -7,6 +7,7 @@
 		"angular-resource": "~1.0.6",
 		"angular-cookies": "~1.0.6",
 		"angular-bootstrap": "~0.4.0",
+		"angular-ui-utils": "0.0.4",
 		"json3": "~3.2.4",
 		"jquery": "~1.9.1"
 	},

public/js/app.js

@@ -1 +1,4 @@
-window.app = angular.module('MEAN', ['ngCookies', 'ngResource', 'ui.bootstrap']);
+window.app = angular.module('mean', ['ngCookies', 'ngResource', 'ui.bootstrap', 'ui.route', 'mean.system', 'mean.articles']);
+
+angular.module('mean.system', []);
+angular.module('mean.articles', []);

public/js/controllers/articles.js

@@ -1,4 +1,4 @@
-function ArticlesController($scope, $routeParams, $location, Global, Articles) {
+angular.module('mean.articles').controller('ArticlesController', ['$scope', '$routeParams', '$location', 'Global', 'Articles', function ($scope, $routeParams, $location, Global, Articles) {
     $scope.global = Global;
 
     $scope.create = function() {
@@ -15,7 +15,7 @@ function ArticlesController($scope, $routeParams, $location, Global, Articles) {
     };
 
     $scope.remove = function(article) {
-        article.$remove();
+        article.$remove();  
 
         for (var i in $scope.articles) {
             if ($scope.articles[i] == article) {
@@ -49,4 +49,4 @@ function ArticlesController($scope, $routeParams, $location, Global, Articles) {
             $scope.article = article;
         });
     };
-}
+}]);

public/js/controllers/header.js

@@ -1,20 +1,11 @@
-function HeaderController($scope, $location, Global) {
+angular.module('mean.system').controller('HeaderController', ['$scope', 'Global', function ($scope, Global) {
     $scope.global = Global;
+
     $scope.menu = [{
         "title": "Articles",
         "link": "articles"
     }, {
         "title": "Create New Article",
         "link": "articles/create"
     }];
-
-    $scope.init = function() {
-
-    };
-
-    $scope.isSelected = function(item) {        
-        if ($location.path() == "/"+item.link) {
-            return "active"
-        } else return ""
-    }
-}
+}]);

public/js/controllers/index.js

@@ -1,3 +1,3 @@
-function IndexController($scope){
-	
-}
+angular.module('mean.system').controller('IndexController', ['$scope', 'Global', function ($scope, Global) {
+    $scope.global = Global;
+}]);

public/js/init.js

@@ -1,5 +1,5 @@
 window.bootstrap = function() {
-    angular.bootstrap(document, ['MEAN']);
+    angular.bootstrap(document, ['mean']);
 }
 
 window.init = function() {

public/js/services/articles.js

@@ -1,5 +1,5 @@
 //Articles service used for articles REST endpoint
-window.app.factory("Articles", function($resource) {
+angular.module('mean.articles').factory("Articles", function($resource) {
     return $resource('articles/:articleId', {
         articleId: '@_id'
     }, {

public/js/services/global.js

@@ -1,4 +1,4 @@
-window.app.factory("Global", function() {
+angular.module('mean.system').factory("Global", function() {
     var _this = this;
     _this._data = {
         user: window.user,

public/views/header.html

@@ -1,21 +1,28 @@
-<div class="navbar-inner" data-ng-controller="HeaderController" data-ng-init="init()">
-	<ul class="nav">
-		<li><a class="brand" href="/">MEAN - A Modern Stack</a></li>
-		<li data-ng-repeat="item in menu" data-ng-show="global.user" data-ng-class="isSelected(item)"><a href="#!/{{item.link}}">{{item.title}}</a></li>
-	</ul>
-	<ul class="nav pull-right" data-ng-hide="global.authenticated">
-		<li><a href="signup">Signup</a></li>
-		<li class="divider-vertical"></li>
-		<li><a href="signin">Signin</a></li>
-	</ul>
-	<ul class="nav pull-right" data-ng-show="global.authenticated">
-		<li class="dropdown">
-			<a href="#" class="dropdown-toggle" data-toggle="dropdown">
+<div class="navbar-inner" data-ng-controller="HeaderController">
+    <ul class="nav">
+        <li>
+            <a class="brand" href="/">MEAN - A Modern Stack</a>
+        </li>
+        <li data-ng-repeat="item in menu" data-ng-show="global.user" ui-route="/{{item.link}}" ng-class="{active: $uiRoute}">
+            <a href="#!/{{item.link}}">{{item.title}}</a>
+        </li>
+    </ul>
+    <ul class="nav pull-right" data-ng-hide="global.authenticated">
+        <li><a href="signup">Signup</a>
+        </li>
+        <li class="divider-vertical"></li>
+        <li><a href="signin">Signin</a>
+        </li>
+    </ul>
+    <ul class="nav pull-right" data-ng-show="global.authenticated">
+        <li class="dropdown">
+            <a href="#" class="dropdown-toggle" data-toggle="dropdown">
 				{{global.user.name}} <b class="caret"></b>
 			</a>
-			<ul class="dropdown-menu">
-				<li ><a href="/signout">Signout</a></li>
-			</ul>
-		</li>
-	</ul>
+            <ul class="dropdown-menu">
+                <li><a href="/signout">Signout</a>
+                </li>
+            </ul>
+        </li>
+    </ul>
 </div>