Hvad er nyt i vinkel 4?

Feb 6, 2026

hvordan

Side 1 af 2:

Trin 1-10

Trin 1-10
Trin 11-20.

I marts udgav det vinkelhold version 4, og med det nogle spændende nye funktioner at udforske. I denne tutorial viser vi dig Sådan laver du en app Ved hjælp af nogle af disse nye funktioner, samt at demonstrere nogle af de kraftfulde præstationsforbedrende, ændres under-hood.

Hvad er nyt?

Vinkelholdet kalder det en "usynlig makeover", fordi de fleste af ændringerne er i baggrunden snarere end med kernekodningsfunktionalitet. En vigtig ændring er flytningen til fremadrettet kompilering som standard, hvilket har potentialet til drastisk at forbedre ydeevnen, når de anvendes korrekt. Typscript 2.1+ understøttes også nu, hvilket giver os adgang til alle de nye funktioner i ES2015.

Det er ikke at sige, at der ikke er nogen bemærkelsesværdige ændringer i det grundlæggende - for eksempel er der en nyttig ny skabelonbindende syntaks, der gør det muligt for os at forenkle vores kode ved at tilføje en andet Mulighed for ngif. , og evnen til at tildele lokale variabler inden for en ngforholdige .

Har jeg savnet 3.0?

Vinkel 4 er den første store version af rammerne vedtaget af semantisk versionering. Så rolig, du savnede ikke 3.0 - der var to store opdateringer, og begge blev rullet ind i version 4.0.

Bemærk også, at vinkel 1.x nu er kendt som Angularjs, og Vinkel 2+ er simpelthen omtalt som vinkel. Vær forsigtig, da nogle tredjeparts tutorials og biblioteker måske ikke har opdateret deres brug af disse vilkår.

Få vejledningsfilerne

I denne tutorial arbejder vi med en blomsterbutik app. For at downloade eksemplet app, gå til FileSilo. , vælg gratis ting og gratis indhold ved siden af vejledningen. Bemærk: Første gang brugerne skal registrere for at bruge FileSilo. Når du er logget ind, kan du downloade eksemplet app her .

Lad os komme igang!

01. Start med node

Download and install Node.js by following the instructions in the wizard — Download og installer node.js ved at følge instruktionerne i guiden

Lad os starte fra bunden, og brug The Angular CLI til at opbygge en Hello World App. Hvis du vil opdatere en eksisterende app, skal du springe til trin 4. Hvis du ikke allerede har det, Download node , som kommer færdigpakket med NPM. Hvis du allerede har node, skal du kontrollere, at det er mindst node 6.9.x og npm 3.x.x fra kommandolinjen.

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

02. Opsæt et nyt projekt

Create a simple Hello World app in the Angular CLI — Opret en simpel Hello World App i The Angular CLI

Nu har vi en pakkehåndtering, vi kan bruge den til at installere vinkel og vinkel CLI. Blandt andet giver CLI dig mulighed for nemt at generere nye projekter og komponenter.

 $ NPM Installer -G @ vinkel / CLI
$ ng nye min-første-vinkel4-app # vinkel cli kommandoer bruger 'ng'
$ ng tjener -Open # Denne kommando vil bootstrap din app og lancere den i browseren

03. Kontroller versionering

Hvis du ikke har set et vinkelprojekt før, tag tid til at gøre dig bekendt med den filstruktur, der genereres af CLI. For vores nye projekt, vores Package.json. Skal liste version 4.0.0 vinkelpakker.

 "afhængigheder": {
"@ vinkel / fælles": "^ 4.0.0",
"@ vinkel / compiler": "^ 4.0.0",
"@ vinkel / kerne": "^ 4.0.0",
"@ vinkel / former": "^ 4.0.0",
"@ vinkel / http": "^ 4.0.0",
"@ vinkel / platform-browser": "^ 4.0.0",
"@ vinkel / platform-browser-dynamisk": "^ 4.0.0",
"@ vinkel / router": "^ 4.0.0" [...]}

04. Opgrader til vinkel 4

Hvis du har en eksisterende vinkel app med 2.x versioner, der er angivet, er det virkelig nemt at opdatere til version 4 i de fleste tilfælde. Vi skal bare installere og opdatere de relevante pakker fra kommandolinjen. MAC:

 $ NPM Installer @ Angular / {Common, Compiler, Compiler-Cli, Core, Forms, HTTP, Platform-Browser, Platform-Browser-Dynamic, Platform-Server, Router, Animationer} @Latest Typscript @ Seneste --Save

