Hvordan bygge en fullside nettside i vinkel

Sep 16, 2025

hvordan

Side 1 av 4:

Side 1

Side 1 [1. 3]
Side 2 [1. 3]
Side 3 [1. 3]
Side 4 [1. 3]

Den nyeste versjonen av vinkel er ofte tenkt på som et rammeverk som kommer fra bedriftens side av sporene og nyter generelt selskapet med forretningsapplikasjoner. Selv om det er sant at vinkelen faktisk har utviklet seg fra et rammeverk til en plattform som støtter alle slags applikasjoner, er det mange virkelig fantastiske funksjoner som eksisterer for utviklere for å skape nedsatte opplevelser for brukerne.

Dette er den første delen i en serie om hvordan du bygger et animert nettsted i full sider i vinkel. Vi starter med å bygge ut et heltidssted, og deretter animere det i følgende avdrag.

I denne opplæringen skal vi fokusere primært på vinkelbitene og for å snakke om HTML- og CSS-delene som ikke direkte relaterer seg til konstruksjonen av applikasjonen. Vennligst last ned kildekode å følge med. Ikke solgt på vinkel? Finn det perfekte Nettstedbygger Her (og de beste prisene nedenfor).

01. Opprett et prosjekt

Det er mange bevegelige deler som går inn i et ikke-trivielt webapplikasjon. Hvilke avhengigheter har søknaden din? Hvordan skal du kjøre det lokalt? Hvordan skal du teste det? Hvordan skal du pakke dine eiendeler

Heldigvis blir den komplekse prosessen med kompositt av disse elementene håndtert uten syn, i @ vinkel / cli . I bare noen få kommandoer fra vår terminal kan vi ha en fullt funksjonell vinkelapplikasjon klar for oss å jobbe med.

Det første skrittet for å jobbe med CLI er å installere den. For dette, bruk kommandoen nedenfor:

npm install -g @angular/cli

Når CLI er installert, fra kommandolinjen, kan vi navigere til mappen vi vil installere prosjektet vårt. Derfra vil vi løpe ng ny med navnet på vårt prosjekt. Dette vil skape en mappe med samme navn, som vi vil navigere i en gang prosjektet er fullført.

 CD & LT; Your-Projects-Folder & GT;
ng nye vinkel-animasjoner
CD-vinkel-animasjoner-Site

Og det er det! Vår vinkelapplikasjon er klar til å kjøre. Du kan enten starte søknaden din med NPM start eller ng tjener . Jeg foretrekker å bruke NPM start Fordi det er mer konvensjonelt og gjør det mulig å legge til i flere kommandoer. Du kan da navigere til http: // localhost: 4200 for å se søknaden som kjører.

The stock Angular CLI application running — Aksjenvinkelen CLI-applikasjonen kjører

02. Inkluder animasjoner og vinkelmateriale

Fordi vi liker vakre ting, skal vi gjøre noen få små tillegg til søknaden vår ved å legge til og installere @ Vinkel / Animasjoner og @ vinkel / materiale Pakker:

 NPM I --Save @ vinkler / materiale @ vinkler / animasjoner

Vi kan la vinkler vite om disse avhengighetene ved å legge dem til vår app.module.ts. fil. Vi skal bruke vinkelmaterialknapp, kort og verktøylinje, så vi vil importere sine respektive moduler så vel som BrowseranimationsModule. .

 // app / app.module.ts
...
importere {mdbuttonmodule, mdcardmodule, mdtoolbarmodule} fra '@ vinkel / materiale';
Importer {BrowseranImationsModule} fra '@ vinkel / plattform-nettleser / animasjoner';

Vi kan da legge dem til Import array med vår Ngmodule. erklæring.

 // app / app.module.ts
...
importere {mdbuttonmodule, mdcardmodule, mdtoolbarmodule} fra '@ vinkel / materiale';
Importer {BrowseranImationsModule} fra '@ vinkel / plattform-nettleser / animasjoner';

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

Og for en endelig tillegg, vil vi importere det indigo rosa temaet til vår Styles.css fil.

 / * Styles.css * /
@Import '~@angular/material/prebuilt-emes/indigo-pink.css';

Opp til dette punktet har vi fokusert helt på å sette opp programmet, slik at vi kunne begynne å utvikle seg. Disse kommandoene kan føle seg clunky i begynnelsen, men når du har brukt dem, vil du finne det bare tar et par minutter å ha et fullt utstyrt miljø med alle klokkene og fløyter vi trenger å bygge en søt nettside.

03. Introduser en sidekomponent

