Hogyan építsünk egy teljes oldalú weboldalt szögletes

Sep 11, 2025

kézikönyv

Page 1 of 4:

1 oldal

1 oldal
2. oldal
3. oldal
Page 4

A szögletes változatát gyakran úgy gondolják, mint egy olyan keret, amely a pályák vállalati oldaláról származik, és általában élvezi az üzleti alkalmazások sorát. Bár igaz, hogy a szögletesen kialakult egy olyan platformból, amely támogatja az összesféle alkalmazást, sok igazán csodálatos tulajdonság van, amelyek a fejlesztők számára léteznek a felhasználók számára.

Ez az első rész egy sorozatban, hogyan építsünk egy teljes oldalas animációs weboldalt szögben. Elkezdjük kiállítani egy teljes oldalú webhelyet, majd animáljuk a következő részletben.

Ebben a bemutatóban elsősorban a szögletes darabokra összpontosítunk, és a HTML és a CSS részekről beszélünk, amelyek közvetlenül nem kapcsolódnak az alkalmazás építéséhez. Kérjük, töltse le a forráskód követni. Nem értékesített szögletes? Találja a tökéletes weboldal építője itt (és az alábbi legjobb árak).

01. Hozzon létre egy projektet

Van egy csomó mozgó alkatrész, amely belép egy nem triviális webes alkalmazásba. Milyen függőséggel rendelkezik az alkalmazással? Hogyan fogod helyben futtatni? Hogyan fogod tesztelni? Hogyan fogsz kötegelni az eszközöket

Szerencsére ezeknek az elemeknek az összetett folyamatának összetett folyamata szem előtt van, a @ szögletes / cli . A terminálunkból csak néhány parancsban teljesen működőképes szögletes alkalmazást kaphatunk, hogy dolgozzunk.

Az első lépés a CLI-vel való együttműködéshez az, hogy telepítse. Ehhez használja az alábbi parancsot:

npm install -g @angular/cli

Miután a CLI telepítve van, a parancssorból navigálhatunk a projektünkbe telepítendő mappába. Innen futunk ng új A projektünk nevével. Ez létrehoz egy mappát azonos nevű, amelyet a projekt befejezése után navigálunk.

 CD & lt; az Ön-projektek-mappa & gt;
ng új szögletes animációi
CD szögletes animációk-helyszín

És ez az! A szögletes alkalmazásunk készen áll a futtatásra. Elindíthatja az alkalmazást NPM indítása vagy ng szolgálja . Én inkább használom NPM indítása Mert hagyományosabb, és lehetővé teszi számomra, hogy további parancsokat adjak hozzá. Ezután navigálhat http: // localhost: 4200 az alkalmazás futása.

The stock Angular CLI application running — Az állomány szögletes CLI alkalmazás fut

02. Tartalmazza animációkat és szögletes anyagot

Mert szeretjük a szép dolgokat, néhány kis kiegészítést fogunk tenni az alkalmazásunk hozzáadásával és telepítésével @ szögletes / animációk és @ szögletes / anyag Csomagok:

 NPM I --Save @ szögletes / anyag @ szögletes / animációk

Hagyjuk, hogy a szögletes ismerje ezeket a függőségeket, hozzáadásával app.module.ts fájl. Szögletes anyaggombot, kártyát és eszköztárat fogunk használni, így importáljuk a megfelelő modulokat, valamint a BROESERANIMATIONSMODULE .

 // app / app.module.ts
...
import {mdbuttonmodule, mdcardmodule, mdtoolbarmodule} '@ szögletes / anyagból';
Import {BrowseranimationsModule} "@ szögletes / platform-böngésző / animációk";

Ezután hozzáadhatjuk őket a behozatal tömb a mi Ngmodule nyilatkozat.

 // app / app.module.ts
...
import {mdbuttonmodule, mdcardmodule, mdtoolbarmodule} '@ szögletes / anyagból';
Import {BrowseranimationsModule} "@ szögletes / platform-böngésző / animációk";

@Ngmodule ({
  ...
  Import: [
    ...
    BrowseranimationsModule,
    Mdoolbarmodule,
    Mdbuttonmodule,
    Mdcardmodule
  ],
  ...
})

És egy végső kiegészítésre, az indigó rózsaszín témát importálunk styles.css fájl.

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

Ettől a pontig teljesen összpontosítottunk az alkalmazás létrehozására, hogy elkezdhessük a fejlődést. Ezek a parancsok elsődlegesnek tűnhetnek, de ha megszokta őket, meg fogod találni, hogy csak pár percet vesz igénybe, hogy teljesen kiépített környezet legyen az összes csengővel és sípokkal, amelyekre szükségünk van egy édes weboldalra.

03. Illessze be az oldalösszetevőt

Mivel egy szögletes weboldalt építünk, be kell vezetnünk egy mechanizmust az oldalaink megjelenítéséhez. Szögletben az alkalmazás atomépítő blokkja az összetevő. By architecting mi alkalmazás jól meghatározott, tokozott alkatrészek, képesek vagyunk, hogy könnyen újrafelhasználás alkalmassága, valamint levélírás új funkciók bevezetésével új alkatrészeket.