Windows:

& gt; NPM Installer @ Angular / Common @ nyeste @ Angular / Compiler @ Seneste @ Angular / Compiler-Cli @ Seneste @ Angular / Core @ Seneste @ Angular / Forms @ Seneste @ Angular / HTTP @ Seneste @ Angular / Platform-Browser @ Seneste @angular / Platform-browser-dynamisk @ Seneste @ Angular / Platform-Server @ Seneste @ Angular / Router @ Seneste @ Animular / Animations @ Seneste Typscript @ Seneste --Save

05. Download tutorial app

Fra nu af arbejder vi med en vinkel 2 eksempel app, som du kan downloade fra FileSilo. (For fulde noter om, hvordan du gør dette, se intro ovenfor). Bemærk, at denne app er blevet oprettet udelukkende til illustrative formål. Når du har downloadet TeFlower Shop-appen i din rodmappe, skal du installere afhængigheder og starte i browseren.

 $ NPM Install
$ ng servering --Open

06. Opgrader blomsterbutik til 4,0

Our custom modal module needs renaming [click the icon to enlarge) — Vores brugerdefinerede modalmodul har brug for omdøbning [klik på ikonet for at forstørre)

Indenfor blomsterbutik Directory, opgrader til 4,0. Vi har nogle Unmet peer-afhængighed fejl efter opgradering.

07. Fix Peer Dependences

Peer-afhængigheder er til styring af projekter, der har pakker, der stoler på forskellige versioner af de samme afhængigheder. Du skal tilføje disse manuelt til din Package.json. fil. De peer-afhængigheder, som vi har brug for til blomsterbutik, omfatter ældre versioner af @ vinkel / {core, http} Vi rxjs. og zone.js. .

Gennemgå fejlene i terminaludgangen og tilføj hver manglende afhængighed af Package.json. .

 "Peerdependencies": {
  "@ vinkel / kerne": "& gt; = 2.0.0",
  "@ vinkel / http": "& gt; = 2.0.0",
  "RXJS": "^ 5.0.0",
  "Zone.js": "0,7,8"
  },

08. Pas på navneændringer

Vores Flower Shop App gør brug af en open source brugerdefineret komponent kaldet ng2-modal. . Forfatteren har dog siden opdateret deres navngivningskonvention til NGX-MODAL. . Vi skal ændre vores afhængighedsnavn og ng-modul. import i overensstemmelse hermed.

 Package.json:
"Afhængigheder": {
  [...]
  "NGX-MODAL": "0,0,25",
     [...]
  },
app / app.module.ts:
import {modalmodule} fra 'ngx-modal';

09. Kontroller versioner

Vores brugerdefinerede modalkomponent skal også opdateres til en nyere version, så sørg for at opdatere den med NPM.

 $ NPM Installer NGX-MODAL @ Seneste --Save

10. Tjek dit arbejde

Nu har vi patched vores afhængigheder, det er en god ide at rydde node_modules. og bygg det igen fra vores Package.json. . Hvis alt går godt, skal du have en ren bygge! Hvis du ikke gør det, kan noget stadig mangle i dine afhængighedsversioner. Tag et andet udseende.

 $ rm -rf node_modules /
$ npm cache clean
$ NPM Install.
$ ng servering --Open

Næste side: trin 11-20

Nuværende side: Trin 1-10

Næste side Trin 11-20.

Hvad er nyt i vinkel 4?

01. Start med node

02. Opsæt et nyt projekt

03. Kontroller versionering

04. Opgrader til vinkel 4

05. Download tutorial app

06. Opgrader blomsterbutik til 4,0

07. Fix Peer Dependences

08. Pas på navneændringer

09. Kontroller versioner

10. Tjek dit arbejde

hvordan - Mest populære artikler

Sådan bruges fotografering til illustration

Sådan laver du en meme i Photoshop

Sådan tilføjes animation til SVG med CSS

Sådan designes med CSS-former: En introduktion

3 Tips til udformning af fantastisk udskrivning af reklamemateriale

Sådan maler du et bybillede med farveblokke

Sådan blandes skyggefarve i maling

5 måder at skabe mere imessive VR-oplevelser

Kategorier