Switch to uirouter.

package.json

@@ -46,11 +46,12 @@
     "@nsalaun/ng-logger": "^2.0.1",
     "@types/angular": "^1.6.25",
     "@types/node": "^8.0.10",
+    "@uirouter/angularjs": "^1.0.5",
+    "@uirouter/core": "^5.0.5",
     "angular": "^1.6",
     "angular-http-auth": "^1.5",
     "angular-messages": "^1.6",
     "angular-resource": "^1.6",
-    "angular-route": "^1.6.5",
     "angular-strap": "^2.3.12",
     "angular-ui-notification": "^0.3",
     "base64util": "^1.0.2",

src/app.config.ts

@@ -4,26 +4,39 @@ var operationsTmpl = require('./operations/operations.html');
 var accountsTmpl = require('./accounts/accounts.html');
 var schedulerTmpl = require('./scheduler/scheduler.html');
 
-export default function AppConfig($routeProvider) {
+export default function AppConfig($uiRouterProvider) {
+    $uiRouterProvider.trace.enable(1);
+
     // Defining template and controller in function of route.
-    $routeProvider
+    const $stateRegistry = $uiRouterProvider.stateRegistry;
-        .when('/account/:accountId/operations', {
+
+    $stateRegistry.register({
+        name: 'operations',
+        url: '/account/:accountId/operations',
         templateUrl: operationsTmpl,
         controller: 'OperationController',
         controllerAs: 'operationsCtrl'
-        })
+    });
-        .when('/account/:accountId/scheduler', {
+
+    $stateRegistry.register({
+        name: 'scheduler',
+        url: '/account/:accountId/scheduler',
         templateUrl: schedulerTmpl,
         controller: 'SchedulerController',
         controllerAs: 'schedulerCtrl'
-        })
+    });
-        .when('/accounts', {
+
+    $stateRegistry.register({
+        name: 'accounts',
+        url: '/accounts',
         templateUrl: accountsTmpl,
         controller: 'AccountController',
         controllerAs: 'accountsCtrl'
-        })
+    });
-        .otherwise({
+
-            redirectTo: '/accounts'
+    const $urlService = $uiRouterProvider.urlService;
+    $urlService.rules.otherwise({
+        state: 'accounts'
     });
 };
 

src/app.ts

@@ -20,7 +20,7 @@
 
 var angular = require('angular');
 
-var ngRoute    = require('angular-route');
+import uiRouter from '@uirouter/angularjs';
 
 import accountModule from '@accountant/accounts';
 import loginModule from '@accountant/login';
@@ -32,7 +32,7 @@ import AppConfig from './app.config.ts';
 require('bootstrap-webpack!./bootstrap.config.ts');
 
 angular.module('accountant', [
-    ngRoute,
+    uiRouter,
     accountModule,
     loginModule,
     operationModule,

src/index.ejs

@@ -39,7 +39,7 @@
     </nav>
 
     <div class="container-fluid">
-      <div ng-view></div>
+      <div ui-view></div>
     </div>
 
     <!-- Custom Javascript libraries -->

src/operations/balance-chart.component.ts

@@ -35,12 +35,12 @@ module.exports = angular.module('balanceChartModule', [
             account: '<',
             onUpdate: '&'
         },
-        controller: function($routeParams, Balances, $element) {
+        controller: function($stateParams, Balances, $element) {
             var vm = this;
 
             vm.loadData = function() {
                 Balances.query({
-                    id: $routeParams.accountId
+                    id: $stateParams.accountId
                 }, function(results) {
                     var headers = [['date', 'balances', 'expenses', 'revenues']];
 

src/operations/category-chart.component.ts

@@ -35,12 +35,12 @@ module.exports = angular.module('categoryChartModule', [
             minDate: '<',
             maxDate: '<'
         },
-        controller: function($routeParams, $element, Categories, Incomes) {
+        controller: function($stateParams, $element, Categories, Incomes) {
             var vm = this;
 
             vm.loadData = function() {
                 Categories.query({
-                    id: $routeParams.accountId,
+                    id: $stateParams.accountId,
                     begin: vm.minDate ? moment(vm.minDate).format('YYYY-MM-DD') : null,
                     end: vm.maxDate ? moment(vm.maxDate).format('YYYY-MM-DD') : null
                 }, function(results) {

src/operations/operation.controller.ts

@@ -1,7 +1,7 @@
 var operationFormTmpl   = require('./operation.form.tmpl.html'),
     operationDeleteTmpl = require('./operation.delete.tmpl.html');
 
-module.exports = function($routeParams, $modal, Notification, Operation,
+module.exports = function($stateParams, $modal, Notification, Operation,
     AccountService) {
 
     var vm = this;
@@ -12,7 +12,7 @@ module.exports = function($routeParams, $modal, Notification, Operation,
     vm.add = function() {
         var operation = new Operation({
             // eslint-disable-next-line camelcase
-            account_id: $routeParams.accountId
+            account_id: $stateParams.accountId
         });
 
         return vm.modify(operation);
@@ -27,7 +27,7 @@ module.exports = function($routeParams, $modal, Notification, Operation,
 
         return Operation.query({
             // eslint-disable-next-line camelcase
-            account_id: $routeParams.accountId,
+            account_id: $stateParams.accountId,
             begin: minDate ? moment(minDate).format('YYYY-MM-DD') : null,
             end: maxDate ? moment(maxDate).format('YYYY-MM-DD') : null
         });
@@ -145,7 +145,7 @@ module.exports = function($routeParams, $modal, Notification, Operation,
         vm.operations = vm.load(minDate, maxDate);
     };
 
-    AccountService.get($routeParams.accountId).subscribe(account => {
+    AccountService.get($stateParams.accountId).subscribe(account => {
         vm.account = account
     });
 };

src/scheduler/schedule.controller.ts

@@ -1,7 +1,7 @@
 var scheduleFormTmpl   = require('./schedule.form.tmpl.html'),
     scheduleDeleteTmpl = require('./schedule.delete.tmpl.html');
 
-module.exports= function($rootScope, $routeParams, Notification, ScheduledOperation, $log, $modal) {
+module.exports= function($rootScope, $stateParams, Notification, ScheduledOperation, $log, $modal) {
     var vm = this;
 
     // Operation store.
@@ -13,7 +13,7 @@ module.exports= function($rootScope, $routeParams, Notification, ScheduledOperat
     vm.add = function() {
         var operation = new ScheduledOperation({
             // eslint-disable-next-line camelcase
-            account_id: $routeParams.accountId
+            account_id: $stateParams.accountId
         });
 
         return vm.modify(operation);
@@ -25,7 +25,7 @@ module.exports= function($rootScope, $routeParams, Notification, ScheduledOperat
     vm.load = function() {
         return ScheduledOperation.query({
             // eslint-disable-next-line camelcase
-            account_id: $routeParams.accountId
+            account_id: $stateParams.accountId
         });
     };