Upgrade routing to Angular2.

This commit is contained in:
Alexis Lahouze 2017-08-01 23:09:21 +02:00
parent 2ae8a9cfad
commit 5726d8bf2e
13 changed files with 81 additions and 59 deletions

View File

@ -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",

View File

@ -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

View File

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

View File

@ -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>

18
src/app.component.ts Normal file
View File

@ -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 { }

View File

@ -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) { }
ngDoBootstrap() {
this.upgrade.bootstrap(document.body, [Ng1AppModule.name], { strictDi: false });
}
constructor() {}
}

View File

@ -28,14 +28,7 @@
<!-- htmllint attr-bans="false" -->
<body style="padding-bottom: 50px; padding-top: 70px">
<!-- htmllint attr-bans="$previous" -->
<!-- Navbar -->
<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>
<accountant></accountant>
</body>
</html>

View File

@ -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'
export function $modalServiceFactory(i: any) {
return i.get('$modal');
}
export function accountIdServiceFactory(i: any) {
return i.get('accountIdService');
}
import { OperationListState } from './operation.states'
@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,

View File

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

View File

@ -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[]) => {

View File

@ -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';
export function accountIdServiceFactory(i: any) {
return i.get('accountIdService');
}
import { ScheduleListState } from './schedule.states';
@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,

View File

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

View File

@ -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();
}