Jak vytvořit celou stránku webové stránky v úhlovém

Sep 11, 2025

jak

Strana 1 z 4:

Strana 1

Strana 1
Stránka 2.
Strana 3.
Stránka 4.

Nejnovější verze úhlové je často považována za rámec, který pochází z podnikové strany tratí a obecně se těší na linku obchodních aplikací. I když je pravda, že úhlová úhlová skutečně se vyvinula z rámce na platformu, která podporuje všechny druhy aplikací, existuje mnoho opravdu úžasných funkcí, které pro vývojáře existují pro vývojáře pro vytváření pohlavních zkušeností pro své uživatele.

Toto je první část v sérii, jak vytvořit celou stránku animované webové stránky v úhlové části. Začneme budováním plnopisných webových stránek a pak jej oživit v následující splátce.

V tomto tutoriálu se budeme zaměřovat především na úhlové kousky a předchozí mluví o částech HTML a CSS, které se přímo týkají výstavby aplikace. Stáhněte si prosím zdrojový kód následovat. Není prodáván na hraně? Najít perfektní Webové stránky Builder. zde (a nejlepší ceny níže).

01. Vytvořte projekt

Existuje mnoho pohyblivých částí, které jdou do non-triviální webové aplikace. Jaké závislosti má vaše žádost? Jak to budete běžet lokálně? Jak to budete testovat? Jak se chystáte svazovat své aktivy

Naštěstí je komplexní proces kompozice těchto prvků řešeno mimo dohled, v @ Angular / Cli . Za pouhých několika příkazů z našeho terminálu můžeme mít plně funkční úhlovou aplikaci připravenou pro nás pracovat.

Prvním krokem k práci s CLI je instalovat. Pro to použijte příkaz níže:

npm install -g @angular/cli

Jakmile je CLI nainstalován, z příkazového řádku můžeme přejdeme do složky, kterou chceme nainstalovat náš projekt dovnitř. Odtud budeme běžet ng new. S názvem našeho projektu. To vytvoří složku s stejným názvem, který navigujeme do dokončení projektu.

 CD & lt; vaše-projekty-složka a gt;
ng nové úhlové animace-místo
CD úhlové animace-místo

A to je to! Naše úhlová aplikace je připravena běžet. Můžete si buď spustit aplikaci NPM START. nebo ng sloužit. . Dávám přednost použití NPM START. Protože je to více konvenční a umožňuje mi přidat další příkazy. Pak můžete navigovat http: // localhost: 4200 Chcete-li zobrazit běh aplikace.

The stock Angular CLI application running — Skladová aplikace CLI běží

02. Zahrnout animace a úhlový materiál

Protože se nám líbí krásné věci, budeme dělat několik malých doplňků k naší aplikaci přidáním a instalací @ úhlové / animace a @ úhlový / materiál balíčky:

 NPM I --Save @ Angular / Materiál @ Angular / Animace

Můžeme nechat úhlové vědět o těchto závislostech tím, že je přidáte do našeho App.Module.ts. soubor. Budeme používat tlačítko úhlového materiálu, karty a panelu nástrojů, takže budeme dovážet své moduly stejně jako BrowserImationsModule. .

 // app / app.module.ts
...
import {mdbuttonmodule, mdcardmodule, mdtoolbarmodule} z '@ úhlový / materiál';
Import {BrowserSanimationSModule} z '@ úhlové / platformy-prohlížeče / animace ";

Můžeme je přidat do dovoz pole s naším. Ngmodule prohlášení.

 // app / app.module.ts
...
import {mdbuttonmodule, mdcardmodule, mdtoolbarmodule} z '@ úhlový / materiál';
Import {BrowserSanimationsModule} z '@ úhlový / platformový prohlížeč / animace ";

