Développement des pages applicatives

Si vous regardez le projet original, vous pouvez voir que nous devons créer une page principale.

Les résultats de recherche pour les vols, les hôtels et les circuits ne diffèrent que par la forme. Il ne sert donc à rien de réaliser plusieurs implémentations.

Créons une bibliothèque :

mkdir src/app/home
mkdir src/app/home/page
mkdir src/app/home/page/lib
echo >src/app/home/page/index.ts

Générer le composant :

yarn ng g c home-page

Étant donné que les blocs de la page principale peuvent changer, nous les déplacerons séparément vers home/ui.

mkdir src/app/home/ui
mkdir src/app/home/ui/widgets
mkdir src/app/home/ui/widgets/lib
echo >src/app/home/ui/widgets/index.ts

Spécifiez les alias :

"@baf/home/page": ["src/app/home/page/index.ts"], 
"@baf/home/ui/widgets": ["src/app/home/ui/widgets/index.ts"],

Considérez ConnectComponent.
Exécutons la commande :

yarn ng g c Développement des pages applicatives

Marquage :

<h2 baf-headline i18n="Connect|Title">We are always in touch</h2>
<baf-card>
  <div>
    <h3 baf-title i18n="Connect|Question">Have a question - write</h3>
    <p i18n="Connect|Desctiption">For example, if you need help choosing a ticket or paying</p>
    <p>
      <a baf-button bafmode="primary" bafsize="large" path i18n="Connect|Write">Write</a>
    </p>
  </div>
  <img ngsrc="/images/home/Développement des pages applicatives.svg"    style="max-width:90%"  style="max-width:90%" alt="Développement des pages applicatives">
</baf-card>

Quelques styles :

@use 'src/stylesheets/device' as device;

.baf-card {
  display: flex;
  flex-direction: column-reverse;

  img {
    max-width: 10rem;
    aspect-ratio: 1;
  }

  @include device.media-tablet-up() {
    flex-direction: row;
    justify-content: space-between;
  }
}

Logique :

import { NgOptimizedImage } from '@angular/common';
import { ChangeDetectionStrategy, Component } from '@angular/core';
import { RouterLink } from '@angular/router';

import { PathPipe, PATHS } from '@baf/core';
import { AnchorComponent } from '@baf/ui/buttons';
import { CardComponent } from '@baf/ui/cards';
import { HeadlineComponent } from '@baf/ui/headline';
import { TitleComponent } from '@baf/ui/title';

@Component({
  selector: 'baf-Développement des pages applicatives',
  standalone: true,
  imports: [NgOptimizedImage, TitleComponent, HeadlineComponent, CardComponent, AnchorComponent, RouterLink, PathPipe],
  templateUrl: './Développement des pages applicatives.component.html',
  styleUrl: './Développement des pages applicatives.component.scss',
  changeDetection: ChangeDetectionStrategy.OnPush,
})
export class ConnectComponent {
  readonly paths = PATHS;
}

SVG :

