Hva er nytt i vinkel 4?

Feb 2, 2026

hvordan

[1. 3]

Side 1 av 2:

Trinn 1-10.

Trinn 1-10.
Trinn 11-20.

I mars utgav det vinkelteamet versjon 4, og med det noen spennende nye funksjoner å utforske. I denne opplæringen viser vi deg Hvordan lage en app Ved hjelp av noen av disse nye funksjonene, samt å demonstrere noen av de kraftige ytelsesforbedrende, endringene i hetten.

Hva er nytt?

Det vinkelteamet kaller det en "usynlig makeover", fordi de fleste endringene er i bakgrunnen i stedet for med kjernekodingsfunksjonalitet. En viktig endring er flyttingen til forutgående kompilering som standard, som har potensial til å forbedre ytelsen din drastisk når den brukes riktig. Tekstcript 2.1+ er også støttet nå, noe som gir oss tilgang til alle de nye funksjonene i ES2015.

Det er ikke å si at det ikke er noen bemerkelsesverdige endringer i det grunnleggende - for eksempel er det en nyttig ny mal-bindende syntaks som gjør at vi kan forenkle koden vår ved å legge til en ellers Mulighet til ngif. , og evnen til å tildele lokale variabler i en ngfor. .

Har jeg savnet 3.0?

Vinkel 4 er den første store versjonen av rammen som er vedtatt av semantisk versjon. Så ikke bekymre deg, du savnet ikke 3.0 - det var to store oppdateringer, og begge ble rullet inn i versjon 4.0.

Legg også merke til at vinkelen 1.x nå er kjent som angularjs, og vinkelen 2+ er ganske enkelt referert til som vinkel. Vær forsiktig som noen tredjeparts opplæringsprogrammer og biblioteker kanskje ikke har oppdatert bruken av disse vilkårene.

Få opplæringsfilene

I denne opplæringen skal vi jobbe med en blomsterbutikkapp. For å laste ned eksempelappen, gå til Filsilo. , velg gratis ting og gratis innhold ved siden av opplæringen. Merk: Første gangs brukere må registrere deg for å bruke filsilo. Når du er logget inn, kan du laste ned eksempelappen her .

La oss komme i gang!

01. Start med node

Download and install Node.js by following the instructions in the wizard — Last ned og installer node.js ved å følge instruksjonene i veiviseren

La oss starte fra bunnen av, og bruk vinkelklassen til å bygge en Hello World-app. Hvis du vil oppdatere en eksisterende app, hopper du over til trinn 4. Hvis du ikke allerede har det, Last ned node , som kommer pre-pakket med NPM. Hvis du allerede har node, sjekk at den minst node 6.9.x og npm 3.x.x fra kommandolinjen.

 $ node -V
V6.10.2.
$ npm -v.
3.10.10

02. Sett opp et nytt prosjekt

Create a simple Hello World app in the Angular CLI — Lag en enkel Hello World-app i vinkelklien

Nå har vi en pakkeforvalter vi kan bruke den til å installere vinkel og vinkelklusjonen. Blant annet gjør CLI deg enkelt å generere nye prosjekter og komponenter.

 $ npm installasjon -g @ vinkel / cli
$ NG Ny My-First-Angular4-App # Vinkel CLI-kommandoer Bruk 'Ng'
$ ng servere -open # Denne kommandoen vil starte på appen din og starte den i nettleseren

03. Sjekk versjonen

Hvis du ikke har sett et vinkelprosjekt før, ta deg tid til å bli kjent med filstrukturen som genereres av CLI. For vårt nye prosjekt, vår pakke.json. bør liste versjon 4.0.0 vinkelpakker.

 "avhengigheter": {
"@ vinkel / vanlig": "^ 4.0.0",
"@ vinkel / kompilator": "^ 4.0.0",
"@ vinkel / kjerne": "^ 4.0.0",
"@ vinkel / skjemaer": "^ 4.0.0",
"@ vinkel / http": "^ 4.0.0",
"@ vinkel / plattform-nettleser": "^ 4.0.0",
"@ vinkel / plattform-nettleser-dynamisk": "^ 4.0.0",
"@ vinkler / ruteren": "^ 4.0.0" [...]}

04. Oppgrader til vinkel 4

