社群 學習 工具庫 休閒
搜尋
繁体中文
首頁 > web前端 > js教程 > 為 Angular 18 創建基本框架

為 Angular 18 創建基本框架

DDD
發布： 2024-09-13 22:16:32
原創
481 人瀏覽過

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

之前，我們研究了建立和設定一個新的 Angular 專案。在這篇文章中我們將分析基本結構。

讓我提醒您，該系列致力於開發用於搜尋機票和飯店的網路應用程式。 基於 Alfa Travel 的專案 - Travel.alfabank.ru

網站由以下部分組成：

  • 兩個螢幕：行動版和瀏覽器版；
  • 4個主要頁面，其中表單區塊發生變化；
  • 技術部分；
  • 搜尋門票和飯店；
  • 顯示 http 錯誤 - 404、403 和 500。

這使我們能夠突出顯示主要部分：

  • 包含頁首、內容和頁尾的基本版面；
  • 唯一能顯示所需表格的主視窗；
  • 搜尋結果。

設定AppComponent

更改AppComponent，使其僅輸出routerOutlet。 

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.component.spec.ts、app.component.scss 和 app.component.html。

在app.config.browser.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);
登入後複製

並將其導入main.ts：

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

對於行動版本，我們需要觸控和滑動，因此我們使用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);
登入後複製

您需要設定hammerjs的配置。

建立一個新的核心資料夾，我們將在其中儲存專案不可或缺的所有內容。 

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
登入後複製

在hammer.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,
    },
  ];
}
登入後複製

匯出到 src/app/core/index.ts:

export * from './lib/hammer/hammer';
登入後複製

為了快速訪問，請向 tsconfig.json 添加別名：

{
  "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);
登入後複製

建立佈局

佈局對於整個 Web 應用程式是通用的。讓我們新增一個新的 UI 資料夾，我們將在其中儲存元件。 

mkdir src/app/ui
mkdir src/app/ui/layout/lib
echo >src/app/ui/layout/index.ts
登入後複製

運行指令：

yarn ng g c layout
登入後複製

將內容移到 src/app/ui/layout/lib。

我們看到所有內容都是在沒有我們需要的屬性和測試文件的情況下創建的：

import { Component } from '@angular/core';

@Component({
  selector: 'baf-layout',
  standalone: true,
  imports: [],
  templateUrl: './layout.component.html',
  styleUrl: './layout.component.scss'
})
export class LayoutComponent {}
登入後複製

在 angular.json 中我們將指定屬性：

{
  "@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" />
登入後複製

一些款式：

:host {
  display: flex;
  min-height: 100vh;
  flex-direction: column;
}

header,
footer {
  flex-shrink: 0;
}

main {
  flex-grow: 1;
  overflow-x: hidden;
}
登入後複製

將元件匯出到 src/app/ui/layout/index.ts:

export * from './lib/layout.component';
登入後複製

並在 tsconfig.json 中寫入別名：

{
  "paths": {
     "@baf/core": ["src/app/core/index.ts"],
     "@baf/ui/layout": ["src/app/ui/layout/index.ts"]
  }
}
登入後複製

重設樣式

在顯示佈局之前，您需要在應用程式中配置樣式。

要重設瀏覽器中的預設外觀，只需執行以下操作：

/* 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;
}
登入後複製

重置將被放置在 styles.scss 中。

編輯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:

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
登入後複製

最後我們使用 src/app/app.routes.ts 中的佈局：

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()無法判定自訂函數 function test()    {        return true;    }    if (function_exists('TEST')) {        ech...
來自於 2024-04-29 11:01:01
0
3
2052
google 瀏覽器 手機版顯示的怎麼實現 老師您好，google 瀏覽器怎麼變成手機版樣式的？
來自於 2024-04-23 00:22:19
0
11
2209
子窗口操作父窗口，輸出沒反應 前兩句可執行，最後一句沒辦法應
來自於 2024-04-19 15:37:47
0
1
1864
父視窗沒有輸出 document.onclick = function(){ window.opener.document.write('我是子視窗的輸出');                  ...
來自於 2024-04-18 23:52:34
0
1
1750
關於CSS心智圖的課件在哪？ 課件
來自於 2024-04-16 10:10:18
0
0
1772
相關專題
更多>
熱門推薦
熱門教學
更多>
相關教學
熱門推薦
最新課程
最新下載
更多>
網站特效
網站源碼
網站素材
前端模板