Refactored layout

Author: hikalkan

SimpleTaskSystemSPA_AngularJs_EntityFramework/SimpleTaskSystem.Web/App/Main/app.js

@@ -1,6 +1,8 @@
 (function () {
     'use strict';
 
+    var localize = abp.localization.getSource('SimpleTaskSystem');
+
     var app = angular.module('app', [
         'ngAnimate',
         'ngRoute',
@@ -12,42 +14,46 @@
         'abp'
     ]);
 
-    app.constant('routes', getRoutes());
-
-    function getRoutes() {
-        return [
-            {
-                url: '/', //default: /task/list
-                config: {
-                    templateUrl: '/App/Main/views/task/list.cshtml',
-                    menuItem: 'TaskList'
-                }
-            },
-            {
-                url: '/task/new',
-                config: {
-                    templateUrl: '/App/Main/views/task/new.cshtml',
-                    menuItem: 'NewTask'
-                }
+    app.constant('routes', [
+        {
+            url: '/', //default: /task/list
+            config: {
+                templateUrl: '/App/Main/views/task/list.cshtml',
+                menuText: localize('TaskList'),
+                menuItem: 'TaskList'
             }
-        ];
-    }
-
-    app.config(['$routeProvider', 'routes', routeConfigurator]);
-    function routeConfigurator($routeProvider, routes) {
-
-        routes.forEach(function (r) {
-            $routeProvider.when(r.url, r.config);
-        });
+        },
+        {
+            url: '/about',
+            config: {
+                templateUrl: '/App/Main/views/task/new.cshtml',
+                menuText: localize('NewTask'),
+                menuItem: 'NewTask'
+            }
+        }
+    ]);
 
-        $routeProvider.otherwise({ redirectTo: abp.appPath });
-    }
+    app.config([
+        '$routeProvider', 'routes',
+        function ($routeProvider, routes) {
+            routes.forEach(function (route) {
+                $routeProvider.when(route.url, route.config);
+            });
+
+            $routeProvider.otherwise({
+                redirectTo: '/'
+            });
+        }
+    ]);
 
-    app.run(['$rootScope', '$location', '$routeParams', '$route', function ($rootScope, $location, $routeParams, $route) {
-        $rootScope.$on('$routeChangeSuccess', function (event, next, current) {
-            if (next && next.$$route) {
-                $rootScope.activeMenu = next.$$route.menuItem;
-            }
-        });
-    }]);
+    app.run([
+        '$rootScope',
+        function ($rootScope) {
+            $rootScope.$on('$routeChangeSuccess', function (event, next, current) {
+                if (next && next.$$route) {
+                    $rootScope.activeMenu = next.$$route.menuItem; //Used in layout.cshtml to make selected menu 'active'.
+                }
+            });
+        }
+    ]);
 })();

SimpleTaskSystemSPA_AngularJs_EntityFramework/SimpleTaskSystem.Web/App/Main/views/layout/layout.cshtml

@@ -11,11 +11,8 @@
         </div>
         <div class="collapse navbar-collapse">
             <ul class="nav navbar-nav">
-                <li ng-class="{active: activeMenu == 'TaskList'}">
-                    <a href="#/">@L("TaskList")</a>
-                </li>
-                <li ng-class="{active: activeMenu == 'NewTask'}">
-                    <a href="#/task/new">@L("NewTask")</a>
+                <li ng-class="{active: activeMenu == route.config.menuItem}" ng-repeat="route in vm.routes">
+                    <a ng-href="#{{route.url}}">{{route.config.menuText}}</a>
                 </li>
             </ul>
             <ul class="nav navbar-nav navbar-right">

SimpleTaskSystemSPA_AngularJs_EntityFramework/SimpleTaskSystem.Web/App/Main/views/layout/layout.js

@@ -1,4 +1,5 @@
 (function () {
+    var app = angular.module('app');
 
     var languages = [
         {
@@ -13,11 +14,12 @@
         }
     ];
 
-    var app = angular.module('app');
     var controllerId = 'sts.controllers.views.layout';
-    app.controller(controllerId, ['$scope', function ($scope) {
+    app.controller(controllerId, ['routes', '$scope', function (routes, $scope) {
         var that = this;
-        
+
+        that.routes = routes;
+
         that.getLanguageFlagClass = function () {
             var lang = abp.localization.currentCulture.name;
             for (var i = 0; i < languages.length; i++) {

SimpleTaskSystemSPA_AngularJs_EntityFramework/SimpleTaskSystem.Web/Views/Shared/_Layout.cshtml

@@ -13,7 +13,7 @@
     <link rel="shortcut icon" href="~/favicon.ico">
 
     <!-- Site title -->
-    <title>My ASP.NET Boilerplate Project!</title>
+    <title>Simple Task System!</title>
 
     <!-- Style for jQueryUI -->
     <link href="~/Content/themes/base/minified/jquery-ui.min.css" rel="stylesheet" />
@@ -49,12 +49,6 @@
     <!-- Modernizr: for feature detection (All other scripts are included at the end of file for faster page load) -->
     <script src="~/Scripts/modernizr-2.7.2.js"></script>
 
-</head>
-
-<body>
-
-    @RenderBody()
-
     <!-- jQuery and plugins -->
     <script src="~/Scripts/json2.min.js"></script>
     <script src="~/Scripts/jquery-2.1.1.min.js"></script>
@@ -83,5 +77,11 @@
     <!-- Custom scripts for views -->
     @RenderSection("scripts", required: false)
 
+</head>
+
+<body>
+
+    @RenderBody()
+
 </body>
 </html>