지역 사회 배우다 도구 라이브러리 여가
찾다
한국어
집 > 웹 프론트엔드 > JS 튜토리얼 > Angular 18용 기본 프레임워크 만들기

Angular 18용 기본 프레임워크 만들기

DDD
풀어 주다： 2024-09-13 22:16:32
원래의
485명이 탐색했습니다.

Создание базовой структуры для Angular 18

이전에는 새로운 Angular 프로젝트를 생성하고 설정하는 방법을 살펴보았습니다. 이번 글에서는 기본적인 구조를 분석해보겠습니다.

이 시리즈는 항공권과 호텔을 검색하기 위한 웹 애플리케이션 개발에 전념하고 있음을 상기시켜 드리겠습니다. 이 프로젝트는 Alfa Travel의 프로젝트인 travel.alfabank.ru를 기반으로 합니다

사이트는 다음 블록으로 구성됩니다.

  • 두 개의 화면: 모바일 버전과 브라우저 버전
  • 형태가 변경되는 블록이 있는 4개의 메인 페이지;
  • 기술 섹션;
  • 티켓 및 호텔 검색
  • http 오류 - 404, 403 및 500을 표시합니다.

이를 통해 주요 부분을 강조할 수 있습니다.

  • 머리글, 내용, 바닥글이 포함된 기본 레이아웃
  • 필수 양식을 표시하는 유일한 기본 항목
  • 검색결과.

AppComponent 설정

routerOutlet만 출력하도록 AppComponent를 변경합니다.

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

@Component({
  selector: 'baf-root',
  standalone: true,
  imports: [RouterOutlet],
  template: '<router-outlet/>',
  changeDetection: ChangeDetectionStrategy.OnPush,
})
export class AppComponent {}
로그인 후 복사
app.config.browser.ts에 브라우저 버전 구성을 추가하세요.


main.ts로 가져옵니다.
import { ApplicationConfig, mergeApplicationConfig } from '@angular/core';
import { provideAnimations } from '@angular/platform-browser/animations';

import { appConfig } from './app.config';

const browserConfig: ApplicationConfig = {
  providers: [provideAnimations()],
};

export const config = mergeApplicationConfig(appConfig, browserConfig);
로그인 후 복사


hammerjs 추가 
import { bootstrapApplication } from '@angular/platform-browser';

import { AppComponent } from './app/app.component';
import { config } from './app/app.config.browser';

bootstrapApplication(AppComponent, config).catch((err) => console.error(err));
로그인 후 복사

모바일 버전에서는 터치와 스와이프로 작업해야 하므로 hammerjs를 사용합니다

종속성 설치:


브라우저에서 animation과 hammerjs를 연결하세요:
yarn add -D hammerjs @types/hammerjs
로그인 후 복사


hammerjs에 대한 구성을 설정해야 합니다.
import 'hammerjs';

import { ApplicationConfig, mergeApplicationConfig } from '@angular/core';
import { provideAnimations } from '@angular/platform-browser/animations';

import { appConfig } from './app.config';

const browserConfig: ApplicationConfig = {
  providers: [provideAnimations()],
};

export const config = mergeApplicationConfig(appConfig, browserConfig);
로그인 후 복사

프로젝트의 필수적인 부분을 모두 저장할 새 코어 폴더를 만듭니다.


hammer.ts에서 다음 구성을 지정합니다.
mkdir src/app/core
mkdir src/app/core/lib
echo >src/app/core/index.ts
mkdir src/app/core/lib/hammer
echo >src/app/core/lib/hammer/hammer.ts
로그인 후 복사


src/app/core/index.ts로 내보내기:
import { EnvironmentProviders, importProvidersFrom, Injectable, Provider } from '@angular/core';
import { HAMMER_GESTURE_CONFIG, HammerGestureConfig, HammerModule } from '@angular/platform-browser';

@Injectable()
export class HammerConfig extends HammerGestureConfig {
  override overrides = {
    swipe: { velocity: 0.4, threshold: 20 },
    pinch: { enable: false },
    rotate: { enable: false },
  };
}

export function provideHammer(): (Provider | EnvironmentProviders)[] {
  return [
    importProvidersFrom(HammerModule),
    {
      provide: HAMMER_GESTURE_CONFIG,
      useClass: HammerConfig,
    },
  ];
}
로그인 후 복사


