Modified angular template to better work with ABP's latest version.

Author: hikalkan

SimpleTaskSystem/SimpleTaskSystem.Core/SimpleTaskSystem.Core.csproj

@@ -67,6 +67,7 @@
     <Reference Include="System.Xml" />
   </ItemGroup>
   <ItemGroup>
+    <Compile Include="SimpleTaskSystemConsts.cs" />
     <Compile Include="People\IPersonRepository.cs" />
     <Compile Include="People\Person.cs" />
     <Compile Include="SimpleTaskSystemCoreModule.cs" />

SimpleTaskSystem/SimpleTaskSystem.Core/SimpleTaskSystemConsts.cs

@@ -0,0 +1,7 @@
+namespace SimpleTaskSystem
+{
+    public class SimpleTaskSystemConsts
+    {
+        public const string LocalizationSourceName = "SimpleTaskSystem";
+    }
+}

SimpleTaskSystem/SimpleTaskSystem.WebSpaAngular/App/Common/styles/main.css

@@ -1,59 +1,33 @@
 (function () {
     'use strict';
 
-    var localize = abp.localization.getSource('SimpleTaskSystem');
-
     var app = angular.module('app', [
         'ngAnimate',
-        'ngRoute',
         'ngSanitize',
 
+        'ui.router',
         'ui.bootstrap',
         'ui.jq',
 
         'abp'
     ]);
 
-    app.constant('routes', [
-        {
-            url: '/',
-            config: {
-                templateUrl: '/App/Main/views/task/list.cshtml',
-                menuText: localize('TaskList'),
-                menuItem: 'TaskList'
-            }
-        },
-        {
-            url: '/new',
-            config: {
-                templateUrl: '/App/Main/views/task/new.cshtml',
-                menuText: localize('NewTask'),
-                menuItem: 'NewTask'
-            }
-        }
-    ]);
-
+    //Configuration for Angular UI routing.
     app.config([
-        '$routeProvider', 'routes',
-        function ($routeProvider, routes) {
-            routes.forEach(function (route) {
-                $routeProvider.when(route.url, route.config);
-            });
-
-            $routeProvider.otherwise({
-                redirectTo: '/'
-            });
-        }
-    ]);
-
-    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'.
-                }
-            });
+        '$stateProvider', '$urlRouterProvider',
+        function ($stateProvider, $urlRouterProvider) {
+            $urlRouterProvider.otherwise('/');
+            $stateProvider
+                .state('tasklist', {
+                    url: '/',
+                    templateUrl: '/App/Main/views/task/list.cshtml',
+                    menu: 'TaskList' //Matches to name of 'TaskList' menu in SimpleTaskSystemNavigationProvider
+                })
+                .state('newtask', {
+                    url: '/new',
+                    templateUrl: '/App/Main/views/task/new.cshtml',
+                    menu: 'NewTask' //Matches to name of 'NewTask' menu in SimpleTaskSystemNavigationProvider
+                });
         }
     ]);
 })();

SimpleTaskSystem/SimpleTaskSystem.WebSpaAngular/App/Common/styles/main.less

@@ -20,10 +20,13 @@ body {
 .task-state-icon {
   cursor: pointer;
 }
-/* Angular transition animations */
+/* Styles for angular ui transition animations */
+.angular-animation-container {
+  position: relative;
+}
 .shuffle-animation.ng-enter,
 .shuffle-animation.ng-leave {
-  position: relative;
+  position: absolute;
 }
 .shuffle-animation.ng-enter {
   -moz-transition: ease-out all 0.3s 0.4s;

SimpleTaskSystem/SimpleTaskSystem.WebSpaAngular/App/Common/styles/main.min.css

@@ -27,11 +27,15 @@ body {
     cursor: pointer;
 }
 
-/* Angular transition animations */
+/* Styles for angular ui transition animations */
+
+.angular-animation-container {
+    position: relative;
+}
 
 .shuffle-animation.ng-enter,
 .shuffle-animation.ng-leave {
-    position: relative;
+    position: absolute;
 }
 
 .shuffle-animation.ng-enter {
@@ -41,12 +45,12 @@ body {
     transition: ease-out all 0.3s 0.4s;
     left: 2em;
     opacity: 0;
-}
 
-    .shuffle-animation.ng-enter.ng-enter-active {
+    &.ng-enter-active {
         left: 0;
         opacity: 1;
     }
+}
 
 .shuffle-animation.ng-leave {
     -moz-transition: 0.3s ease-out all;
@@ -55,9 +59,9 @@ body {
     transition: 0.3s ease-out all;
     left: 0;
     opacity: 1;
-}
 
-    .shuffle-animation.ng-leave.ng-leave-active {
+    &.ng-leave-active {
         left: 2em;
         opacity: 0;
-    }
+    }
+}