Wat zit er in hoek 8?

Sep 11, 2025
Procedures
Angular 8
(Beeldkrediet: toekomst)

Angular 8 is de nieuwste versie van Google's Angular - een van de Beste JavaScript-frameworks in de omgeving van. In dit artikel rennen we door wat speciaal is aan Angular 8, en laat zien hoe je begint. Ten eerste, een korte blik terug naar wat er tot nu toe met het kader is gebeurd.

Angular's introductie leidde tot een paradigmaverschuiving in webontwikkeling: terwijl de meeste bibliotheken zich beperkten om de ontwikkelaars met relatief beperkte architecturale impact te bieden, ging het ontwikkelaarsteam van Angular in de andere richting. Hun product dwingt u om een ​​specifieke architectuur te gebruiken, waarbij afwijkingen variërend van moeilijk te commercieel zinloos zijn. In feite loopt de meeste hoekcode door een relatief complexe transpilatie-toolchain voordat het ooit de browser raakt.

Vanwege het immense succes van hoekige, zowel binnen als buiten Google Inc, is ontwikkeling - bij en groot gestabiliseerd. Dit betekent dat het breken van codewijzigingen weinigen zijn, terwijl de semi-jaarlijkse upgrades gericht zijn op het aanpassen van het raamwerk aan veranderingen in het landschap van het web.

In het geval van hoek 8 wordt bijvoorbeeld een nieuwe JavaScript-compiler geïmplementeerd (zij het nog steeds experimenteel). Het optimaliseert gegenereerde compatibiliteitscode om aanzienlijk kleiner en sneller te zijn ten koste van oudere browsers. Bovendien is ondersteuning voor webarbeiders geïntegreerd om de verwerkingscapaciteit van de hoek te vergroten. Kortom, er is veel te zien - dus laat het ons erin duiken.

Als u liever een site zonder code ontwerpt, probeer dan een van deze eenvoudig Website-bouwers ​En om dingen te laten lopen, krijg je je web hosting Service rechts.

01. Voer een versiecontrole uit

Angular's Toolchain woont in de omgeving van Nodejs. Vanaf dit schrijven, Node.js 10.9 of beter is nodig - als je jezelf op een oudere versie bevindt, Bezoek de Node.js-website en krijg een upgrade. De onderstaande code toont de versiestatus op deze machine. 

 TAMHAN @ TAMHAN18: ~ $ NODE -V
v12.4.0
TAMHAN @ TAMHAN18: ~ $ NPM -V
6.9.0

02. Installeer hoekig

Angular's Toolchain verblijft in een opdrachtregelhulpprogramma met de naam ng ​Het kan worden geïnstalleerd via de bekende NPM. 

 TAMHAN @ TAMHAN18: ~ $ SUDO NPM INSTALLEREN -G @ HANGEL / CLI
TAMHAN @ TAMHAN18: ~ $ NG-versie

Wees voorzichtig om de vraag in de onderstaande afbeelding te beantwoorden.

Click the icon in the top right to enlarge

Klik op het pictogram in het rechtsboven om te vergroten (Afbeelding Credit: Tam Hanna)

Versieinformatie uit het gereedschap krijgen is vrij moeilijk - niet alleen is de syntaxis uniek, maar de uitvoer is ook uitgebreid (zie afbeelding hieronder).

Click the icon in the top right to enlarge

Klik op het pictogram in het rechtsboven om te vergroten (Afbeelding Credit: Tam Hanna)

03. Maak een project Skeleton

ng genereert de hoekige steiger voor ons. In de volgende stappen willen we routering toevoegen en sass voor CSS-transpilatie gebruiken. Moet de implementatie om een ​​of andere reden falen, de werkdirectory leegmaken en opnieuw opstarten ng met superuserrechten. 

 Tamhan @ Tamhan18: ~ $ mkdir ungerspace
Tamhan @ Tamhan18: ~ $ CD hoekspace /
Tamhan @ Tamhan18: ~ / angularspace $ ng nieuwe werktest

04. Harness Differential Loading

De nieuwe versie van Angular optimaliseert Achteruit CompatiBlity-code voor verminderde impact - een bestand wordt genoemd browserlist Hiermee kunt u beslissen welke browsers moeten worden ondersteund. Open browserlist en verwijder het woord niet voor IE 9 tot IE11. 

.​​
& GT; 0,5%
Laatste 2 versies
Firefox ESR
niet dood
IE 9-11 # voor IE 9-11 Ondersteuning, verwijder 'niet'.

05. ... en zie de resultaten

Bestel een compileer van het project, verander in de Distribution Map en zuivert UNNEEDED MAP-bestanden. 

 Tamhan @ Tamhan18: ~ / hoekspace / werktest $
sudo ng build
TAMHAN @ TAMHAN18: ~ / angularspace / werktest / dist / werktest $ LS

Roepen boom om de resultaten te zien - ng Creëert meerdere versies van verschillende codebestanden (zie onderstaande afbeelding).