빠른 액세스를 위해 tsconfig.json에 별칭을 추가하세요.
export * from './lib/hammer/hammer';
로그인 후 복사


{
  "compileOnSave": false,
  "compilerOptions": {
    "outDir": "./dist/out-tsc",
    "strict": true,
    "noImplicitOverride": true,
    "noPropertyAccessFromIndexSignature": true,
    "noImplicitReturns": true,
    "noFallthroughCasesInSwitch": true,
    "skipLibCheck": true,
    "esModuleInterop": true,
    "sourceMap": true,
    "declaration": false,
    "experimentalDecorators": true,
    "moduleResolution": "bundler",
    "importHelpers": true,
    "target": "ES2022",
    "module": "ES2022",
    "useDefineForClassFields": false,
    "lib": ["ES2022", "dom"],
    "baseUrl": ".",
    "paths": {
      "@baf/core": ["src/app/core/index.ts"]
    }
  },
  "angularCompilerOptions": {
    "enableI18nLegacyMessageIdFormat": false,
    "strictInjectionParameters": true,
    "strictInputAccessModifiers": true,
    "strictTemplates": true
  }
}
로그인 후 복사
baseUrl도 지정해야 합니다.

브라우저 버전에서 연결:


레이아웃 만들기 
import { ApplicationConfig, mergeApplicationConfig } from '@angular/core';
import { provideAnimations } from '@angular/platform-browser/animations';

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

import { appConfig } from './app.config';

const browserConfig: ApplicationConfig = {
  providers: [provideAnimations(), provideHammer()],
};

export const config = mergeApplicationConfig(appConfig, browserConfig);
로그인 후 복사

레이아웃은 전체 웹 애플리케이션에 공통됩니다. 구성 요소를 저장할 새 UI 폴더를 추가해 보겠습니다.


다음 명령을 실행하세요.
mkdir src/app/ui
mkdir src/app/ui/layout/lib
echo >src/app/ui/layout/index.ts
로그인 후 복사


콘텐츠를 src/app/ui/layout/lib로 이동하세요.
yarn ng g c layout
로그인 후 복사

필요한 속성 없이 테스트 파일을 사용하여 모든 것이 생성되는 것을 볼 수 있습니다.


angular.json에서 다음 속성을 지정합니다.
import { Component } from '@angular/core';

@Component({
  selector: 'baf-layout',
  standalone: true,
  imports: [],
  templateUrl: './layout.component.html',
  styleUrl: './layout.component.scss'
})
export class LayoutComponent {}
로그인 후 복사


레이아웃 구성요소 편집:
{
  "@schematics/angular:component": {
    "style": "scss",
    "changeDetection": "OnPush",
    "skipTests": true
   }
}
로그인 후 복사


머리글, 내용, 바닥글 추가:
import { ChangeDetectionStrategy, Component } from '@angular/core';
import { RouterOutlet } from '@angular/router';

@Component({
  selector: 'baf-results',
  standalone: true,
  imports: [RouterOutlet],
  templateUrl: './layout.component.html',
  styleUrl: './layout.component.scss',
  changeDetection: ChangeDetectionStrategy.OnPush,
})
export class LayoutComponent {}
로그인 후 복사


몇 가지 스타일:
<router-outlet name="top" />
<header>
  <router-outlet name="header" />
</header>
<main>
  <router-outlet name="main-top" />
  <router-outlet />
  <router-outlet name="main-bottom" />
</main>
<footer>
  <router-outlet name="footer" />
</footer>
<router-outlet name="bottom" />
로그인 후 복사


구성요소를 src/app/ui/layout/index.ts로 내보냅니다.
:host {
  display: flex;
  min-height: 100vh;
  flex-direction: column;
}

header,
footer {
  flex-shrink: 0;
}

main {
  flex-grow: 1;
  overflow-x: hidden;
}
로그인 후 복사


그리고 tsconfig.json에 별칭을 작성하세요.
export * from './lib/layout.component';
로그인 후 복사


스타일 재설정 
{
  "paths": {
     "@baf/core": ["src/app/core/index.ts"],
     "@baf/ui/layout": ["src/app/ui/layout/index.ts"]
  }
}
로그인 후 복사

