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/http": "^4.3.2",
"@angular/platform-browser": "^4.3.2", "@angular/platform-browser": "^4.3.2",
"@angular/platform-browser-dynamic": "^4.3.2", "@angular/platform-browser-dynamic": "^4.3.2",
"@angular/router": "^4.3.2",
"@angular/upgrade": "^4.3.2", "@angular/upgrade": "^4.3.2",
"@ng-bootstrap/ng-bootstrap": "^1.0.0-alpha.29", "@ng-bootstrap/ng-bootstrap": "^1.0.0-alpha.29",
"@nsalaun/ng-logger": "^2.0.1", "@nsalaun/ng-logger": "^2.0.1",

View File

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

View File

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

View File

@ -22,7 +22,7 @@ import { AccountEditModalComponent } from './accountEditModal.component';
}, },
template: ` template: `
<td> <td>
<a href="#!/account/{{ account.id }}/operations">{{ account.name }}</a> <a [routerLink]="['/account', account.id, 'operations']">{{ account.name }}</a>
</td> </td>
<td> <td>
@ -56,7 +56,7 @@ import { AccountEditModalComponent } from './accountEditModal.component';
<!-- Open account scheduler. --> <!-- Open account scheduler. -->
<a class="btn btn-secondary" <a class="btn btn-secondary"
[hidden]="!account.id" [hidden]="!account.id"
href="#!/account/{{ account.id }}/scheduler"> [routerLink]="['/account', account.id, 'scheduler']">
<span class="fa fa-clock-o"></span> <span class="fa fa-clock-o"></span>
</a> </a>
</div> </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'); require('./main.less');
import { AppModule as Ng1AppModule } from './app';
import { NgModule } from '@angular/core'; import { NgModule } from '@angular/core';
import { BrowserModule } from '@angular/platform-browser'; import { BrowserModule } from '@angular/platform-browser';
import { BrowserAnimationsModule } from '@angular/platform-browser/animations'; 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 { NgLoggerModule } from '@nsalaun/ng-logger';
import { ToastrModule } from 'ngx-toastr'; import { ToastrModule } from 'ngx-toastr';
@ -19,27 +17,37 @@ import { AccountModule } from './accounts/account.module';
import { ScheduleModule } from './scheduler/schedule.module'; import { ScheduleModule } from './scheduler/schedule.module';
import { OperationModule } from './operations/operation.module'; import { OperationModule } from './operations/operation.module';
import { AppComponent } from './app.component';
import { ApiBaseURL, LogLevel } from './app.config'; import { ApiBaseURL, LogLevel } from './app.config';
@NgModule({ @NgModule({
imports: [ imports: [
BrowserModule, BrowserModule,
BrowserAnimationsModule, BrowserAnimationsModule,
UpgradeModule,
AccountModule, AccountModule,
ScheduleModule, ScheduleModule,
OperationModule, OperationModule,
NgLoggerModule.forRoot(LogLevel), NgLoggerModule.forRoot(LogLevel),
ToastrModule.forRoot(), ToastrModule.forRoot(),
NgbModule.forRoot() NgbModule.forRoot(),
] RouterModule.forRoot([
{
path: '',
redirectTo: '/accounts',
pathMatch: 'full'
}
], {
enableTracing: true,
useHash: true
})
],
declarations: [
AppComponent
],
bootstrap: [ AppComponent ]
}) })
export class AppModule { export class AppModule {
constructor(private upgrade: UpgradeModule) { } constructor() {}
ngDoBootstrap() {
this.upgrade.bootstrap(document.body, [Ng1AppModule.name], { strictDi: false });
}
} }

View File

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

View File

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

View File

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

View File

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

View File

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

View File

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

View File

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