Click the icon in the top right to enlarge

Klik op het pictogram in het rechtsboven om te vergroten (Afbeelding Credit: Tam Hanna)

06. Spawn een webarbeider

Webarbeiders laten JavaScript de laatste grens van inheemse toepassingen invoeren: massaal parallelle verwerking van taken. Met Angular 8 kan een webmedewerker rechtstreeks worden gemaakt vanaf het comfort van de ng opdrachtregelhulpprogramma. 

 Tamhan @ Tamhan18: ~ / hoekspace / werktest $
sudo ng genereert web-werker myworker
Maak TSCONFIG.WORKER.JSON (212 bytes)
Maak SRC / APP / MYWORKER.WORKER.TS (157 bytes)
Update tsconfig.app.json (236 bytes)
Update angular.json (3640 bytes)

07. Ontdek de code

ng 's uitvoer ziet er waarschijnlijk in het eerste gezicht intimiderend uit. Het bestand openen SRC / APP / MYWERKER.WORKER.TS in een codeeditor van keuze onthult code die u goed moet kennen van de Webworker specificatie. In principe ontvangt de werknemer berichten en verwerkt deze indien nodig. 

 /// & LT; REFERENTIE LIB = "WEBWERKER" / GT;
addventListener ('bericht', ({data}) = & gt; {
 const reactie = `reactie van werknemers op
$ {gegevens} `;
 postmessage (reactie);
});

08. Stel de steiger in

Hoektoepassingen bestaan ​​uit componenten. Afvuren van onze webarbeider is het beste in de Appcomponent , dat wordt uitgebreid met een luisteraar voor de Oninit evenement. Voorlopig zal het alleen statusinformatie uitzenden. 

 Importeren {COMPONENT, ONINIT} van '@ Angular / Core';
