Wat is hoek 2?
Voor het bouwen van webapplicaties in HTML en JavaScript wordt een JavaScript-framework gebruikt dat bekend staat als Angular 2 en is gebouwd door Google. Tijdens het werken met toepassingen met één pagina kunnen de obstakels die u tegenkomt vaak worden overwonnen met Angular 2.
Modules in hoek 2
In een applicatie worden de logische grenzen samengesteld door Angular 2. De functionaliteiten kunnen worden gescheiden in verschillende modules in plaats van alles in één applicatie te plaatsen. Hieronder staan enkele van de onderdelen waarmee een module is gemaakt–
- Om toegang te krijgen tot de functionaliteit in de applicatie, worden de componenten die moeten worden geladen geïnformeerd naar Angular JS met behulp van de Bootstrap-array. De component moet in de bootstrap-array worden gedeclareerd zodat deze in de Angular JS-toepassing voor andere componenten kan worden gebruikt.
- De pijpen, derivaten, componenten, etc. worden geëxporteerd via de exportarray om in andere modules te worden gebruikt.
- Vanuit andere Angular JS-modules kan de functionaliteit worden geïmporteerd met behulp van importarray.
De architectuur van hoekig 2
De anatomie van een Angular 2-toepassing wordt beschreven door het bovenstaande diagram. De functionaliteit van de applicatie wordt bepaald door elke component die de logische grens vormt. De functionaliteit tussen componenten wordt gedeeld met behulp van gelaagde services.
Een component wordt gedefinieerd door klasse, sjabloon en metagegevens. De eigenschappen en methoden bestaan uit de klasse. De functionaliteit van de klas is uitgebreid en versierd met behulp van metadata. De HTML-weergave van de toepassing kan worden gedefinieerd met behulp van de sjabloon.
Deze applicatie heeft een rootmodule en verschillende componenten die de functionaliteit scheiden.
Net als de Root Angular-module heeft de functiemodule verschillende componenten die de functionaliteit verspreiden.
In een Angular JS-toepassing wordt het logische stuk code gedefinieerd door de componenten.
- De binding en afgeleiden worden gedaan door de sjabloon die de HTML van de toepassing bevat en de weergave van de toepassing weergeeft.
- De eigenschappen en methoden zijn aanwezig in de klasse die de weergave van de toepassing ondersteunt en is gedefinieerd in TypeScript. Het heeft de Classname, Property name, PropertyType en waarde.
- Met een decorateur wordt de metagegevens gedefinieerd die de extra gegevens bevatten.
Hoekige 2 functies
De kracht van een HTML wordt uitgebreid met behulp van een aangepast HTML-element dat bekend staat als een richtlijn. De richtlijnen in Angular 2 zijn ngif en ngFor.
- Elementen worden toegevoegd aan de HTML-code met behulp van het ngif-element in echte scenario's, maar zouden niet worden toegevoegd als het evalueert als False. Vertegenwoordigd door.
- Op basis van de voorwaarde for, wordt het element ngFor gebruikt.
Gegevensbinding is een van de functies in hoek 2. In een eigenschap van een klasse kan de eigenschap van een HTML-tag een binding zijn.
In Angular 2 is foutafhandeling een optie voor de toepassingen. De ReactJS-opvangbibliotheek is inbegrepen en de vangfunctie is gebruikt. Hieronder staat de foutafhandelingscode.
Voor de Error Handler-functie is de link opgenomen in de catch-functie. Naar de console wordt de fout verzonden door de foutafhandelingsfunctie. De uitvoering wordt voortgezet nadat de fout is teruggegooid in het hoofdprogramma. Hiermee wordt de fout omgeleid naar de console.
Gebruikers worden naar verschillende pagina's geleid met behulp van Routing nadat een optie is gekozen op de hoofdpagina.
Hierin kunnen de gegevens worden getransformeerd met behulp van verschillende filters en pijpen.
- Om te zetten in kleine letters.
- Om te zetten in hoofdletters.
- Van een invoertekenreeks kan een stukje gegevens worden gesneden. De startpositie van de schijf wordt bepaald door de start en de eindpositie wordt aangeduid door het einde.
- De invoertekenreeks kan worden geconverteerd naar datumnotatie met behulp van de datumfunctie.
- Naar de valuta-indeling wordt de invoertekenreeks geconverteerd met behulp van de valutafunctie.
- Als percentageformaat wordt de invoertekenreeks geconverteerd met de percentagefunctie.
Aangepaste pijpen kunnen ook worden gemaakt met behulp van Angular 2.
- De naam van de pijp wordt bepaald door de pijpenaam.
- De aangepaste pijpklasse wordt gedefinieerd door de pijpklasse.
- Voor het werken met de buis wordt de transformatiefunctie gebruikt.
- Aan de pijp worden de parameters doorgegeven door Parameters.
- Het retourtype van de buis wordt bepaald door het Return-type.
De levenscyclus van hoekig 2
Vanaf de start tot het einde van de applicatie heeft de Angular 2-applicatie zijn levenscyclus.
Dit diagram geeft de volledige levenscyclus van hoek 2 weer. Hieronder vindt u de beschrijving.
- De wijziging in de waarde van een gegevensgebonden eigenschap wordt beschreven met de methode ngOnChanges.
- Nadat Angular de gegevensgebonden eigenschappen weergeeft, wordt tijdens de initialisatie van de component de methode ngOnInit aangeroepen.
- Wanneer Angular zelf geen wijzigingen kon detecteren, wordt de ngDoCheck gebruikt voor detectie.
- In de weergave van de component wordt, wanneer de externe inhoud door de Angular wordt geprojecteerd, de ngAfterContentInit als reactie opgeroepen.
- Nadat de geprojecteerde inhoud door Angular is gecontroleerd, wordt de ngAfterContentChecked als reactie opgeroepen.
- Nadat de aanzichten en onderliggende aanzichten van de component zijn geïnitialiseerd door Angular, wordt de ngAfterInit genoemd.
- De ngAfterViewChecked wordt genoemd nadat de componenten en onderliggende weergaven door Angular zijn gecontroleerd.
- Voorafgaand aan de vernietiging van de richtlijn of het onderdeel door de Angular, vernietigen de ngo's die de opruimfase wordt genoemd.
Services is een andere eigenschap van Angular 2 die wordt gebruikt wanneer verschillende modules een gemeenschappelijke functionaliteit nodig hebben. Onder verschillende modules kan de databasefunctionaliteit worden hergebruikt. De database-functionaliteit kan worden gebruikt door die gemaakte service.
Waarom hebben we Angular 2 nodig?
- Angular 2 biedt functies die helpen bij het opsporen en begrijpen van de code, de ontwikkel- en bewerkingservaring zou ook worden verbeterd.
- De codering wordt consistenter met behulp van Angular 2.
- Angular 2 biedt uitgebreide bindmogelijkheden. De eigenschap bindende functie maakt het mogelijk om DOM te controleren. Reactie op een gebeurtenis vanuit het zicht zou kunnen worden bereikt met behulp van de gebeurtenis bindend.
- Angular 2 biedt een volledig functionele routeringsmogelijkheid.
- Angular 2 heeft uitgebreide documentatie en community-ondersteuning die voor bijna elk probleem een oplossing biedt.
Conclusie
Angular 2 is een van de meest gewilde webontwikkelingsframework en degene die u nodig hebt om uw volgende webtoepassing te bouwen.
Aanbevolen artikelen
Dit is een gids voor What is Angular 2 ?. Hier bespreken we de introductie, de functies Modules in Angular 2, Angular 2 samen met De levenscyclus van Angular 2. U kunt ook door onze andere voorgestelde artikelen gaan voor meer informatie–
- Hoe Angular 2 te installeren?
- R Programmeertaal
- Soorten websites
- Soorten webhosting