Wenn Sie sich das Originalprojekt ansehen, können Sie sehen, dass wir eine Hauptseite erstellen müssen.
Suchergebnisse für Flüge, Hotels und Touren unterscheiden sich nur in der Form. Daher macht es keinen Sinn, mehrere Implementierungen vorzunehmen.
Lassen Sie uns eine Bibliothek erstellen:
mkdir src/app/home mkdir src/app/home/page mkdir src/app/home/page/lib echo >src/app/home/page/index.ts
Generieren Sie die Komponente:
yarn ng g c home-page
Da sich die Blöcke auf der Hauptseite ändern können, werden wir sie separat nach Home/UI verschieben.
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
Aliase angeben:
"@baf/home/page": ["src/app/home/page/index.ts"], "@baf/home/ui/widgets": ["src/app/home/ui/widgets/index.ts"],
Erwägen Sie ConnectComponent.
Lassen Sie uns den Befehl ausführen:
yarn ng g c Entwicklung von Anwendungsseiten
Markierung:
<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/Entwicklung von Anwendungsseiten.svg" style="max-width:90%" style="max-width:90%" alt="Entwicklung von Anwendungsseiten">
</baf-card>
Ein paar Stile:
@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;
}
}
Logik:
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-Entwicklung von Anwendungsseiten',
standalone: true,
imports: [NgOptimizedImage, TitleComponent, HeadlineComponent, CardComponent, AnchorComponent, RouterLink, PathPipe],
templateUrl: './Entwicklung von Anwendungsseiten.component.html',
styleUrl: './Entwicklung von Anwendungsseiten.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>
Das Gleiche gilt für alle anderen Widgets.
Wie aus dem Beispiel ersichtlich ist, wird Lokalisierung verwendet. Damit es funktioniert, müssen Sie @angular/localize.
importieren
yarn ng add @angular/localize
Oder machen Sie alles von Hand.
Fügen Sie das Paket zu package.json hinzu – @angular/localize.
Dann legen wir die Typisierung in den Dateien main.ts und main.server.ts fest:
/// <reference types="@angular/localize"></reference>
Erweiternde Polyfills:
{
"polyfills": ["zone.js", "@angular/localize/init"]
}
Ändern Sie tsconfig.app.json und tsconfig.spec.json ein wenig:
{
"types": ["node", "@angular/localize"]
}
Widgets auf der Hauptseite anzeigen:
<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-entwicklung von anwendungsseiten></baf-entwicklung>
</baf-container>
</baf-section>
<baf-section bafcolor="smoke">
<baf-container>
<baf-questions></baf-questions>
</baf-container>
</baf-section>
Lassen Sie uns sie verbinden:
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 {}
Jetzt Seiten:
mkdir src/app/routes echo >src/app/routes/home.routes.ts
Routen erstellen:
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),
},
];
In app.routes.ts:
{
path: '',
loadChildren: () => import('./routes/home.routes').then((m) => m.homeRoutes),
}
Lassen Sie uns unsere Anwendung starten.
Wenn der Benutzer einem Link folgt, der nicht existiert, löst der Router standardmäßig eine Ausnahme aus
Lassen Sie uns eine Bibliothek erstellen, in der wir grundlegende HTTP-Fehler platzieren: 403, 404 und 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
Alle Seiten werden ähnlich sein.
Erstellen Sie eine Vorlage für nicht gefunden:
<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 {}
Fügen Sie eine gemeinsame Komponente mit Links hinzu:
mkdir src/app/errors/ui mkdir src/app/errors/ui/lib echo >src/app/errors/ui/index.ts
Führen Sie den Befehl aus:
yarn ng g c errors-link
Fehler-Link nach src/app/errors/ui/lib verschieben.
<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',
},
];
}
Lassen Sie uns die Pfade zu den Fehlern „errors.routes.ts“ definieren:
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),
},
];
Verbinden Sie sich in 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),
},
],
},
];
Fügen wir eine technische Seite hinzu, die als Platzhalter verwendet wird.
mkdir src/app/development mkdir src/app/development/page mkdir src/app/development/page/lib echo >src/app/development/page/index.ts
Fügen Sie die Komponente hinzu:
<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 {}
Geben Sie die Routen in document.routes.ts an:
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),
},
];
Verbinden Sie alle Routen in app.routes.ts.
Als nächstes implementieren wir die Suche.
Alle Quellen befinden sich auf Github im Repository – github.com/Fafnur/buy-and-fly
Sie können sich die Demo hier ansehen – buy-and-fly.fafn.ru/
Meine Gruppen: Telegram, Medium, VK, x.com, LinkedIn, Site
Das obige ist der detaillierte Inhalt vonEntwicklung von Anwendungsseiten. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!