레이아웃을 표시하기 전에 애플리케이션에서 스타일을 구성해야 합니다.

브라우저의 기본 모양을 재설정하려면 다음을 수행하세요.


재설정은 styles.scss에 저장됩니다.
/* You can add global styles to this file, and also import other style files */
@use '@angular/cdk' as cdk;

// Hack for global CDK dialogs styles
@include cdk.overlay();

*,
*::before,
*::after {
  box-sizing: border-box;
}

html {
  -moz-text-size-adjust: none;
  -webkit-text-size-adjust: none;
  text-size-adjust: none;
}

blockquote {
  margin: 0;
  padding: 1rem;
}

h1 {
  margin-block-start: 1.45rem;
  margin-block-end: 1.45rem;
}

h2 {
  margin-block-start: 1.25rem;
  margin-block-end: 1.25rem;
}

h3 {
  margin-block-start: 1.175rem;
  margin-block-end: 1.175rem;
}

h4 {
  margin-block-start: 1.15rem;
  margin-block-end: 1.15rem;
}

figure {
  margin: 0;
}

p {
  margin-block-start: 1rem;
  margin-block-end: 1rem;
}

ul[role='list'],
ol[role='list'] {
  list-style: none;
}

body {
  margin: 0;
  min-height: 100vh;
  line-height: 1.5;
  font-family:
    Arial,
    ui-sans-serif,
    system-ui,
    -apple-system,
    BlinkMacSystemFont,
    sans-serif;
  font-size: 16px;
}

h1,
h2,
h3,
h4,
button,
input,
label {
  line-height: 1.1;
}

h1,
h2,
h3,
h4 {
  text-wrap: balance;
}

a:not([class]) {
  text-decoration-skip-ink: auto;
  color: currentColor;
}

img,
picture {
  max-width: 100%;
  display: block;
}

input,
button,
textarea,
select {
  font: inherit;
}

textarea:not([rows]) {
  min-height: 10rem;
}

:target {
  scroll-margin-block: 5ex;
}
로그인 후 복사

index.html 편집:


생성된 파비콘을 공개 및 기타 파일에 추가하세요.
<!doctype html>
<html lang="en">
  <head>
    <meta charset="utf-8" />
    <title>BuyAndFly</title>
    <base href="/" />
    <meta name="viewport" content="width=device-width, initial-scale=1" />
    <link rel="preconnect" href="https://fonts.googleapis.com" />
    <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin />
    <link href="https://fonts.googleapis.com/css2?family=Roboto:wght@300;400;500&display=swap" rel="stylesheet" />
    <meta name="description" content="Example Angular 18 application for search for cheap flights and hotels." />
    <link rel="preconnect" href="https://photo.hotellook.com" />
    <link rel="apple-touch-icon" sizes="180x180" href="/favicons/apple-touch-icon.png" />
    <link rel="icon" type="image/png" sizes="32x32" href="/favicons/favicon-32x32.png" />
    <link rel="icon" type="image/png" sizes="16x16" href="/favicons/favicon-16x16.png" />
    <link rel="manifest" href="/site.webmanifest" />
    <link rel="mask-icon" href="/favicons/safari-pinned-tab.svg" color="#172659" />
    <meta name="msapplication-config" content="/browserconfig.xml" />
    <meta name="msapplication-TileColor" content="#172659" />
    <meta name="theme-color" content="#ffffff" />
  </head>
  <body>
       <baf-root></baf-root>
  </body>
</html>
로그인 후 복사

browserconfig.xml

: 

<?xml version="1.0" encoding="utf-8"?>
<browserconfig>
    <msapplication>
        <tile>
            <square150x150logo src="/favicons/mstile-150x150.png"/>
            <TileColor>#172659</TileColor>
        </tile>
    </msapplication>
</browserconfig>
로그인 후 복사
site.webmanifest

: 

{
    "name": "Buy & Fly",
    "short_name": "Buy & Fly",
    "icons": [
        {
            "src": "/favicons/android-chrome-192x192.png",
            "sizes": "192x192",
            "type": "image/png"
        },
        {
            "src": "/favicons/android-chrome-512x512.png",
            "sizes": "512x512",
            "type": "image/png"
        }
    ],
    "theme_color": "#ffffff",
    "background_color": "#ffffff",
    "display": "standalone",
    "start_url": ".",
    "description": "Search for cheap flights and hotels.",
    "categories": ["travel", "education"],
    "screenshots": [
      {
        "src": "screenshot.webp",
        "sizes": "1280x720",
        "type": "image/webp"
      }
    ]
}
로그인 후 복사
robots.txt