Hvis du har en eksisterende vinkelapp med 2.x versjoner som er oppført, er det veldig enkelt å oppdatere til versjon 4 i de fleste tilfeller. Vi trenger bare å installere og oppdatere de relevante pakkene fra kommandolinjen. Mac:

kr

Windows:

& gt; NPM Installer @ Angular / Common @ Siste @ Angular / Compiler @ Siste @ Angular / Compiler-CLI @ Siste @ Angular / Core @ Siste @ Angular / Forms @ Angular / Platform-Browser @ Siste @angular / Platform-Browser-Dynamic @ Siste @ Angular / Platform-Server @ Siste @ Angular / Router @ Siste @ Angular / Animasjoner @ Siste Ttescript @ Siste --Save

05. Last ned opplæringsappen

Fra nå av skal vi jobbe med en vinkel 2 eksempel-app som du kan laste ned fra Filsilo. (For full notater om hvordan du gjør dette, se intro over). Vær oppmerksom på at denne appen er opprettet rent for illustrative formål. Når du har lastet ned deflower Shop-appen i rotkatalogen din, installerer du avhengigheter og lansere i nettleseren.

 $ npm installasjon
$ ng servere --open

06. Oppgrader blomsterbutikk til 4.0

Our custom modal module needs renaming [click the icon to enlarge) — Vår tilpassede modalmodul trenger å omdøpe [klikk på ikonet for å forstørre)

Innen blomsterbutikk katalog, oppgrader til 4.0. Vi har noen Unmet peer avhengighet feil etter oppgradering.

07. Fest peer-avhengighetene

Peeravhengigheter er for å administrere prosjekter som har pakker som stoler på forskjellige versjoner av de samme avhengighetene. Du må legge til disse manuelt til din pakke.json. fil. De peeravhengighetene som vi trenger for blomsterbutikk, inkluderer eldre versjoner av @ vinkel / {kjerne, http} , RXJs. og Zone.js. .

Gå gjennom feilene i terminalutgangen og legg til hver manglende avhengighet av pakke.json. .

 "peerdependencies": {
  "@ vinkel / kjerne": "& gt; 2.0.0",
  "@ vinkel / http": "& gt; = 2.0.0",
  "RXJs": "^ 5.0.0",
  "Zone.js": "0.7.8"
  },

08. Se opp for navnendringer

Vår Flower Shop App bruker en åpen kildekode tilpasset komponent NG2-modal . Men forfatteren har siden oppdatert sin navngivende konvensjon til NGX-Modal. . Vi må endre vårt avhengighetsnavn og ng-modul importerer tilsvarende.

 Package.Json:
"Avhengigheter": {
  [...]
  "NGX-Modal": "0.0.25",
     [...]
  },
app / app.module.ts:
importere {modalmodule} fra 'ngx-modal';

09. Sjekk versjoner

Vår tilpassede modalkomponent trenger også oppdatering til en nyere versjon, så vær sikker på å oppdatere den med NPM.

 $ NPM Installer NGX-Modal @ Siste --Save

10. Sjekk arbeidet ditt

Nå har vi lappet opp våre avhengigheter, det er en god ide å rydde node_moduler og bygg det igjen fra vår pakke.json. . Hvis alt går bra, bør du ha en ren bygning! Hvis du ikke gjør det, kan noe fortsatt mangle i avhengighetsversjonene. Ta en annen titt.

 $ rm -RF node_moduler /
$ npm cache ren
$ npm installasjon
$ ng servere --open

Neste side: Trinn 11-20

Nåværende side: Trinn 1-10.

Neste side Trinn 11-20.

Hva er nytt i vinkel 4?

01. Start med node

02. Sett opp et nytt prosjekt

03. Sjekk versjonen

04. Oppgrader til vinkel 4

05. Last ned opplæringsappen

06. Oppgrader blomsterbutikk til 4.0

07. Fest peer-avhengighetene

08. Se opp for navnendringer

09. Sjekk versjoner

10. Sjekk arbeidet ditt

hvordan - Mest populære artikler

Lag din egen stylus med bare 4 husholdningsartikler (seriøst)

Administrer reagens skjema tilstand med formik

Hvordan lage en app med vue.js

Opprett perspektiv i Adobe Illustrator

Kom i gang med express.js

Tegn en figur på under fem minutter

Hvordan oppnå bedre belysning med v-ray

Den ultimate guiden til å komponere bilder i Photoshop

Kategorier