Hur man bygger en fullständig webbplats i vinkel

Sep 11, 2025

Hur

Sida 1 av 4:

Sida 1

Sida 1
Sida 2
Page 3
Page 4

Den senaste versionen av vinkeln anses ofta som en ram som kommer från företagets sida av spåren och har i allmänhet företaget av branschen. Medan det är sant att vinkeln verkligen har utvecklats från en ram till en plattform som stöder alla typer av applikationer, det finns många riktigt fantastiska funktioner som finns för utvecklare att skapa immersiva upplevelser för sina användare.

Detta är den första delen i en serie om hur man bygger en fullständig animerad webbplats i vinkeln. Vi börjar med att bygga ut en fullständig webbplats, och sedan animera den i följande avbetalning.

I den här handledningen kommer vi att fokusera främst på vinkelstyckena och förhandsgäst om HTML- och CSS-delarna som inte direkt hänför sig till konstruktionen av ansökan. Snälla ladda ner källkod att följa med. Inte såld på vinkel? Hitta den perfekta Website Builder här (och de bästa priserna nedan).

01. Skapa ett projekt

Det finns många rörliga delar som går in på en icke-trivial webbapplikation. Vilka beroenden har din ansökan? Hur ska du springa det lokalt? Hur ska du testa det? Hur ska du buntas dina tillgångar

Tack och lov, den komplexa processen att kompositera dessa element behandlas utom synhåll, i @ vinkel / cli . I bara några kommandon från vår terminal kan vi få en fullt fungerande vinkelapplikation redo för oss att arbeta med.

Det första steget att arbeta med CLI är att installera det. För detta, använd kommandot nedan:

npm install -g @angular/cli

När CLI är installerad, från kommandoraden kan vi navigera till den mapp vi vill installera vårt projekt. Därifrån kommer vi att springa ng ny med namnet på vårt projekt. Detta kommer att skapa en mapp med samma namn, som vi kommer att navigera till när projektet är klart.

 CD & LT; din-projekt-mapp och GT;
ng nya vinkelanimations-webbplats
CD-vinkelanimations-webbplats

Och det är det! Vår vinkelapplikation är klar att springa. Du kan antingen starta din ansökan med npm start eller ng tjäna . Jag föredrar att använda npm start Eftersom det är mer konventionellt och gör det möjligt för mig att lägga till i ytterligare kommandon. Du kan sedan navigera till http: // localhost: 4200 för att se programmet.

The stock Angular CLI application running — Lageret vinklade cli applicering körs

02. Inkludera animationer och vinkelmaterial

Eftersom vi gillar vackra saker, kommer vi att göra några små tillägg till vår ansökan genom att lägga till och installera @ vinkel / animationer och @ vinkel / material Paket:

 npm i - skaffa @ vinkel / material @ vinkel / animationer

Vi kan låta vinkeln veta om dessa beroenden genom att lägga dem till vår app.module.ts fil. Vi kommer att använda vinkelmaterialknapp, kort och verktygsfält, så vi kommer att importera sina respektive moduler såväl som BrowseranimationsModule .

 // app / app.module.ts
...
Importera {MdButtonmodule, MDCardmodule, MDToolBarmodule} från '@ vinkel / material';
Importera {BrowseranimationsModule} från '@ vinkel / plattform-webbläsare / animationer';

Vi kan sedan lägga till dem i import array med vår Ngmodule deklaration.

 // app / app.module.ts
...
Importera {MdButtonmodule, MDCardmodule, MDToolBarmodule} från '@ vinkel / material';
Importera {BrowseranimationsModule} från '@ vinkel / plattform-webbläsare / animationer';

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

Och för ett sista tillägg, kommer vi att importera det indigo rosa temat i vårt stilar.css fil.

 / * Styles.css * /
@import '~@angular/material/prebuilt-themes/indigo-pink.css';

Fram till denna punkt har vi helt fokuserat på att konfigurera programmet så att vi kunde börja utveckla. Dessa kommandon kan känna sig klumpiga först, men när du väl har vunnit dem hittar du det bara tar ett par minuter att ha en helt utbyggd miljö med alla klockor och visselpipor måste vi bygga en söt webbplats.

03. Introducera en sidkomponent

Eftersom vi bygger en webbplats med vinkel, måste vi introducera en mekanism för att visa våra sidor. I vinkeln är det atombyggnadsblocket av en applikation komponenten. Genom att arkitektera vår applikation med väldefinierade inkapslade komponenter kan vi enkelt återanvända funktionalitet, samt komponera ny funktionalitet, genom att introducera nya komponenter.