:

마지막에 src/app/app.routes.ts의 레이아웃을 사용합니다.
User-agent: *
Disallow: /api

User-agent: Yandex
Disallow: /api
Clean-param: bonus&utm_source&utm_medium&utm_campaign&utm_term&utm_content&click_id&appstore&platform

Host: https://buy-and-fly.fafn.ru
Sitemap: https://buy-and-fly.fafn.ru/sitemap.xml
로그인 후 복사


애플리케이션 실행:
import { Routes } from '@angular/router';

export const routes: Routes = [
  {
    path: '',
    loadComponent: () => import('@baf/ui/layout').then((m) => m.LayoutComponent),
    children: [],
  },
];
로그인 후 복사


yarn serve
로그인 후 복사
로그인 후 복사
흰 화면이 나옵니다 :)

Добавление шапки и футера

Создадим шапку и подвал:

yarn ng g c header
yarn ng g c footer
로그인 후 복사

Перенесем в ui/layout и экспортируем:

export * from './lib/footer/footer.component';
export * from './lib/header/header.component';
export * from './lib/layout.component';
로그인 후 복사

Подключим их в приложении:

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

export const routes: Routes = [
  {
    path: '',
    loadComponent: () => import('@baf/ui/layout').then((m) => m.LayoutComponent),
    children: [
      {
        path: '',
        loadComponent: () => import('@baf/ui/layout').then((m) => m.HeaderComponent),
        outlet: 'header',
      },
      {
        path: '',
        loadComponent: () => import('@baf/ui/layout').then((m) => m.FooterComponent),
        outlet: 'footer',
      },
    ],
  },
];
로그인 후 복사

Запустим проект:

yarn serve
로그인 후 복사
로그인 후 복사

Видим созданные компоненты.

В следующей статье добавим core сервисы и интерфейсы.

Ссылки

Все исходники находятся на github, в репозитории - github.com/Fafnur/buy-and-fly

Демо можно посмотреть здесь - buy-and-fly.fafn.ru/

Мои группы: telegram, medium, vk, x.com, linkedin, site

위 내용은 Angular 18용 기본 프레임워크 만들기의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!

원천：dev.to
이전 기사：JavaScript `string.replace()` 유용한 사례 다음 기사：Angular 18의 UI KIT 개발
본 웹사이트의 성명
본 글의 내용은 네티즌들의 자발적인 기여로 작성되었으며, 저작권은 원저작자에게 있습니다. 본 사이트는 이에 상응하는 법적 책임을 지지 않습니다. 표절이나 침해가 의심되는 콘텐츠를 발견한 경우 admin@php.cn으로 문의하세요.
저자별 최신 기사
최신 이슈
function_exists()는 사용자 정의 함수를 결정할 수 없습니다. 기능 테스트() {                                                                                ...
에서 2024-04-29 11:01:01
0
3
2064
Chrome 모바일 버전을 표시하는 방법 안녕하세요 선생님, Chrome을 모바일 버전으로 어떻게 변경하나요?
에서 2024-04-23 00:22:19
0
11
2226
자식 창이 부모 창을 작동하지만 출력이 응답하지 않습니다. 처음 두 문장은 실행 가능하지만 마지막 문장은 구현할 수 없습니다.
에서 2024-04-19 15:37:47
0
1
1872
상위 창에 출력이 없습니다. document.onclick = function(){ window.opener.document.write('나는 자식 창의 출력입니다.');
에서 2024-04-18 23:52:34
0
1
1754
CSS 마인드맵 코스웨어는 어디에 있나요? 코스웨어
에서 2024-04-16 10:10:18
0
0
1786
관련 주제
더>
인기 추천
인기 튜토리얼
더>
관련 튜토리얼
인기 추천
최신 강좌
최신 다운로드
더>
웹 효과
웹사이트 소스 코드
웹사이트 자료
프론트엔드 템플릿