@Ngmodule ({
  ...
  Dovoz: [
    ...
    BrowserImationsMateMate,
    Mdtoolbarmodule,
    Mdbuttonmodule,
    Mdcardmodule
  Zaujatý
  ...
})

A pro jeden konečný doplněk importujeme indigo růžové téma do našeho styles.css. soubor.

 / * styles.css * /
@Import '~@angular/material/prebuilt-themes/indigo-pink.css';

Až do tohoto bodu jsme se zaměřili výhradně na zřízení aplikace, abychom mohli začít rozvíjet. Tyto příkazy se mohou cítit neohrabaně nejprve, ale jakmile jste si na ně zvykli, zjistíte, že trvá jen pár minut, než budete mít plně vybudované prostředí se všemi zvony a píšťalky, které potřebujeme vybudovat sladkou webovou stránku.

03. Zavést složku stránky

Protože budujeme webovou stránku s úhlem, budeme muset představit mechanismus pro zobrazení našich stránek. V úhlovém bloku aplikace atomový stavba aplikace je součástí. Architektivním aplikací s dobře definovanými zapouzdřenými komponentami jsme schopni snadno znovu použít funkčnost, stejně jako vytváření nových funkcí zavedením nových komponent.

CLI lodě s podporou generátoru přímo z krabice, a to je to, co používáme k vytvoření naší stránky komponenty. Komponentu stránky můžeme generovat spuštěním příkazu níže ( G Příkaz je zkratka generovat ).

 ng g Page

Poznámka: Doporučuji vzít čas naučit se vytvořit hlavní úhlové kousky ručně, dokud nebudete vybudovat svou svalovou paměť. Je to jen tehdy, když opravdu pochopíte, co se děje, že byste měli optimalizovat váš pracovní postup s generátory.

CLI generuje složku v SRC. adresář pojmenovaný strana S souborem HTML, CSS a Typopisu, stejně jako spec. V našem page.component.ts. Soubor máme základní strukturu komponenty. Naše komponenta odkazuje na naše šablony a stylové soubory v @Komponent Metadata a má naše konstruktor a ngonit. metody stubbed.

 // Aplikace / stránka / page.comSponent.ts

import {komponenty, onInit} z '@ úhlové / jádro';

@Komponent({
  volič: 'app-page',
  templateurl: './page.component.html',
  STYLEURLS: ['./page.component.css']})
Export třída PAGECOMPONENT implementuje oninit {

  konstruktor () {}

  ngoninit () {}
}

Spolu s generováním naší komponenty bude CLI také modifikovat naše App.Module.ts. zahrnout A. Pagecomponent. vstup do našeho prohlášení pole. To znamená, že naše složka stránky je nyní k dispozici v celém modulu.

 // app / app.module.ts

@Ngmodule ({
  Prohlášení: [
    Appcomponent,
    Pagecomponent.
  Zaujatý
  ...
})

Jako kontrola zdravého rozhovoru můžeme hope do našeho app.component.html. Soubor a Přidat & lt; app-page & gt; & lt; / app-page & gt; ke dnu. Všimněte si, že tag prvku používáme, odpovídá volič vlastnost definovaná v našich @Komponent metadata.

 & lt;! - app / app.Component.html - & gt;

& lt; h1 & gt;
  {{titul}}
& lt; / h1 & gt;

& lt; app-page & gt; & lt; / app-page & gt;

The page component rendering in our main application component — Vykreslování komponenty stránky v naší hlavní aplikační komponentu

04. Vyberte si složku stránek

S naší stránkou komponenty naživu a dobře, můžeme ho postavit, takže začíná vypadat jako skutečná webová stránka. Představíme strana objekt s. \ t titul , podtitul , obsah , a obraz vlastnosti.

 // Aplikace / stránka / page.comSponent.ts

Export třída PAGECOMPONENT implementuje oninit {
  Page = {
    Název: 'Domů',
    SUBTITLE: 'Vítejte doma!',
    Obsah: "Nějaký domácí obsah."
    Obrázek: "Aktiva / bg00.jpg"
  };

  konstruktor () {}

  ngoninit () {}
}

The styled page component with Angular Material — Stylovaná složka stránky s úhlovým materiálem

Budeme aktualizovat naši šablonu, abychom se váže na strana objekt. Existuje obrazový prvek, který bude nakonec rozšířen, aby zaplnil celé okno prohlížeče. Jdeme také přidat do složky úhlové materiálové karty, kterou budeme svázat zbytek našeho strana objekt.

 & lt;! - Aplikace / stránka / page.component.html - & gt;
& lt, img třída = "fulebg" [src] = "page.image" & gt;

& lt; md-card & gt;
& lt; md-card-header & gt;
& lt, md-card-title & gt; {{page.title}} & lt; / h1 & gt; & lt; / md-card-title & gt;
& lt, md-card-titulek & gt; {{page.subtitle}} & lt; / md-card-titulek & gt;
& lt; / md-card-header & gt;
& lt, md-card-content & gt;
{{page.Content}}
& lt; / md-card-content & gt;
& lt; / md-card & gt;

Naše stránka komponenta začíná vypadat mnohem lépe! Náš dalším krokem je přidat možnost mít více stránek a pohybovat se mezi nimi.

Page 2: Jak vytvořit více stránek

Aktuální stránka: Strana 1

Další strana Stránka 2.

Jak vytvořit celou stránku webové stránky v úhlovém

01. Vytvořte projekt

02. Zahrnout animace a úhlový materiál

03. Zavést složku stránky

04. Vyberte si složku stránek

jak - Nejoblíbenější články

Jak se vyhnout Amazon Prime Day 2020 FAIL

Použijte WordPress jako bezhlavé CMS

Jak nakreslit velkou kočku s pastely

Jak nakreslit nos

Malování řízené a hladké tahy s náčrtavou

Jak vytvořit 3D nápisy v Illustrator

Použijte částice pro vytvoření 3D splash

5 způsobů, jak efektivně řídit Cashflow

Kategorie