Effective Angularの第2章のRouterまでのまとめ

Effective Angular

Effective Angular: Develop applications of any size by effectively using Angular with Nx, RxJS, NgRx, and Cypress
を購入したマスタカ

2章のPowerful Angular FeaturesのRoute Configuration options
まで読んだのでその感想

Angular
・main.ts
standaloneだと、bootstrapApplication
standaloneでないと、platformbrowserdynamic

・signal
computedを使うと計算した結果を流せる
https://angular.jp/guide/

画面遷移
・component側からの遷移
https://www.digitalocean.com/community/tutorials/angular-query-parameters-ja

import {Router } from '@angular/router';
private router: Router

goOverview() {
    this.router.navigate(['expenses-overview'])
}

goApproval(){
    this.router.navigateByUrl('/expenses-approval')
}

//view
<button (click)="goOverview()">goOverview</button>
<button (click)="goApproval()">goApproval</button>

・viewからの遷移
RouterModule, RouterOutletをcomponent側でimportしないとリンクされないので注意
https://github.com/stackblitz/core/issues/2844

<a routerLink="/expenses-overview">ovewrview</a>
<a routerLink="/expenses-overview" routerLinkActive="active">ovewrview</a>
<a [routerLink]="[routerLinkVariable]">overview2</a>

Routing
・router-outlet
routingで指定されたコンポーネントが表示される

・titleの設定方法

{ path: 'expenses-approval', component:ExpensesApprovalPageComponent, title: "test"}

・resolverを入れる

export const titleResolver: ResolveFn<string>
    = (route: ActivatedRouteSnapshot) => route.routeConfig?.path?.replace('-', '') ?? '';

{ path: 'expenses-overview', component:ExpensesOverviewPageComponent, title: titleResolver},

・Lazy Load

{ path: 'lazy', loadComponent: () => import('./pages/expenses-approval-page.component').then(mod =>  mod.ExpensesApprovalPageComponent)}

・名前付きのoutlet
以下でアクセスできる
http://localhost:4200/a(sidebar:list)
https://stackoverflow.com/questions/71035688/angular-router-named-router-outlets-under-children-routes
urlが格好悪いなら変更できる
https://stackoverflow.com/questions/49515140/angular-router-outlet-name-popup-change-url-path-structure

{ path: 'list', component: ExpensesApprovalPageComponent, outlet: 'sidebar'}

<router-outlet name="sidebar"></router-outlet>

・child route
以下でアクセスできる
http://localhost:4200/a/overview

{ path: 'a', component:ExpensesComponent,
children: [{path: "overview", component:ExpensesOverviewPageComponent}]
},

・404

{ path: '**', component: ExpensesApprovalPageComponent}

・redirectTo

{ path: '', pathMatch: 'full',  redirectTo: '/a'},

・画面表示前にresolverとしてロジックを入れる

export const snapShotResolver: ResolveFn<string>
    = (route: ActivatedRouteSnapshot) => of("1")
{ path: 'a', component:ExpensesComponent, resolve: {a:snapShotResolver},

//データは以下で取得できる
constructor(private route2: ActivatedRoute) {
}
ngOnInit(): void {
    console.log(this.route2.snapshot.data )
}

View
・angular17での書き方

@if (a >b){
    <div>{{a}} is greater than {{b}}</div>
} @else {
    <div>{{a}}is less than {{b}}</div>
}

@for (item of items; track [item.id](http://item.id/)) {
    <li> {{[item.name](http://item.name/)}}</li>
} @empty {
    <li> There are no items.</li>
}

・defer
遅延読み込みもできる
https://angular.dev/guide/defer

Effective Angular

Pocket

関連記事: