애플리케이션 페이지 개발

원본 프로젝트를 보면 메인 페이지를 하나 만들어야 한다는 것을 알 수 있습니다.

항공편, 호텔, 투어에 대한 검색결과는 형식만 다릅니다. 따라서 여러 번 구현하는 것은 의미가 없습니다.

라이브러리를 만들어 봅시다:

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

메인페이지의 블록은 변경될 수 있으므로 홈/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 id="We-are-always-in-touch">We are always in touch</h2>
<baf-card>
  <div>
    <h3 id="Have-a-question-write">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 src="/static/imghwm/default1.png" data-src="/images/development.svg" class="lazy" ng    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": ["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 id="">404</h1>
  <h3 id="Page-not-found">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 id="Page-is-under-construction">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 src="/static/imghwm/default1.png" data-src="/images/development.svg" class="lazy" ng    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 중국어 웹사이트의 기타 관련 기사를 참조하세요!