Sådan opbygges et websted på fuld side i vinkel

Sep 12, 2025
hvordan

Den nyeste version af vinkel er ofte tænkt som en ramme, der kommer fra virksomhedens side af sporene og generelt nyder selskabet med linje af forretningsapplikationer. Selv om det er rigtigt, at vinkelet faktisk har udviklet sig fra en ramme til en platform, der understøtter alle mulige applikationer, er der mange rigtig fantastiske funktioner, der eksisterer for udviklere for at skabe fordybende oplevelser for deres brugere.

Dette er den første del i en serie om, hvordan du opbygger en anden animeret hjemmeside i vinkel. Vi vil starte med at opbygge en fuldsides hjemmeside, og derefter animere det i følgende rate.

I denne tutorial vil vi primært fokusere på de vinkelstykker og foregå at tale om HTML- og CSS-dele, der ikke direkte vedrører opførelsen af ​​applikationen. Venligst download venligst kildekode at følge med. Ikke solgt på vinkel? Find den perfekte Website Builder. her (og de bedste priser nedenfor).

01. Opret et projekt

Der er mange bevægelige dele, der går ind i en ikke-triviel webapplikation. Hvilke afhængigheder har din ansøgning? Hvordan skal du køre det lokalt? Hvordan skal du teste det? Hvordan skal du pakke dine aktiver

Heldigvis behandles den komplekse proces med sammensætning af disse elementer ud af syne, i @ vinkel / cli . På blot et par kommandoer fra vores terminal kan vi få en fuldt funktionel vinkelprogram klar til at arbejde med.

Det første skridt til at arbejde med CLI er at installere det. For dette skal du bruge kommandoen nedenfor: 

npm install -g @angular/cli

Når CLI'en er installeret, kan vi fra kommandolinjen navigere til den mappe, vi vil installere vores projekt i. Derfra vil vi køre ng ny med navnet på vores projekt. Dette vil oprette en mappe med det samme navn, som vi vil navigere til, når projektet er afsluttet. 

 CD & LT; din-projekter-mappe & GT;
ng nye vinkel-animationer-site
CD Vinkel-Animations-Site

Og det er det! Vores vinkelansøgning er klar til at køre. Du kan enten starte din ansøgning med NPM Start. eller ng tjener. . Jeg foretrækker at bruge NPM Start. Fordi det er mere konventionelt og gør det muligt for mig at tilføje i yderligere kommandoer. Du kan derefter navigere til http: // localhost: 4200 for at se applikationen kører.

The stock Angular CLI application running

Aktivet Vinkel CLI-applikationen kører

02. Medtag animationer og vinkelmateriale

Fordi vi kan lide smukke ting, vil vi lave et par små tilføjelser til vores ansøgning ved at tilføje og installere @ vinkel / animationer og @ vinkel / materiale Pakker: 

 NPM I --SAVE @ vinkel / materiale @ vinkel / animationer

Vi kan lade vinkel vide om disse afhængigheder ved at tilføje dem til vores app.module.ts. fil. Vi vil bruge vinkelmateriale-knap, kort og værktøjslinje, så vi importerer deres respektive moduler såvel som Browseranimationsmodule. . 

 // App / app.module.tss
...
Import {MDButtonModule, MDCardmodule, MDToolBarmodule} fra '@ vinkel / materiale';
Import {browseranimationsmodule} fra '@ vinkel / platform-browser / animationer';

Vi kan derefter tilføje dem til import. Array med vores Ngmodule. erklæring. 

 // App / app.module.tss
...
Import {MDButtonModule, MDCardmodule, MDToolBarmodule} fra '@ vinkel / materiale';
import {browseranimationsmodule} fra '@ vinkel / platform-browser / animationer';

@Ngmodule ({
  ...
  Import: [
    ...
    Browseranimationsmodule,
    MDToolBarmodule,
    Mdbuttonmodule,
    Mdcardmodule.
  ]
  ...
})

Og for en endelig tilføjelse vil vi importere Indigo Pink Theme i vores stilarter.css. fil. 

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

Op til dette punkt har vi fokuseret helt på opsætning af ansøgningen, så vi kunne begynde at udvikle. Disse kommandoer kan føle clunky i starten, men når du har vant til dem, vil du finde det kun tager et par minutter at have et fuldt opbygget miljø med alle klokker og fløjter, vi har brug for at bygge en sød hjemmeside.

03. Indfør en side komponent

Fordi vi bygger på en hjemmeside med vinkel, skal vi introducere en mekanisme til at vise vores sider. I vinkel er atombyggens blok af en applikation komponenten. Ved arkitektonering af vores applikation med veldefinerede indkapslede komponenter er vi nemt at genbruge funktionalitet, samt komponere ny funktionalitet ved at introducere nye komponenter.

CLI skibene med generator support lige ud af boksen, og det er det, vi bruger til at oprette vores side komponent. Vi kan generere vores side komponent ved at køre kommandoen nedenfor (den G. kommandoen er stenografi for frembringe ). 

 NG G-komponentside

Bemærk: Jeg anbefaler at tage dig tid til at lære at opbygge de store vinkelstykker med hånden, indtil du har opbygget din muskelhukommelse. Det er først, når du virkelig forstår, hvad der sker, at du skal optimere din arbejdsgang med generatorer.