@Component ({
​​​
​
Exportklasse AppComponent Implements Oninit {
 TITEL = 'WORKERTEST';
 ngoninit () {
   console.LOG ("AppComponent: oninit ()");
 ​
}

09. Maak je geen zorgen over het gebrek aan constructeur

Ervaren typescript-ontwikkelaars vragen zichzelf waarom onze code de constructeur van de programmeertaal niet gebruikt. De reden daarvoor is dat ngoninit is een levenscyclusevenement dat wordt ontslagen wanneer een initialisatie-gebeurtenis plaatsvindt - dit hoeft niet gecorreleerd te zijn aan de aanroep van de klas.

10. Voer een kleine compileren uit

Op dit moment is het programma klaar om te rennen. We zullen het uitvoeren van de server binnenin ng , dat kan worden ingeroepen via de opdracht Serve. Een nette aspect van deze aanpak is dat het programma veranderingen detecteert en het project op de vlucht wordt gecompileerd. 

 Tamhan @ Tamhan18: ~ / hoekspace / werktest $
sudo ng dienen

Bekijk de figuur om dit in actie in de onderstaande afbeelding te zien.

Hit the icon in the top right to enlarge the image

Druk op het pictogram in het rechterbovenhoek om het beeld te vergroten (Afbeelding Credit: Tam Hanna)

11. ... en zoek de uitvoer

ng dienen putput het adres van zijn lokale webserver, die meestal is http: // localhost: 4200 / ​Open de webpagina en open de ontwikkelaarstools om de statusuitgang te zien. Houd er rekening mee dat console.log voert gegevens uit naar de browsersconsole en laat de console van het NODEJS-exemplaar onaangeroerd.

12. Ga aan het werk

Op dit moment creëren we een exemplaar van de werknemer en bieden we het een bericht. De resultaten worden vervolgens weergegeven in de browserconsole. 

 Indien (Type-werknemer! == 'undefined') {
 // Maak een nieuw
 Const-arbeider = nieuwe werknemer ('./ myworker.worker', {Type: 'Module'});
 werknemer.Onmessage = ({gegevens}) = & GT;​
   console.log ('Pagina Gekregen Message: $ \
{gegevens\}');
 ​
 werknemer.Postmessage ('Hallo');
} anders {
     console.LOG ("Geen werknemersondersteuning");
}

13. Verken Ivy

Toekomstige versies van Angular zullen een meer geavanceerde compiler gebruiken, die leidt naar nog kleinere opvattingen. Terwijl het product nog niet is voltooid, kan een klimop-enabled skelet worden voortgebracht via NG nieuw Ivy-Project - Inschakelen-Ivy ​Als alternatief kunt u de compilerinstellingen wijzigen zoals weergegeven in het fragment. 

 "AngularCompilerOptions": {
       "Enableivy": waar
}

Een waarschuwing: Ivy leidt tot verbazingwekkende afmeting, maar het is niet gratis. Het product moet nog stabiliseren, dus het gebruik ervan in productieve omgevingen wordt niet aanbevolen.

14. Probeer gemodificeerde NG-verwerking

Hoekig ng Opdrachtregel Tool gebruikte kindscripts voor een tijdje intern. Angular 8 UPS De ante in die u nu kunt, gebruikt u ook deze faciliteit om uw eigen taken uit te voeren, omdat uw aanvraag is geassembleerd en gecompileerd. 

 "Architect": {
       "Build": {
         "Bouwer": "@ Angular-Devkit /
Build-Angular: Browser ",

Een nette toepassing van ng Scripts omvat het direct uploaden van toepassingen naar cloudservices. De Git repository Biedt een nuttig script dat uw werk naar een Firebase-account uploadt.

15. Geniet van een verbeterde migratie

Ontwikkelaars die weg migreren van Angular 1.x, ook bekend als Angularjs, hebben een eerlijk deel van problemen gehad om de Navigator te laten werken in 'gecombineerde' applicaties. De nieuwe Unified Location Service is bedoeld om dit proces gladder te maken.

16. Ontdek Workspace Control

Grote projecten profiteren van de mogelijkheid om de werkruimtestructuur dynamisch te veranderen. Dit gebeurt via de nieuwe Workspace API geïntroduceerd in Angular 8.0 - de fragment die deze stap begeleidt, biedt een snel overzicht van het gedrag. 

 Async-functie demonstreren () {
   const host = werkruimtes.
creatorkspacehost (nieuwe nodejsssynchost ());
   Const-werkruimte = wacht op werkruimten.
leesworkspace ('Pad / to / Workspace / Directory /',
host);
   const project = werkruimte.projecten.
Krijg ('My-app');
   const buildtarget = project.targets.
krijg ('build');
   buildtarget.options.Optimisatie = waar;
   wacht op werkruimten.Work Worksspace (Workspace,
host);
}

17. Versnel het proces

Het bouwen van grote JavaScript-codebases wordt saai. Toekomstige versies van Angularjs zullen het Bazel Build-systeem van Google gebruiken om het proces - helaas te versnellen, op het moment van schrijven was het niet klaar voor primetime.

18. Vermijd het lopen dood

Hoewel Google extreme zorgt om code te breken, moeten sommige functies eenvoudigweg worden verwijderd omdat ze niet langer nodig zijn. Controleren Deze afschrijvingenlijst Voor meer informatie over functies die moeten worden vermeden.

19. Kijk naar het change-logboek

Zoals altijd kan één artikel nooit recht doen aan een hele release. Gelukkig, Dit veranderingslogboek Biedt een gedetailleerde lijst van alle wijzigingen - voor het geval u zich ooit als het controleren van de puls van een functie, vooral beste aan u controleren.

Heb je veel bestanden klaar voor upload naar je site? Back-them up in de meest betrouwbare cloud opslag ​

Dit artikel is oorspronkelijk gepubliceerd in Creative Web Design Magazine Webdesigner ​

Lees verder:

  • Voeg meertalige ondersteuning toe aan hoekig
  • De beste Javascript-API's
  • Hoe sneller, lichter javascript codecode

Procedures - Meest populaire artikelen

3 Essentiële Zbrush Retopology-technieken

Procedures Sep 11, 2025

(Afbeelding Credit: Glen Southern) Zbrhrush-retopologie, of hoe u een model in het algemeen wilt retopiseren, is éé..

Photoshop Kleurverandering: 2 Gereedschap die u moet kennen

Procedures Sep 11, 2025

SPRING NAAR: De kleurvervangingstool Het opdracht Kleurbereik ..

Hoe 3D en stripkunst combineren in Zbrush

Procedures Sep 11, 2025

Pagina 1 van 2: Pagina 1 Pagina 1 Pagina 2 3D-gespecialiseerde..

Ontwerpen van responsieve en apparaat-agnostische vormen

Procedures Sep 11, 2025

Of het nu gaat om een ​​aanmeldingsstroom of een multi-view-stappen, formulieren zijn een van de belangrijkste componenten va..

Teken een potloodportret van een hond

Procedures Sep 11, 2025

Bij het tekenen van PET-portretten, hoeft u het niet alleen te weten Hoe dieren te trekken : De taak wordt de pers..

7 moordende manieren om het gedrag van gebruikers

Procedures Sep 11, 2025

Websites gebruiken psychologische technieken om het gedrag van hun gebruikers te beïnvloeden. Tekenen op decennia van academisch onderzoek dat uitlegt hoe onze geest werkt en hoe we beslissi..

Inleiding tot bruikbaarheidstests

Procedures Sep 11, 2025

Een succesvol webproduct voldoet niet alleen aan de behoeften van uw organisatie, maar ook de behoeften van uw gebruikers. Bruikbaarheid testen - vroeg gedaan en vaak - is een kritieke manier..

Een geanimeerde webbanner in Photoshop maken

Procedures Sep 11, 2025

Het maken van webbanners is niet de meest glamoureuze banen in de wereld, maar het is iets dat elke ontwerper op een bepaald moment in hun carrière moet doen, waarschijnlijk vele malen voorb..

Categorieën