Upgrade routing to Angular2.

package.json

@@ -44,6 +44,7 @@
     "@angular/http": "^4.3.2",
     "@angular/platform-browser": "^4.3.2",
     "@angular/platform-browser-dynamic": "^4.3.2",
+    "@angular/router": "^4.3.2",
     "@angular/upgrade": "^4.3.2",
     "@ng-bootstrap/ng-bootstrap": "^1.0.0-alpha.29",
     "@nsalaun/ng-logger": "^2.0.1",

src/accounts/account.module.ts

@@ -4,6 +4,7 @@ import { NgModule } from '@angular/core';
 import { CommonModule } from '@angular/common';
 import { FormsModule } from '@angular/forms';
 import { HttpClientModule } from '@angular/common/http';
+import { RouterModule } from '@angular/router';
 
 import { NgLoggerModule, Level } from '@nsalaun/ng-logger';
 import { NgbModule } from '@ng-bootstrap/ng-bootstrap';
@@ -17,12 +18,16 @@ import { AccountEditModalComponent } from './accountEditModal.component';
 import { AccountFormComponent } from './accountForm.component';
 import { AccountRowComponent } from './accountRow.component';
 import { DailyBalanceService } from './dailyBalance.service';
+import { AccountListState } from './account.states'
 
 @NgModule({
   imports: [
     HttpClientModule,
     CommonModule,
     FormsModule,
+    RouterModule.forChild([
+      AccountListState
+    ]),
     NgLoggerModule,
     ToastrModule,
     NgbModule

src/accounts/account.states.ts

@@ -1,7 +1,8 @@
 // vim: set tw=80 ts=2 sw=2 sts=2 :
 
+import { AccountListComponent } from './accountList.component';
+
 export const AccountListState = {
-  name: 'accounts',
+  path: 'accounts',
-  url: '/accounts',
+  component: AccountListComponent
-  component: 'accountList'
 }

src/accounts/accountRow.component.ts

@@ -22,7 +22,7 @@ import { AccountEditModalComponent } from './accountEditModal.component';
   },
   template: `
 <td>
-  <a href="#!/account/{{ account.id }}/operations">{{ account.name }}</a>
+  <a [routerLink]="['/account', account.id, 'operations']">{{ account.name }}</a>
 </td>
 
 <td>
@@ -56,7 +56,7 @@ import { AccountEditModalComponent } from './accountEditModal.component';
     <!-- Open account scheduler. -->
     <a class="btn btn-secondary"
       [hidden]="!account.id"
-      href="#!/account/{{ account.id }}/scheduler">
+      [routerLink]="['/account', account.id, 'scheduler']">
       <span class="fa fa-clock-o"></span>
     </a>
   </div>

src/app.component.ts

@@ -0,0 +1,18 @@
+// vim: set tw=80 ts=2 sw=2 sts=2 :
+
+import { Component } from '@angular/core';
+
+@Component({
+  selector: 'accountant',
+  template: `
+    <!-- Navbar -->
+    <nav class="navbar fixed-top navbar-inverse bg-inverse">
+      <a class="navbar-brand" routerLink="/accounts">&nbsp;Accountant</a>
+    </nav>
+
+    <div class="container-fluid">
+      <router-outlet></router-outlet>
+    </div>
+  `
+})
+export class AppComponent { }

src/app.module.ts

@@ -4,12 +4,10 @@ import 'reflect-metadata';
 
 require('./main.less');
 
-import { AppModule as Ng1AppModule } from './app';
-
 import { NgModule } from '@angular/core';
 import { BrowserModule } from '@angular/platform-browser';
 import { BrowserAnimationsModule } from '@angular/platform-browser/animations';
-import { UpgradeModule } from '@angular/upgrade/static';
+import { RouterModule } from '@angular/router';
 
 import { NgLoggerModule } from '@nsalaun/ng-logger';
 import { ToastrModule } from 'ngx-toastr';
@@ -19,27 +17,37 @@ import { AccountModule } from './accounts/account.module';
 import { ScheduleModule } from './scheduler/schedule.module';
 import { OperationModule } from './operations/operation.module';
 
+import { AppComponent } from './app.component';
+
 import { ApiBaseURL, LogLevel } from './app.config';
 
 @NgModule({
   imports: [
     BrowserModule,
     BrowserAnimationsModule,
-    UpgradeModule,
     AccountModule,
     ScheduleModule,
     OperationModule,
     NgLoggerModule.forRoot(LogLevel),
     ToastrModule.forRoot(),
-    NgbModule.forRoot()
+    NgbModule.forRoot(),
-  ]
+    RouterModule.forRoot([
+      {
+        path: '',
+        redirectTo: '/accounts',
+        pathMatch: 'full'
+      }
+    ], {
+      enableTracing: true,
+      useHash: true
+    })
+  ],
+  declarations: [
+    AppComponent
+  ],
+  bootstrap: [ AppComponent ]
 })
 
 export class AppModule {
-  constructor(private upgrade: UpgradeModule) { }
+  constructor() {}
-
-  ngDoBootstrap() {
-    this.upgrade.bootstrap(document.body, [Ng1AppModule.name], { strictDi: false });
 }
-}
-

src/index.ejs

@@ -28,14 +28,7 @@
   <!-- htmllint attr-bans="false" -->
   <body style="padding-bottom: 50px; padding-top: 70px">
   <!-- htmllint attr-bans="$previous" -->
-    <!-- Navbar -->
+    <accountant></accountant>
-    <nav class="navbar fixed-top navbar-inverse bg-inverse">
-      <a class="navbar-brand" href="#!/accounts">&nbsp;Accountant</a>
-    </nav>
-
-    <div class="container-fluid">
-      <div ui-view></div>
-    </div>
   </body>
 </html>
 

src/operations/operation.module.ts

@@ -4,6 +4,7 @@ import { NgModule } from '@angular/core';
 import { CommonModule } from '@angular/common';
 import { FormsModule } from '@angular/forms';
 import { HttpClientModule } from '@angular/common/http';
+import { RouterModule } from '@angular/router';
 
 import { NgLoggerModule, Level } from '@nsalaun/ng-logger';
 import { NgbModule } from '@ng-bootstrap/ng-bootstrap';
@@ -19,20 +20,16 @@ import { OperationListComponent } from './operationList.component';
 import { OperationDeleteModalComponent } from './operationDeleteModal.component';
 import { OperationFormComponent } from './operationForm.component';
 import { OperationEditModalComponent } from './operationEditModal.component'
-
+import { OperationListState } from './operation.states'
-export function $modalServiceFactory(i: any) {
-  return i.get('$modal');
-}
-
-export function accountIdServiceFactory(i: any) {
-  return i.get('accountIdService');
-}
 
 @NgModule({
   imports: [
     HttpClientModule,
     CommonModule,
     FormsModule,
+    RouterModule.forChild([
+      OperationListState
+    ]),
     NgLoggerModule,
     ToastrModule,
     NgbModule,
@@ -41,11 +38,6 @@ export function accountIdServiceFactory(i: any) {
   providers: [
     CategoryService,
     OperationService,
-    {
-      provide: 'accountIdService',
-      deps: ['$injector'],
-      useFactory: accountIdServiceFactory
-    }
   ],
   declarations: [
     BalanceChartComponent,

src/operations/operation.states.ts

@@ -1,7 +1,8 @@
 // vim: set tw=80 ts=2 sw=2 sts=2 :
 
+import { OperationListComponent } from './operationList.component';
+
 export const OperationListState = {
-  name: 'operations',
+  path: 'account/:accountId/operations',
-  url: '/account/:accountId/operations',
+  component: OperationListComponent
-  component: 'operationListComponent'
 }

src/operations/operationList.component.ts

@@ -1,5 +1,7 @@
 // vim: set tw=80 ts=2 sw=2 sts=2 :
 import { Component, Inject, OnInit } from '@angular/core';
+import { ActivatedRoute } from '@angular/router';
+
 import { Observable } from 'rxjs/Rx';
 
 import { Logger } from '@nsalaun/ng-logger';
@@ -71,16 +73,18 @@ export class OperationListComponent implements OnInit {
   private operations: Operation[];
 
   constructor(
-    @Inject("accountIdService") private accountIdService,
     private toastrService: ToastrService,
     private operationService: OperationService,
     private accountService: AccountService,
     private logger: Logger,
     private ngbModal: NgbModal,
+    private route: ActivatedRoute
   ) {}
 
   ngOnInit() {
-    this.accountService.get(this.accountIdService.get()).subscribe(account => {
+    this.accountService.get(
+      +this.route.snapshot.paramMap.get('accountId')
+    ).subscribe(account => {
       this.account = account
     });
   }
@@ -90,7 +94,7 @@ export class OperationListComponent implements OnInit {
    */
   add() {
     var operation = new Operation();
-    operation.account_id = this.accountIdService.get();
+    operation.account_id = this.account.id;
 
     // FIXME Alexis Lahouze 2017-06-15 i18n
     const modal = this.ngbModal.open(OperationEditModalComponent);
@@ -111,7 +115,7 @@ export class OperationListComponent implements OnInit {
     this.maxDate = maxDate;
 
     return this.operationService.query(
-      this.accountIdService.get(),
+      this.account.id,
       minDate,
       maxDate
     ).subscribe((operations: Operation[]) => {

src/scheduler/schedule.module.ts

@@ -4,6 +4,7 @@ import { NgModule } from '@angular/core';
 import { CommonModule } from '@angular/common';
 import { FormsModule } from '@angular/forms';
 import { HttpClientModule } from '@angular/common/http';
+import { RouterModule } from '@angular/router';
 
 import { NgLoggerModule, Level } from '@nsalaun/ng-logger';
 import { NgbModule } from '@ng-bootstrap/ng-bootstrap';
@@ -16,16 +17,16 @@ import { ScheduleEditModalComponent } from './scheduleEditModal.component';
 import { ScheduleFormComponent } from './scheduleForm.component';
 import { ScheduleRowComponent } from './scheduleRow.component';
 import { ScheduleListComponent } from './scheduleList.component';
-
+import { ScheduleListState } from './schedule.states';
-export function accountIdServiceFactory(i: any) {
-  return i.get('accountIdService');
-}
 
 @NgModule({
   imports: [
     HttpClientModule,
     CommonModule,
     FormsModule,
+    RouterModule.forChild([
+      ScheduleListState
+    ]),
     NgLoggerModule,
     ToastrModule,
     NgbModule,
@@ -33,11 +34,6 @@ export function accountIdServiceFactory(i: any) {
   ],
   providers: [
     ScheduleService,
-    {
-      provide: 'accountIdService',
-      deps: ['$injector'],
-      useFactory: accountIdServiceFactory
-    }
   ],
   declarations: [
     ScheduleDeleteModalComponent,

src/scheduler/schedule.states.ts

@@ -1,7 +1,8 @@
 // vim: set tw=80 ts=2 sw=2 sts=2 :
 
+import { ScheduleListComponent } from './scheduleList.component';
+
 export const ScheduleListState = {
-  name: 'scheduler',
+  path: 'account/:accountId/scheduler',
-  url: '/account/:accountId/scheduler',
+  component: ScheduleListComponent,
-  component: 'scheduleListComponent',
 }

src/scheduler/scheduleList.component.ts

@@ -1,4 +1,6 @@
 import { Component, Inject, OnInit } from '@angular/core';
+import { ActivatedRoute } from '@angular/router';
+
 import { Observable } from 'rxjs/Rx';
 
 import { Logger } from '@nsalaun/ng-logger';
@@ -53,7 +55,7 @@ export class ScheduleListComponent implements OnInit {
         private scheduleService: ScheduleService,
         private logger: Logger,
         private ngbModal: NgbModal,
-        @Inject('accountIdService') private accountIdService
+        private route: ActivatedRoute,
     ) {}
 
     $onInit() {
@@ -62,7 +64,7 @@ export class ScheduleListComponent implements OnInit {
 
     ngOnInit() {
         this.logger.log("ngOnInit");
-        this.accountId = this.accountIdService.get();
+        this.accountId = +this.route.snapshot.paramMap.get('accountId')
         // Load operations on controller initialization.
         this.load();
     }