Wat is nieuw in Angular 4?

Feb 6, 2026

Procedures

Pagina 1 van 2:

Stappen 1-10

Stappen 1-10
Stappen 11-20

In maart bracht het hoekige team versie 4 vrij en daarmee een aantal spannende nieuwe functies om te verkennen. In deze tutorial laten we je laten zien Hoe maak je een app Met behulp van sommige van deze nieuwe functies, evenals het aantonen van enkele van de krachtige prestatieverhogende, onder-de-kap veranderingen.

Wat is er nieuw?

Het hoekteam noemt het een 'onzichtbare make-over', omdat de meeste veranderingen op de achtergrond zitten in plaats van met kerncodering-functionaliteit. Een belangrijke verandering is de verhuizing naar de vooruitgang-van-time compilatie standaard, die het potentieel heeft om de prestaties drastisch te verbeteren wanneer deze correct wordt gebruikt. Typescript 2.1+ wordt nu ook ondersteund, wat ons toegang geeft tot alle nieuwe functies van ES2015.

Dat wil niet zeggen dat er geen opmerkelijke veranderingen in de basisprincipes zijn - er is bijvoorbeeld een handige nieuwe sjabloon-bindende syntaxis waarmee we onze code kunnen vereenvoudigen door een anders optie ngif en de mogelijkheid om lokale variabelen binnen een toe te wijzen ngfor

Heb ik 3,0 gemist?

Angular 4 is de eerste grote versie afgifte van het aangenomen kader van semantische versie. Dus maak je geen zorgen, je hebt 3,0 niet gemist - er waren twee belangrijke updates en beide werden in versie 4.0 gerold.

OPMERKING Ook dat hoek 1.x nu bekend staat als Angularjs, en hoekige 2+ wordt eenvoudigweg aangeduid als hoekig. Wees op uw hoede omdat sommige tutorials en bibliotheken van derden mogelijk hun gebruik van deze voorwaarden mogelijk niet hebben bijgewerkt.

Download de tutorial-bestanden

In deze tutorial werken we met een bloemenwinkel-app. Ga naar de voorbeeld-app, ga naar Filesilo , selecteer gratis spullen en gratis inhoud naast de tutorial. Opmerking: de gebruikers van de eerste keer moeten zich registreren om Filesilo te gebruiken. Zodra u bent ingelogd, kunt u de voorbeeld-app downloaden hier

Laten we beginnen!

01. Start met knooppunt

Download and install Node.js by following the instructions in the wizard — Download en installeer Node.js door de instructies in de wizard te volgen

Laten we vanaf nul beginnen en gebruik de hoekige cli om een Hello World-app te bouwen. Als u een bestaande app wilt bijwerken, ga dan naar stap 4. als u dat nog niet hebt gedaan, Node downloaden , dat voorverpakt is met NPM. Als u al een knooppunt hebt, controleert u deze ten minste knooppunt 6.9.x en NPM 3.x.x van de opdrachtregel.

 $ NODE -V
v6.10.2
$ npm -v
3.10.10

02. Een nieuw project instellen

Create a simple Hello World app in the Angular CLI — Maak een eenvoudige Hello World-app in de hoekige cli

Nu hebben we een pakketbeheerder die we kunnen gebruiken om hoekig en de hoekige cli te installeren. Met de CLI kunt u onder andere u gemakkelijk nieuwe projecten en componenten genereren.

 $ NPM Installeer -G @ Angular / CLI
$ NG Nieuwe My-First-Angular4-App # Angular CLI-opdrachten Gebruik 'NG'
$ NG SIDE -OPEN # Deze opdracht wordt uw app bootstrap en start deze in de browser

03. Controleer versie

Als u eerder een hoekproject hebt gezien, neem dan de tijd om vertrouwd te raken met de bestandsstructuur die wordt gegenereerd door de CLI. Voor ons nieuwe project, onze pakket Moet versie 4.0.0 hoekpakketten vermelden.

 "afhankelijkheden": {
"@ Angular / Common": "^ 4.0.0",
"@ Angular / Compiler": "^ 4.0.0",
"@ Angular / Core": "^ 4.0.0",
"@ Angular / Forms": "^ 4.0.0",
"@ Angular / http": "^ 4.0.0",
"@ Angular / Platform-Browser": "^ 4.0.0",
"@ Angular / Platform-Browser-Dynamic": "^ 4.0.0",
"@ Angular / Router": "^ 4.0.0" [...]}

04. Upgrade naar Angular 4

