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.
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), }, ], }, ];
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.
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!