Skip to content

Commit f8bafc4

Browse files
author
p.gueripel
committed
commit
1 parent cdcd05b commit f8bafc4

File tree

12 files changed

+113
-25
lines changed

12 files changed

+113
-25
lines changed

‎package.json‎

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -14,14 +14,14 @@
1414
},
1515
"private": true,
1616
"dependencies": {
17-
"@angular/animations": "16.2.11",
17+
"@angular/animations": "^19.0.5",
1818
"@angular/common": "16.2.11",
1919
"@angular/compiler": "16.2.11",
2020
"@angular/core": "16.2.11",
2121
"@angular/forms": "16.2.11",
2222
"@angular/platform-browser": "16.2.11",
2323
"@angular/platform-browser-dynamic": "16.2.11",
24-
"@angular/router": "16.2.11",
24+
"@angular/router": "^19.0.5",
2525
"@rx-angular/cdk": "latest",
2626
"@rx-angular/template": "^15.1.0",
2727
"marked": "^4.2.12",

‎src/app/app-routing.module.ts‎

Lines changed: 8 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -1,14 +1,15 @@
11
import { inject, NgModule } from "@angular/core";
2-
import { Routes, RouterModule, PreloadAllModules } from "@angular/router";
3-
import { UserService } from "./core/services/user.service";
2+
import { PreloadAllModules, RouterModule, Routes } from "@angular/router";
43
import { map } from "rxjs/operators";
4+
import { UserService } from "./core/services/user.service";
55
import { ProfileComponent } from "./features/profile/profile.component";
66

77
const routes: Routes = [
88
{
99
path: "",
1010
loadComponent: () =>
1111
import("./features/home/home.component").then((m) => m.HomeComponent),
12+
data: { animation: "HomePage" },
1213
},
1314
{
1415
path: "login",
@@ -17,6 +18,7 @@ const routes: Routes = [
1718
canActivate: [
1819
() => inject(UserService).isAuthenticated.pipe(map((isAuth) => !isAuth)),
1920
],
21+
data: { animation: "AuthPage" },
2022
},
2123
{
2224
path: "register",
@@ -25,6 +27,7 @@ const routes: Routes = [
2527
canActivate: [
2628
() => inject(UserService).isAuthenticated.pipe(map((isAuth) => !isAuth)),
2729
],
30+
data: { animation: "SettingsPage" },
2831
},
2932
{
3033
path: "settings",
@@ -33,6 +36,7 @@ const routes: Routes = [
3336
(m) => m.SettingsComponent
3437
),
3538
canActivate: [() => inject(UserService).isAuthenticated],
39+
data: { animation: "SettingsPage" },
3640
},
3741
{
3842
path: "profile",
@@ -47,13 +51,15 @@ const routes: Routes = [
4751
import("./features/profile/profile-articles.component").then(
4852
(m) => m.ProfileArticlesComponent
4953
),
54+
data: { animation: "ProfileArticlesPage" },
5055
},
5156
{
5257
path: "favorites",
5358
loadComponent: () =>
5459
import("./features/profile/profile-favorites.component").then(
5560
(m) => m.ProfileFavoritesComponent
5661
),
62+
data: { animation: "ProfileFavoritesPage" },
5763
},
5864
],
5965
},

‎src/app/app.component.html‎

Lines changed: 3 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,6 @@
11
<app-layout-header></app-layout-header>
22

3-
<router-outlet></router-outlet>
4-
3+
<div [@routeAnimations]="prepareRoute(outlet)">
4+
<router-outlet #outlet="outlet"></router-outlet>
5+
</div>
56
<app-layout-footer></app-layout-footer>

‎src/app/app.component.ts‎

Lines changed: 50 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,7 +1,56 @@
1+
import {
2+
animate,
3+
group,
4+
query,
5+
style,
6+
transition,
7+
trigger,
8+
} from "@angular/animations";
19
import { Component } from "@angular/core";
10+
import { RouterOutlet } from "@angular/router";
211

312
@Component({
413
selector: "app-root",
514
templateUrl: "./app.component.html",
15+
animations: [
16+
trigger("routeAnimations", [
17+
transition("* <=> *", [
18+
query(
19+
":enter, :leave",
20+
style({ position: "absolute", width: "100%" }),
21+
{ optional: true }
22+
),
23+
group([
24+
query(
25+
":enter",
26+
[
27+
style({ transform: "translateX(100%)" }),
28+
animate("0.5s ease-out", style({ transform: "translateX(0%)" })),
29+
],
30+
{ optional: true }
31+
),
32+
query(
33+
":leave",
34+
[
35+
style({ transform: "translateX(0%)" }),
36+
animate(
37+
"0.5s ease-out",
38+
style({ transform: "translateX(-100%)" })
39+
),
40+
],
41+
{ optional: true }
42+
),
43+
]),
44+
]),
45+
]),
46+
],
647
})
7-
export class AppComponent {}
48+
export class AppComponent {
49+
prepareRoute(outlet: RouterOutlet) {
50+
return (
51+
outlet &&
52+
outlet.activatedRouteData &&
53+
outlet.activatedRouteData["animation"]
54+
);
55+
}
56+
}

‎src/app/app.module.ts‎

Lines changed: 8 additions & 6 deletions
Original file line numberDiff line numberDiff line change
@@ -1,17 +1,18 @@
11
import { APP_INITIALIZER, NgModule } from "@angular/core";
22
import { BrowserModule } from "@angular/platform-browser";
33

4-
import { AppComponent } from "./app.component";
4+
import { HTTP_INTERCEPTORS, HttpClientModule } from "@angular/common/http";
5+
import { BrowserAnimationsModule } from "@angular/platform-browser/animations";
6+
import { EMPTY } from "rxjs";
57
import { AppRoutingModule } from "./app-routing.module";
8+
import { AppComponent } from "./app.component";
9+
import { ApiInterceptor } from "./core/interceptors/api.interceptor";
10+
import { ErrorInterceptor } from "./core/interceptors/error.interceptor";
11+
import { TokenInterceptor } from "./core/interceptors/token.interceptor";
612
import { FooterComponent } from "./core/layout/footer.component";
713
import { HeaderComponent } from "./core/layout/header.component";
814
import { JwtService } from "./core/services/jwt.service";
915
import { UserService } from "./core/services/user.service";
10-
import { EMPTY } from "rxjs";
11-
import { HTTP_INTERCEPTORS, HttpClientModule } from "@angular/common/http";
12-
import { TokenInterceptor } from "./core/interceptors/token.interceptor";
13-
import { ErrorInterceptor } from "./core/interceptors/error.interceptor";
14-
import { ApiInterceptor } from "./core/interceptors/api.interceptor";
1516

1617
export function initAuth(jwtService: JwtService, userService: UserService) {
1718
return () => (jwtService.getToken() ? userService.getCurrentUser() : EMPTY);
@@ -21,6 +22,7 @@ export function initAuth(jwtService: JwtService, userService: UserService) {
2122
declarations: [AppComponent],
2223
imports: [
2324
BrowserModule,
25+
BrowserAnimationsModule,
2426
FooterComponent,
2527
HeaderComponent,
2628
AppRoutingModule,

‎src/app/core/layout/header.component.html‎

Lines changed: 3 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,8 @@
11
<nav class="navbar navbar-light">
22
<div class="container">
3-
<a class="navbar-brand" routerLink="/">conduit</a>
3+
<a class="navbar-brand" routerLink="/"
4+
><img class="logo" src="../../../assets/logo.png" alt=""
5+
/></a>
46

57
<!-- Show this for logged out users -->
68
<ul *appShowAuthed="false" class="nav navbar-nav pull-xs-right">

‎src/assets/car.jpg‎

1.87 MB
Loading

‎src/assets/logo.png‎

4.76 MB
Loading

‎src/assets/mountain.jpg‎

1.94 MB
Loading

‎src/assets/sea.png‎

3.95 MB
Loading

0 commit comments

Comments
 (0)