Als u een bestaande hoek-app hebt met 2.x-versies vermeld, is het echt eenvoudig om in de meeste gevallen te updaten naar versie 4. We moeten alleen de relevante pakketten van de opdrachtregel installeren en bijwerken. Mac:

 $ NPM Install @ Angular / {Common, Compiler, Compiler-CLI, Core, Forms, HTTP, platform-browser, platform-browser-dynamic, platform-server, router, animaties} @latest typescript @ Nieuwste --Save

Ramen:

& GT; NPM Install @ Angular / Common @ @ nieuwste @ Angular / Compiler @ Nieuwste @ Angular / Compiler-CLI @ Nieuwste @ Angular / Core @ Nieuwste @ Angular / Forms @ Nieuwste @ Angular / HTTP @ Nieuwste @ Angular / Platform-Browser @ Nieuwste @hoekig / platform-browser-dynamic @ nieuwste @ hoek / platform-server @ nieuwste @ hoek / router @ nieuwste @ hoek / animaties @ nieuwste typescript @ nieuwste --Save

05. Download de tutorial-app

Vanaf nu werken we met een hoek 2 voorbeeld-app die u kunt downloaden van Filesilo (Voor volledige aantekeningen over hoe dit te doen, zie Intro hierboven). Merk op dat deze app louter is gemaakt voor illustratieve doeleinden. Zodra u de Blower Shop-app hebt gedownload in uw hoofdmap, installeert u afhankelijkheden en start in de browser.

 $ npm install
$ ng serveren --Open

06. Upgrade Flower Shop to 4.0

Our custom modal module needs renaming [click the icon to enlarge) — Onze aangepaste modale module moet hernoemen [klik op het pictogram om te vergroten)

Binnen de bloemenwinkel Directory, upgrade naar 4.0. We hebben wat Onvervulde peer-afhankelijkheid fouten na het upgraden.

07. Fix Peer-afhankelijkheden

Peer-afhankelijkheden zijn voor het beheren van projecten die pakketten hebben die afhankelijk zijn van verschillende versies van dezelfde afhankelijkheden. Je moet deze handmatig toevoegen aan je pakket het dossier. De peer-afhankelijkheden die we nodig hebben voor bloemenwinkel zijn oudere versies van @ Angular / {kern, http} rxjs en ZONE.JS

Controleer de fouten in de terminaluitvoer en voeg elke ontbrekende afhankelijkheid toe aan pakket

 "Peerdependencies": {
  "@ Angular / Core": "& GT; = 2.0.0",
  "@ Angular / HTTP": "& GT; = 2.0.0",
  "RXJS": "^ 5.0.0",
  "Zone.js": "0.7.8"
  },

08. Pas op voor naamwijzigingen

Onze bloemenwinkel-app maakt gebruik van een open-source aangepaste component genaamd NG2-MODAL De auteur heeft echter sindsdien hun naamgevingsconventie bijgewerkt NGX-modal We moeten onze afhankelijkheidsnaam wijzigen en ng-module invoer dienovereenkomstig.

 Package.json:
"afhankelijkheden": {
  
  "NGX-modal": "0.0.25",
     
  
app / app.module.ts:
Import {Modalmodule} van 'NGX-Modal';

09. Controleer versies

Onze aangepaste modale component moet ook worden bijgewerkt naar een meer recente versie, dus zorg ervoor dat u het bijwerkt met NPM.

 $ NPM Installeer NGX-Modal @ Laatste --Save

10. Controleer uw werk

Nu hebben we onze afhankelijkheden opgeheven, het is een goed idee om te worden node_modules en bouw het opnieuw uit onze pakket Als alles goed gaat, moet je een schone build hebben! Als je dat niet doet, mist iets nog steeds in je afhankelijkheidsversies. Neem een andere look.

 $ RM -RF Node_Modules /
$ npm cache clean
$ NPM installeer
$ ng serveren --Open

Volgende pagina: Stappen 11-20

Huidige pagina: Stappen 1-10

Volgende bladzijde Stappen 11-20

Wat is nieuw in Angular 4?

01. Start met knooppunt

02. Een nieuw project instellen

03. Controleer versie

04. Upgrade naar Angular 4

05. Download de tutorial-app

06. Upgrade Flower Shop to 4.0

07. Fix Peer-afhankelijkheden

08. Pas op voor naamwijzigingen

09. Controleer versies

10. Controleer uw werk

Procedures - Meest populaire artikelen

Hoe een lastige ontwerp op te lossen

7 Toptips voor het starten van uw eigen bedrijf

Hoe realistische figuren te tekenen

Hoe scheppende mousserende ogen in olieverf

Leer gebladerte te laten groeien met X-deeltjes

Maak een laag polybehang in C4D

Maak een hi-fidelity prototype in atomic

Teken nauwkeurige botten en spier

Categorieën