應用程式頁面開發
- DDD原創
- 2024-09-13 22:15:02645瀏覽
如果您查看原始項目，您會發現我們需要建立一個主頁。
航班、飯店和旅遊的搜尋結果僅在形式上有所不同。因此，進行多次實現是沒有意義的。
讓我們建立一個函式庫：
mkdir src/app/home mkdir src/app/home/page mkdir src/app/home/page/lib echo >src/app/home/page/index.ts
生成組件：
yarn ng g c home-page
由於主頁上的區塊可能會發生變化，我們將它們單獨移動到 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
指定別名：
"@baf/home/page": ["src/app/home/page/index.ts"], "@baf/home/ui/widgets": ["src/app/home/ui/widgets/index.ts"],
考慮 ConnectComponent。
讓我們運行命令：
yarn ng g c 應用程式頁面開發
標記：
<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/應用程式頁面開發.svg" style="max-width:90%" style="max-width:90%" alt="應用程式頁面開發">
</baf-card>
一些款式：
@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;
}
}
邏輯：
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-應用程式頁面開發',
standalone: true,
imports: [NgOptimizedImage, TitleComponent, HeadlineComponent, CardComponent, AnchorComponent, RouterLink, PathPipe],
templateUrl: './應用程式頁面開發.component.html',
styleUrl: './應用程式頁面開發.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>
對於所有其他小部件也是如此。
從範例中可以看出，使用了本地化。為了讓它工作，你需要導入@angular/localize。
yarn ng add @angular/localize
或全部手工完成。
將套件加入 package.json - @angular/localize。
然後我們在 main.ts 和 main.server.ts 檔案中指定類型：
/// <reference types="@angular/localize"></reference>
擴展polyfills：
{
"polyfills": ["zone.js", "@angular/localize/init"]
}
稍微更改 tsconfig.app.json 和 tsconfig.spec.json：
{
"types": ["node", "@angular/localize"]
}
在主頁上顯示小工具：
<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-></baf->
</baf-container>
</baf-section>
<baf-section bafcolor="smoke">
<baf-container>
<baf-questions></baf-questions>
</baf-container>
</baf-section>
讓我們連接它們：
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 {}
現在頁：
mkdir src/app/routes echo >src/app/routes/home.routes.ts
建立路線：
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),
},
];
在 app.routes.ts 中：
{
path: '',
loadChildren: () => import('./routes/home.routes').then((m) => m.homeRoutes),
}
讓我們啟動我們的應用程式。
錯誤
如果用戶點擊不存在的鏈接，那麼默認情況下路由器將拋出異常
讓我們建立一個函式庫，在其中放置基本的 HTTP 錯誤：403、404 和 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
所有頁面都將相似。
為未找到建立範本：
<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 {}
新增帶有連結的公共元件：
mkdir src/app/errors/ui mkdir src/app/errors/ui/lib echo >src/app/errors/ui/index.ts
運行指令：
yarn ng g c errors-link
將錯誤連結移至 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',
},
];
}
讓我們定義錯誤的路徑errors.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),
},
];
在 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),
},
],
},
];
正在開發的部分
讓我們新增一個將用作佔位符的技術頁面。
mkdir src/app/development mkdir src/app/development/page mkdir src/app/development/page/lib echo >src/app/development/page/index.ts
新增組件：
<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 {}
在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),
},
];
連接app.routes.ts中的所有路線。
接下來，我們來實現搜尋。
連結
所有來源都在 github 上的儲存庫 - github.com/Fafnur/buy-and-fly
您可以在這裡觀看示範 - buy-and-fly.fafn.ru/
我的群組：telegram、medium、vk、x.com、linkedin、site
以上是應用程式頁面開發的詳細內容。更多資訊請關注PHP中文網其他相關文章！
陳述：
本文內容由網友自願投稿，版權歸原作者所有。本站不承擔相應的法律責任。如發現涉嫌抄襲或侵權的內容，請聯絡admin@php.cn