Fordi vi bygger et nettsted med vinkel, må vi introdusere en mekanisme for å vise våre sider. I vinkel, er atombyggingsblokken i en applikasjon komponenten. Ved å arkitiere vår søknad med veldefinerte, innkapslede komponenter, kan vi enkelt gjenbruke funksjonaliteten, samt komponere ny funksjonalitet ved å introdusere nye komponenter.

CLI-skipene med generatorstøtte rett ut av esken, og dette er det vi bruker til å lage vår sidekomponent. Vi kan generere vår sidekomponent ved å kjøre kommandoen nedenfor (den G. kommandoen er shorthand for generere ).

 NG G Component Page

Merk: Jeg anbefaler å ta deg tid til å lære å bygge de store vinkelbitene for hånden til du har bygget opp muskelminnet ditt. Det er bare når du virkelig forstår hva som skjer som du bør optimalisere arbeidsflyten din med generatorer.

CLI vil generere en mappe i src. Katalog kalt side Med en HTML, CSS og Ttescript-fil, samt en spesifikasjonsfil. I vår side gjenspeiler.ts. Fil, vi har den grunnleggende strukturen til en komponent. Vår komponent refererer til våre mal- og stilfiler i @Komponent metadata og har vår konstruktør og ngonit. metoder stubbet ut.

 // app / side / side.component.ts

Importer {komponent, oninit} fra '@ vinkel / kjerne';

@Komponent({
  Selector: 'App-Page',
  templateurl: './page.component.html',
  Styleurls: ['./page.component.css']})
Eksporter klasse PageComponent implementerer oninit {

  konstruktør () {}

  ngoninit () {}
}

Sammen med å generere vår komponent, vil CLI også endre vår app.module.ts. å inkludere A. Pagecomponent. oppføring i vår erklæringer array. Dette betyr at vår sidekomponent er nå tilgjengelig i hele modulen.

 // app / app.module.ts

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

Som en sunnhetskontroll, kan vi hoppe inn i vår app.component.html. fil og add. & lt; app-side & gt; & lt; / app-side & gt; til bunnen. Legg merke til at elementet taggen vi bruker tilsvarer velger eiendom definert i vår @Komponent metadata.

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

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

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

The page component rendering in our main application component — Siden komponenten som gjøres i vår hovedapplikasjonskomponent

04. Bygg ut sidekomponenten din

Med vår sidekomponent i live og godt, kan vi bygge det ut, så det begynner å se ut som en faktisk nettside. Vi vil introdusere en side objekt med. tittel , undertekst , innhold , og bilde eiendommer.

 // app / side / side.component.ts

Eksporter klasse PageComponent implementerer oninit {
  Side = {
    Tittel: 'Hjem',
    SUBTITLE: 'Velkommen hjem!',
    Innhold: "Noen hjemmeinnhold.",
    Bilde: 'Eiendeler / bg00.jpg'
  };

  konstruktør () {}

  ngoninit () {}
}

The styled page component with Angular Material — Den stylede siden komponenten med vinkelmateriale

Vi oppdaterer vår mal for å binde til side gjenstand. Det er et bildeelement som til slutt vil bli forsterket for å fylle opp hele nettleservinduet. Vi kommer også til å legge til i en vinkelmateriale kortkomponent som vi vil binde resten av vår side ha innvendinger.

 <359] & LT;! - App / side / sideblokken.html - & gt;
& lt; img klasse = "fullbg" [src] = "side.image" & gt;

& lt; md-card & gt;
& lt; md-card-header & gt;
& lt; md-card-title & 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;

Vår side komponent begynner å se mye bedre ut! Vårt neste skritt er å legge til i evnen til å ha flere sider og navigere mellom dem.

Side 2: Hvordan lage flere sider

1 [1. 3]
2. [1. 3]
3. [1. 3]
4. [1. 3]

Nåværende side: Side 1

Neste side Side 2

Hvordan bygge en fullside nettside i vinkel

01. Opprett et prosjekt

02. Inkluder animasjoner og vinkelmateriale

03. Introduser en sidekomponent

04. Bygg ut sidekomponenten din

hvordan - Mest populære artikler

22 Best Ui Design Tools

Hvordan lage en Apple Watch App

Hvordan teste reagere Nettsteder og Apps

Krita Tutorials: Lær det grunnleggende om den digitale kunstprogramvaren

Slik forfylder du designporteføljen

maling uttrykksfulle portrettkunst med artrage 5

Bruk pennverktøyet og teksturene til å legge til dybde i Photoshop

Affinity Designer: Slik bruker du Pixel Persona

Kategorier