A CLI-hajók generátorral támogatják a dobozt a dobozból, és ez az, amit használunk az oldal összetevőjének létrehozásához. Az alábbi paranccsal (a g parancs rövidítés generál ).

 NG G Component Page

Megjegyzés: Azt javasoljuk, hogy az idő, hogy megtanulják, hogyan kell építeni a nagy szögletes darabok kézzel, amíg nem épül fel az izom memória. Ez csak akkor, ha igazán érti, hogy mi történik, hogy optimalizálja a munkafolyamat generátorokkal.

A CLI létrehoz egy mappát a src Könyvtár neve oldal HTML, CSS és TypeScript fájl, valamint specifikus fájl. Miénkben PageComponent.ts Fájl, van egy összetevő alapszerkezete. Komponensünk hivatkozik sablonunkra és stílusfájljainkra a @Összetevő metaadatok és a miénk konstruktőr és ngonit A módszerek ki vannak zárva.

 // App / Page / PageComponent.Ts

Import {komponens, oninit} "@ szögletes / mag";

@Összetevő({
  Választó: "App-Page",
  templateurl: './page.covponent.html',
  STYLEURLS: ['./Page.Component.css']})
Export osztály PageComponent Mephlement Oninit {

  konstruktor () {}

  ngoninit () {}
}

A komponensünk létrehozásával együtt a CLI módosítja a miénket app.module.ts a Pagecomponent belépés a miénken nyilatkozatok sor. Ez azt jelenti, hogy az oldalkomponensünk az egész modulban elérhető.

 // app / app.module.ts

@Ngmodule ({
  Nyilatkozatok: [
    AppComponent,
    Pagecomponent
  ],
  ...
})

Mint egy szentségellenőrzés, akkor fel tudjuk ugrani app.coreent.html fájl és add hozzá & lt; App-Page & GT; & lt; / app-page & gt; alul. Észre, hogy az általunk használt elemcímke megfelel a választó az ingatlanunkban definiált @Összetevő metaadatok.

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

& lt; h1 & gt;
  {{cím}}
& lt; / h1 & gt;

& lt; App-Page & GT; & lt; / app-page & gt;

The page component rendering in our main application component — Az oldal összetevője a fő alkalmazási összetevőnkben

04. Építsd ki az oldalösszetevőt

Az oldal összetevőjével élve és jól, felépíthetjük, így úgy néz ki, mint egy tényleges weboldal. Bemutatjuk a oldal megár cím , felirat , tartalom és kép Tulajdonságok.

 // App / Page / PageComponent.Ts

Export osztály PageComponent Mephlement Oninit {
  oldal = {
    Cím: "Otthon",
    Subtitle: "Üdvözöljük otthon!",
    Tartalom: "Néhány otthoni tartalom".,
    Image: 'assets / bg00.jpg'
  };

  konstruktor () {}

  ngoninit () {}
}

The styled page component with Angular Material — A stílusos anyag összetevője szögletes anyaggal

Frissítjük a sablonunkat, hogy kötődjünk a oldal tárgy. Van egy képelem, amelyet végül bővíteni kell, hogy kitöltse a teljes böngészőablakot. Szintén hozzáadunk egy szögletes anyagkártya-összetevőt is, hogy megkötjük a többi részünket oldal tiltakozni.

 & Lt;! - App / Page / PageComponent.html - & gt;
& lt; img osztály = "fullbg" [src] = "page.image" & gt;

& lt; md-card & gt;
& lt; md-card-header & gt;
& lt; md-card-cím & gt; h1 & gt; {{page.title}} & lt; / h1 & gt; / md-kártya címe & gt;
& lt; md-card-subtitle & gt; {{page.subtitle}} & lt; / md-card-subtitle & gt;
& lt; / md-card-header & gt;
& lt; md-card-tartalom & gt;
{{Page.Content}}
& lt; / md-kártya-tartalom & gt;
& lt; / md-kártya & gt;

Az oldalösszetevőnk sokkal jobban néz ki! A következő lépés az, hogy adjunk a képesség, hogy több oldalt, és keresse közöttük.

2. oldal: Hogyan készítsünk több oldalt

1
2
Három
4

Aktuális oldal: 1 oldal

Következő oldal 2. oldal

Hogyan építsünk egy teljes oldalú weboldalt szögletes

01. Hozzon létre egy projektet

02. Tartalmazza animációkat és szögletes anyagot

03. Illessze be az oldalösszetevőt

04. Építsd ki az oldalösszetevőt

kézikönyv - Most Popular Articles

Facebook Adatvédelmi beállítások: Hogyan tartsuk meg profilját Privát

Mindössze annyit kell tudnod, hogy a JavaScript kód felosztása

Hogyan készítsünk belső tereket Blender Eevee-vel

Hogyan lehet végrehajtani a könnyű vagy sötét módokat a CSS-ben

Hozzon létre egy festői érzést a digitális művészetben

Hozzon létre egy splash effektust a realflow-ban

Hogyan kell használni a stock fotókat Kreatívan a tervezési munkádban

15 tipp a kereszt-eszközoptimalizáláshoz

Kategóriák