<svg viewbox="0 0 1024 1024" xmlns="http://www.w3.org/2000/svg">
  <path d="M118.9 388.7h328.6c14.3 0 25.9 11.6 25.9 25.9v208.7c0 14.3-11.6 25.9-25.9 25.9H275.6l-52.1 50.1-54.1-50.1h-50.5c-14.3 0-25.9-11.6-25.9-25.9V414.6c0-14.3 11.6-25.9 25.9-25.9z" fill="#bdd0fb"></path>
  <path d="M223.5 699.2l-54.1-50.1h-50.5c-14.3 0-25.9-11.6-25.9-25.9V414.6c0-14.3 11.6-25.9 25.9-25.9h328.7c14.3 0 25.9 11.6 25.9 25.9v208.7c0 14.3-11.6 25.9-25.9 25.9H275.7l-52.2 50z m-91.7-88.9h52.8l38.4 35.5 37-35.5h174.6V427.5H131.8v182.8z" fill="#333333"></path>
  <path d="M321.6 267.9h508.9c14.3 0 25.9 11.6 25.9 25.9v399c0 14.3-11.6 25.9-25.9 25.9h-177L584 785.5l-72.2-66.8H321.5c-14.3 0-25.9-11.6-25.9-25.9v-399c0.1-14.3 11.7-25.9 26-25.9z" fill="#FFFFFF"></path>
  <path d="M584.4 821.1l-82.6-76.5H321.6c-28.5 0-51.8-23.2-51.8-51.8v-399c0-28.5 23.2-51.8 51.8-51.8h508.9c28.5 0 51.8 23.2 51.8 51.8v399c0 28.5-23.2 51.8-51.8 51.8H663.9l-79.5 76.5zM321.6 293.8v399H522l61.7 57.1 59.4-57.1h187.4v-399H321.6z" fill="#333333"></path>
  <path d="M642.2 509.5H582l-0.2 10.9c-0.3 14.1-11.8 25.4-25.9 25.4h-0.1c-13.8 0-25-11.2-25-25v-0.5l0.7-37.1c0.3-13.8 11.3-24.9 24.9-25.4 0.8-0.1 1.6-0.1 2.4-0.1h57.3v-47.4H520c-14.3 0-25.9-11.6-25.9-25.9s11.6-25.9 25.9-25.9H642c14.3 0 25.9 11.6 25.9 25.9v99.2c0 14.2-11.5 25.7-25.7 25.9z m-112.3 96.1V603c0-14.3 11.6-25.9 25.9-25.9s25.9 11.6 25.9 25.9v2.6c0 14.3-11.6 25.9-25.9 25.9s-25.9-11.6-25.9-25.9z" fill="#e1473d"></path>
</svg>

De même pour tous les autres widgets.

Comme le montre l'exemple, la localisation est utilisée. Pour que cela fonctionne, vous devez importer @angular/localize.

yarn ng add @angular/localize

Ou faites tout à la main.

Ajoutez le package à package.json - @angular/localize.

Ensuite on précise la saisie dans les fichiers main.ts et main.server.ts :

/// <reference types="@angular/localize"></reference>

Polyfills extensibles :

{
  "polyfills": ["zone.js", "@angular/localize/init"]
}

Modifiez un peu tsconfig.app.json et tsconfig.spec.json :

{
  "types": ["node", "@angular/localize"]
}

Afficher les widgets sur la page principale :

<baf-container>
  <baf-promo></baf-promo>
  <router-outlet name="form"></router-outlet>
</baf-container>
<baf-section>
  <baf-container>
    <baf-must-buy></baf-must-buy>
    <baf-traveling></baf-traveling>
    <baf-convenient-with-us></baf-convenient-with-us>
    <baf-d des pages applicatives></baf-d>
  </baf-container>
</baf-section>
<baf-section bafcolor="smoke">
  <baf-container>
    <baf-questions></baf-questions>
  </baf-container>
</baf-section>

Connectons-les :

import { ChangeDetectionStrategy, Component } from '@angular/core';
import { RouterOutlet } from '@angular/router';

import {
  ConnectComponent,
  ConvenientWithUsComponent,
  MustBuyComponent,
  PromoComponent,
  QuestionsComponent,
  TravelingComponent,
} from '@baf/home/ui/widgets';
import { ContainerComponent } from '@baf/ui/container';
import { SectionComponent } from '@baf/ui/section';

@Component({
  selector: 'baf-home-page',
  standalone: true,
  imports: [
    RouterOutlet,
    ContainerComponent,
    SectionComponent,
    PromoComponent,
    MustBuyComponent,
    TravelingComponent,
    ConvenientWithUsComponent,
    ConnectComponent,
    QuestionsComponent,
  ],
  templateUrl: './home-page.component.html',
  styleUrl: './home-page.component.scss',
  changeDetection: ChangeDetectionStrategy.OnPush,
})
export class HomePageComponent {}

Pages maintenant :

mkdir src/app/routes
echo >src/app/routes/home.routes.ts

Création d'itinéraires :

import type { Routes } from '@angular/router';

import { PATHS } from '@baf/core';