CLI-fartygen med generatorns stöd direkt ut ur lådan, och det här är det vi använder för att skapa vår sidkomponent. Vi kan generera vår sidkomponent genom att köra kommandot nedan (the g kommandot är stenografi för generera ).

 ng g komponent sida

Obs! Jag rekommenderar att du tar dig tid att lära dig hur du bygger de stora vinkelstyckena för hand tills du har byggt upp ditt muskelminne. Det är bara när du verkligen förstår vad som händer att du ska optimera ditt arbetsflöde med generatorer.

CLI kommer att generera en mapp i src katalog heter sida Med en HTML, CSS och Typescript-fil samt en Spec-fil. I vår sida.component.ts Fil, vi har den grundläggande strukturen hos en komponent. Vår komponent refererar till vår mall och stilfiler i @Komponent metadata och har vår konstruktör och nygnit metoderna stubbade ut.

 // app / page / page.component.ts

Importera {COMPONENT, ONINIT} från '@ vinkel / kärna';

@Komponent({
  väljare: "app-sida",
  Templateurl: './page.component.html',
  StyleUls: ['./page.component.css']})
Exportklass Pagecomponent implementerar Oninit {

  konstruktör () {}

  ngoninit () {}
}

Tillsammans med att generera vår komponent kommer CLI också att ändra vår app.module.ts att inkludera a Pagera inträde i vår deklarationer array. Det betyder att vår sidkomponent nu är tillgänglig i hela modulen.

 // app / app.module.ts

@Ngmodule ({
  Deklarationer: [
    Appkomponent,
    Pagera
  ]
  ...
})

Som en sanity check kan vi hoppa in i vår app.component.html fil och lägg till & lt; app-sida & lt; / app-sida & gt; till botten. Observera att elementetiketten vi använder motsvarar väljare egendom definierad i vår @Komponent metadata.

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

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

& lt; App-PAGE & GT;

The page component rendering in our main application component — Sidkomponenten Rendering i vår huvudsakliga applikationskomponent

04. Bygg ut din sidkomponent

Med vår sida komponent levande och bra kan vi bygga ut det så det börjar se ut som en verklig webbsida. Vi kommer att presentera en sida objekt med titel , texta , innehåll och bild egenskaper.

 // app / page / page.component.ts

Exportklass Pagecomponent implementerar Oninit {
  sida = {
    Titel: "Hem",
    Undertext: "Välkommen hem!",
    Innehåll: "Något heminnehåll.",
    Bild: "Tillgångar / bg00.jpg"
  };

  konstruktör () {}

  ngoninit () {}
}

The styled page component with Angular Material — Den stilade sidkomponenten med vinkelmaterial

Vi uppdaterar vår mall för att binda till sida objekt. Det finns ett bildelement som så småningom kommer att öka för att fylla i hela webbläsarfönstret. Vi kommer också att lägga till i en vinkelmaterialkortskomponent som vi kommer att binda resten av våra sida protestera mot.

 & lt;! - APP / SIDA / PAGE.PONENT.HTML - & GT;
& lt; img class = "fullbg" [src] = "sida.image" & gt;

& lt; MD-Card & GT;
& lt; MD-Card-Header & GT;
& lt; md-kort-titel & gt; & lt; h1 & gt; / h1 & gt; & lt; / md-card-title & gt;
& LT; MD-Card-Subtitle & GT; {{Sida.Subtitle}} & LT; / MD-Card-Subtitle & GT;
& LT; / MD-Card-header & GT;
& LT; MD-Card-Content & GT;
{{page.content}}
& LT; / MD-Card-Content & GT;
& lt; / md-Card & GT;

Vår sida komponent börjar se mycket bättre ut! Vårt nästa steg är att lägga till i förmågan att ha flera sidor och navigera mellan dem.

Sida 2: Så här skapar du flera sidor

Nuvarande sida: Sida 1

Nästa sida Sida 2

Hur man bygger en fullständig webbplats i vinkel

01. Skapa ett projekt

02. Inkludera animationer och vinkelmaterial

03. Introducera en sidkomponent

04. Bygg ut din sidkomponent

Hur - Mest populära artiklar

Mixed-Media Art Tutorial: Hur vattenfärg över digitalt konstverk

Hur man lägger till energi till dina livs ritningar

Hur man ritar Asuka från Neon Genesis Evangelion

Bygg adaptiva layouter utan mediafrågor

Bygg en animerad split-screen landningssida

Hur man gör din egen karaktär bibel

Hur illustrerar du för en händelse

Lägg till visuella signaler till din webbplats

Kategorier