CLI'en vil generere en mappe i Src. Directory Named. side med en HTML, CSS og Typscript-fil samt en spec fil. I vores Page.ComPonent.ts. fil, vi har den grundlæggende struktur af en komponent. Vores komponent refererer vores skabelon og stilfiler i @Komponent metadata og har vores konstruktør og ngonit. metoder stubbet ud. 

 // APP / PAGE / SIDE.COMPONENT.TS

Import {Component, Oninit} fra '@ vinkel / kerne';

@Komponent({
  SELECTOR: 'APP-PAGE',
  Templateurl: './page.component.html',
  Styleurls: ['./page.component.css']})
Eksportklasse Pagecomponent implementerer OnInit {

  Konstruktør () {}

  ngoninit () {}
}

Sammen med at generere vores komponent, vil CLI også ændre vores app.module.ts. at medtage A. Pagecomponent. Indgang i vores erklæringer array. Det betyder, at vores side komponent er nu tilgængelig i hele modulet. 

 // App / app.module.tss

@Ngmodule ({
  Erklæringer: [
    Appomponent,
    Pagecomponent.
  ]
  ...
})

Som en Sanity Check kan vi hoppe ind i vores app.component.html. Fil og ADD. & lt; app-side & gt; & lt; / app-side & gt; til bunden. Bemærk, at elementet mærket vi bruger, svarer til vælger. Ejendom defineret i vores @Komponent metadata. 

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

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

& lt; app-side & gt; & lt; / app-side & gt;

The page component rendering in our main application component

Side komponentgenderen i vores hovedapplikationskomponent

04. Build din side komponent

Med vores side komponent i live og godt, kan vi bygge det ud, så det begynder at ligne en faktisk webside. Vi vil introducere en side objekt med titel Vi undertekst Vi indhold , og billede ejendomme. 

 // APP / PAGE / SIDE.COMPONENT.TS

Eksportklasse Pagecomponent implementerer OnInit {
  Side = {
    Titel: 'Home',
    Undertekst: 'Velkommen hjem!',
    Indhold: 'Nogle hjemmeindhold.',
    Billede: 'Aktiver / bg00.jpg'
  };

  Konstruktør () {}

  ngoninit () {}
}

The styled page component with Angular Material

Den stilede side komponent med vinkelmateriale

Vi opdaterer vores skabelon for at binde til side objekt. Der er et billedelement, der i sidste ende bliver forstærket for at udfylde hele browservinduet. Vi vil også tilføje i en vinkelmaterialekort komponent, som vi vil binde resten af ​​vores side objekt til. 

 & LT;! - APP / PAGE / SIDE.COMPONENT.HTML - & GT;
& lt; img class = "fullbg" [src] = "side.image" & gt;

& lt; md-card & gt;
& lt; md-card-header & gt;
& lt; md-card-titel & gt; lt; h1 & gt; {side.title}} & lt; / h1 & gt; & lt; / md-card-title & gt;
& lt; md-card-subtitle & gt; {{side.subtitle}} & lt; / md-card-subtitle & gt;
& lt; / md-card-header & gt;
& lt; md-card-content & gt;
{{side.content}}
& lt; / md-card-content & GT;
& lt; / md-card & gt;

Vores side komponent er begyndt at se meget bedre ud! Vores næste skridt er at tilføje i evnen til at have flere sider og navigere mellem dem.

Side 2: Sådan oprettes flere sider

  • 1
  • 2.
  • 3.
  • 4.

Nuværende side: Side 1

hvordan - Mest populære artikler

Sådan tegner du perspektiv

hvordan Sep 12, 2025

At lære at tegne perspektivet korrekt kunne ændre hele din tegningsproces. Uanset om det traditionelt trækkes med blyant og papir eller digitalt ved hjælp af en grafiktablet, konstruerer ..

Sådan slukker du webmeddelelser til Windows, MacOS og Android

hvordan Sep 12, 2025

(Billedkredit: fremtiden) Hvis du er en almindelig webbruger, har du uden tvivl set meddelelser fra websteder, du reg..

Forstå naturlig sprogbehandling

hvordan Sep 12, 2025

Websites og apps kan have forskellige bevægelige dele, herunder frontende kreative, server-side behandling, API'er og datalagrin..

Sådan sculpt en menneskelig næse i Zbrush: 4 Nemme trin

hvordan Sep 12, 2025

Menneskelige næser kommer i alle former og størrelser. Det er dog vigtigt at kende anatomiens grundlæggende for at sculpt en m..

Affinity Designer: Sådan bruger du begrænsninger

hvordan Sep 12, 2025

Affinity Designer er en populær Vector Art. værktøj. Såvel som MAC og Windows-versioner, Serif nyli..

Sådan tegner du en stor kat med pasteller

hvordan Sep 12, 2025

Pastellpindeens blødhed og lysstyrke gør dem til det ideelle valg til baggrunde i min pastell tegninger. ; Mens ..

Opret sæt af produktikoner i Illustrator

hvordan Sep 12, 2025

Klik på ikonet øverst til højre for at forstørre ikonerne Illustrerede ikoner kan v�..

Sådan opretter du digitale aktiver

hvordan Sep 12, 2025

Forberedelse af aktiver til digital brug er en kerneopgave for Junior Designers. i dag - og adskilt fra Fo..

Kategorier