export const homeRoutes: Routes = [
  {
    path: PATHS.homeAvia,
    loadComponent: () => import('@baf/home/page').then((m) => m.HomePageComponent),
  },
  {
    path: PATHS.homeHotels,
    loadComponent: () => import('@baf/home/page').then((m) => m.HomePageComponent),
  },
  {
    path: PATHS.homeTours,
    loadComponent: () => import('@baf/home/page').then((m) => m.HomePageComponent),
  },
  {
    path: PATHS.homeRailways,
    loadComponent: () => import('@baf/home/page').then((m) => m.HomePageComponent),
  },
];

Dans app.routes.ts :

{
  path: '',
  loadChildren: () => import('./routes/home.routes').then((m) => m.homeRoutes),
}

Lancez notre application.

Erreurs

Si l'utilisateur suit un lien qui n'existe pas, alors par défaut le routeur lancera une exception

Créons une bibliothèque où nous placerons les erreurs HTTP de base : 403, 404 et 500.

mkdir src/app/errors

mkdir src/app/errors/not-found
mkdir src/app/errors/not-found/page
mkdir src/app/errors/not-found/page/lib
echo >src/app/errors/not-found/page/index.ts

mkdir src/app/errors/permission-denied
mkdir src/app/errors/permission-denied/page
mkdir src/app/errors/permission-denied/page/lib
echo >src/app/errors/permission-denied/page/index.ts

mkdir src/app/errors/server-error
mkdir src/app/errors/server-error/page
mkdir src/app/errors/server-error/page/lib
echo >src/app/errors/server-error/page/index.ts

Toutes les pages seront similaires.

Créez un modèle pour les objets introuvables :

<baf-container bafalign="center">
  <h1 baf-headline>404</h1>
  <h3 baf-title i18n="Not Found|Title">Page not found</h3>
  <baf-errors-links></baf-errors-links>
</baf-container>

import { ChangeDetectionStrategy, Component } from '@angular/core';

import { ErrorsLinkComponent } from '@baf/errors/ui/links';
import { ContainerComponent } from '@baf/ui/container';
import { HeadlineComponent } from '@baf/ui/headline';
import { TitleComponent } from '@baf/ui/title';

@Component({
  selector: 'baf-not-found-page',
  standalone: true,
  imports: [ContainerComponent, HeadlineComponent, TitleComponent, ErrorsLinkComponent],
  templateUrl: './not-found-page.component.html',
  styleUrls: ['./not-found-page.component.scss'],
  changeDetection: ChangeDetectionStrategy.OnPush,
})
export class NotFoundPageComponent {}

Ajouter un composant commun avec des liens :

mkdir src/app/errors/ui
mkdir src/app/errors/ui/lib
echo >src/app/errors/ui/index.ts

Exécutez la commande :

yarn ng g c errors-link

Déplacez le lien des erreurs vers src/app/errors/ui/lib.

<p i18n="Not Found|Perhaps you were looking for pages">Perhaps you were looking for pages</p>
<baf-nav></baf-nav>

import { ChangeDetectionStrategy, Component } from '@angular/core';

import type { NavigationLink } from '@baf/core';
import { PATHS } from '@baf/core';
import { NavComponent } from '@baf/ui/nav';

@Component({
  selector: 'baf-errors-links',
  standalone: true,
  imports: [NavComponent],
  templateUrl: './errors-link.component.html',
  styleUrls: ['./errors-link.component.scss'],
  changeDetection: ChangeDetectionStrategy.OnPush,
})
export class ErrorsLinkComponent {
  readonly links: NavigationLink[] = [
    {
      route: PATHS.home,
      label: 'home',
    },
    {
      route: PATHS.documents,
      label: 'Documents',
    },
  ];
}

Définissons les chemins d'accès aux erreurs error.routes.ts :

import type { Routes } from '@angular/router';

import { PATHS } from '@baf/core';

export const errorsRoutes: Routes = [
  {
    path: PATHS.permissionDenied,
    title: 'Permission Denied',
    loadComponent: () => import('@baf/errors/permission-denied/page').then((m) => m.PermissionDeniedPageComponent),
  },
  {
    path: PATHS.serverError,
    title: 'Internal Server Error',
    loadComponent: () => import('@baf/errors/server-error/page').then((m) => m.ServerErrorPageComponent),
  },
  {
    path: '**',
    title: 'Page not found',
    loadComponent: () => import('@baf/errors/not-found/page').then((m) => m.NotFoundPageComponent),
  },
];

Connectez-vous dans app.routes.ts :

export const routes: Routes = [
  {
    path: '',
    loadComponent: () => import('@baf/ui/layout').then((m) => m.LayoutComponent),
    children: [
      //…
      {
        path: '',
        loadChildren: () => import('./routes/errors.routes').then((m) => m.errorsRoutes),
      },
    ],
  },
];

Rubrique en développement

Ajoutons une page technique qui servira d'espace réservé.

mkdir src/app/development
mkdir src/app/development/page
mkdir src/app/development/page/lib
echo >src/app/development/page/index.ts

Ajouter le composant :

<baf-container>
  <h1 baf-headline i18n="Development Page|Title">Page is under construction</h1>
  <p i18n="Development Page|Description">
    This section is currently under development and will be available soon. We are working diligently to bring you new and exciting content,
    packed with features and improvements to enhance your experience. Please check back later for updates. We appreciate your patience and
    look forward to unveiling this new section shortly. Thank you for your understanding and support!
  </p>
  <img ngsrc="/images/development.svg"    style="max-width:90%"  style="max-width:90%" sizes="(min-width: 0) 33vw" alt="" priority>
</baf-container>

:host {
  position: relative;
  display: block;

  img {
    height: auto;
  }
}

import { NgOptimizedImage } from '@angular/common';
import { ChangeDetectionStrategy, Component } from '@angular/core';

import { ContainerComponent } from '@baf/ui/container';
import { HeadlineComponent } from '@baf/ui/headline';

@Component({
  selector: 'baf-development-page',
  standalone: true,
  imports: [NgOptimizedImage, ContainerComponent, HeadlineComponent],
  templateUrl: './development-page.component.html',
  styleUrl: './development-page.component.scss',
  changeDetection: ChangeDetectionStrategy.OnPush,
})
export class DevelopmentPageComponent {}

Précisez les itinéraires dans documents.routes.ts :

import type { Routes } from '@angular/router';

import { PATHS } from '@baf/core';

export const documentsRoutes: Routes = [
  {
    path: PATHS.rules,
    title: $localize`:Documents Rules:Rules for using the site`,
    loadComponent: () => import('@baf/development/page').then((m) => m.DevelopmentPageComponent),
  },
  {
    path: PATHS.terms,
    title: $localize`:Documents Terms:Conditions for participation in the program`,
    loadComponent: () => import('@baf/development/page').then((m) => m.DevelopmentPageComponent),
  },
  {
    path: PATHS.documents,
    title: $localize`:Documents All:Documents`,
    loadComponent: () => import('@baf/development/page').then((m) => m.DevelopmentPageComponent),
  },
  {
    path: PATHS.faq,
    title: $localize`:Documents FAQ:FAQ`,
    loadComponent: () => import('@baf/development/page').then((m) => m.DevelopmentPageComponent),
  },
  {
    path: PATHS.cards,
    title: $localize`:Cards:Application`,
    loadComponent: () => import('@baf/development/page').then((m) => m.DevelopmentPageComponent),
  },
  {
    path: PATHS.login,
    title: $localize`:Login Title:Sign in`,
    loadComponent: () => import('@baf/development/page').then((m) => m.DevelopmentPageComponent),
  },
  {
    path: PATHS.registration,
    title: $localize`:Registration Title:Sign up`,
    loadComponent: () => import('@baf/development/page').then((m) => m.DevelopmentPageComponent),
  },
];

Connectez toutes les routes dans app.routes.ts.

Ensuite, implémentons la recherche.

Links

Toutes les sources sont sur github, dans le dépôt - github.com/Fafnur/buy-and-fly

Vous pouvez regarder la démo ici - buy-and-fly.fafn.ru/

Mes groupes : télégramme, medium, vk, x.com, linkedin, site

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!