LUMIFY WORK Hoekig 12 Programmeren

WAAROM DEZE CURSUS STUDEREN

Deze uitgebreide Angular 12 Programming-cursus is een combinatie van theoretisch leren en praktijkgerichte labs, inclusief een inleiding tot Angular, gevolgd door TypeScript, componenten, richtlijnen, services, HTTP Client, testen en debuggen.
De cursus zit boordevol nuttige en bruikbare informatie die u meteen op uw werk kunt toepassen. Leer de basisprincipes van de basisontwikkeling van Angular 12, zoals browserapplicaties met één pagina, responsief websites en hybride mobiele applicaties.
Opmerking: Wij kunnen ook trainingen geven over andere versies van Angular. Neem contact met ons op voor een aanvraag of om uw interesse te registreren.

WAT JE LEERT?
Na succesvolle afronding van deze cursus kunt u:

• Ontwikkel Angular-applicaties van één pagina met Typescript
• Zet een complete Angular ontwikkelomgeving op
• Maak componenten, richtlijnen, services, pipelines, formulieren en aangepaste validators
• Verwerk geavanceerde taken voor het ophalen van netwerkgegevens met behulp van Observables. Verbruik gegevens uit REST web services met behulp van de Angular HTTP Client Verwerk push-dataverbindingen met behulp van de WebSockets-protocol
• Werk met Angular Pipes om gegevens op te maken
• Gebruik geavanceerde Angular Component Router-functies
• Test en debug Angular-applicaties met behulp van ingebouwde tools.

CURSUSONDERWERPEN

Hoofdstuk 1. Introductie van Angular

• Wat is Angular?
• Centrale kenmerken van het Angular Framework Passende gebruiksscenario's
• Bouwstenen van een Angular-applicatie Basisarchitectuur van een Angular-applicatie Angular installeren en gebruiken
• Anatomie van een hoekige applicatie waarop de applicatie draait
• Het bouwen en implementeren van de applicatie Angular voor native mobiele apps
• Samenvatting

Hoofdstuk 2. Inleiding tot TypeScript

• Programmeertalen voor gebruik met Angular TypeScript-syntaxis
• Programmeer-editors
• Het typesysteem – Variabelen definiëren
• Het typesysteem – Arrays definiëren
• Basis primitieve typen
• Typ Functies
• Type-inferentie
• Klassen definiëren
• Klassemethoden
• Zichtbaarheidscontrole
• Klasseconstructeurs
• Klasseconstructeurs – Alternatieve niet-geïnitialiseerde velden
• Interfaces
• Werken met ES6-modules
• var versus let
• Pijlfuncties
• Pijlfunctie Compacte syntaxissjabloonreeksen
• Generieke geneesmiddelen in de klas
• Generieken in functie
• Samenvatting

Hoofdstuk 3. Componenten

• Wat is een onderdeel?
• Een Example Component
• Een component maken met behulp van Angular CLI
• De componentenklasse
• De @Component-decorateur
• Een component registreren in de bijbehorende modulecomponentsjabloon
• Example: HelloComponent-sjabloon
• Example: De HelloComponent-klasse die een component gebruikt
• Voer de applicatie uit
• Componenthiërarchie
• De applicatierootcomponent
• De Bootstrap File
• Component levenscyclushaken Vbample Lifecycle-haken
• CSS-stijlen
• Samenvatting

Hoofdstuk 4. Componentsjablonen

• Sjablonen
• Sjabloonlocatie
• De Snor {{ }} Syntaxis
• DOM-elementeigenschappen instellen
• Instellen van de hoofdtekst van het element
• Evenement bindend
• Expressiegebeurtenishandler
• Voorkom standaardafhandeling
• Attribuutrichtlijnen
• Stijlen toepassen door CSS-klassen te wijzigen
• Example: ngKlasse
• Stijlen rechtstreeks toepassen
• Structurele richtlijnen
• Sjabloon voorwaardelijk uitvoeren
• Example: ngIf
• Loopen met ngFor
• ngVoor lokale variabelen
• Manipuleren van de collectie Example – Een item verwijderen
• Item volgen met ngVoor het wisselen van elementen met ngSwitch-groeperingselementen
• Samenvatting van sjabloonreferentievariabelen

Hoofdstuk 5. Communicatie tussen componenten

• Communicatie Basisprincipes
• De dataflow-architectuur
• Het kind voorbereiden op het ontvangen van gegevens
• Gegevens verzenden van ouder
• Meer over het instellen van eigenschappen
• Ontstekingsgebeurtenis van een component
• @Uitvoer() Bijvample – Onderliggende component @Output() Bijvample – Bovenliggende component
• Volledige tweerichtingsbinding
• Tweerichtingsgegevensbinding instellen in ouder
• Samenvatting

Hoofdstuk 6. Sjabloongestuurde formulieren

• Sjabloongestuurde formulieren
• Formulierenmodule importeren
• Basisbenadering
• Een formulier instellen
• Gebruikersinvoer verkrijgen
• Het ngForm-kenmerk wordt weggelaten
• Initialiseer het formulier
• Tweerichtingsdatabinding
• Formulier validatie
• Hoekige validatoren
• Validatiestatus weergeven met behulp van klassen Extra invoertypen
• Selectievakjes
• Selecteer (vervolgkeuzelijst) Velden
• Weergaveopties voor geselecteerde datumvelden (vervolgkeuzelijst).
• Keuzerondjes
• Samenvatting

Hoofdstuk 7. Reactieve formulieren

• Reactieve formulieren voorbijview
• De bouwstenen
• ReactiveFormsModule importeren
• Construeer een formulier
• Ontwerp de sjabloon
• Invoerwaarden verkrijgen
• Initialiseren van de invoervelden
• Formulierwaarden instellen
• Abonneren op invoerwijzigingen
• Geldigmaking
• Ingebouwde validatoren
• Validatiefout weergeven
• Aangepaste validatie
• Een aangepaste validator gebruiken
• Configuratie leveren aan Custom Validator
• FormArray – Dynamisch invoer toevoegen
• FormArray – De componentklasse
• FormArray – De sjabloon
• FormArray – Waarden
• Subformuliergroepen – Componentklasse
• Subformuliergroepen – HTML-sjabloon
• Waarom subformuliergroepen gebruiken
• Samenvatting

Hoofdstuk 8. Diensten en injectie van afhankelijkheid

• Wat is een dienst?
• Een basisdienst creëren
• De serviceklasse
• Wat is Dependency Injection?
• Een service-instantie injecteren
• injectoren
• Injectorhiërarchie
• Een dienst registreren bij de Root Injector
• Een service registreren met de injector van een component
• Registreer een service met een Feature Module Injector
• Waar kunt u een dienst registreren?
• Dependency Injection in andere artefacten die een alternatieve implementatie bieden Dependency Injection en @Host
• Afhankelijkheidsinjectie en @Optional
• Samenvatting

Hoofdstuk 9. HTTP-client

• De Angular HTTP-client
• Het gebruik van de HTTP-client – ​​voorbijview
• HttpClientModule importeren
• Dienst met behulp van HttpClient
• Een GET-verzoek indienen
• Wat doet een waarneembaar object?
• Gebruik van de dienst in een component
• Foutafhandeling van de PeopleService-clientcomponent
• Het foutobject aanpassen
• Een POST-verzoek indienen
• Een PUT-verzoek indienen
• Een DELETE-verzoek indienen

Hoofdstuk 10. Pipes en gegevensopmaak

• Wat zijn pijpen?
• Ingebouwde pijpen
• Pijpen gebruiken in HTML-sjabloon Pijpen aan elkaar koppelen
• Geïnternationaliseerde Pipes (i18n) Lokale gegevens laden
• De datumpijp
• Het nummer Pijp
• Valuta pijp
• Maak een aangepaste pijp
• Aangepaste pijp bijvample
• Aangepaste pijpen gebruiken
• Een pijp gebruiken met ngFor
• Een filterpijp
• Pijpcategorie: Puur en onzuiver
• Samenvatting
• Zuivere pijp bijvample
• Onzuivere pijp bijvample
• Samenvatting

Hoofdstuk 11. Inleiding tot Single Page-applicaties

• Wat is een Single Page Application (SPA) Traditioneel Web Sollicitatie
• SPA-workflow
• Applicatie met één pagina Advantages HTML5-geschiedenis-API
• SPA-uitdagingen
• SPA's implementeren met behulp van Angular Summary

Hoofdstuk 12. De Angular Component Router

• De componentenrouter
• View Navigatie
• De Angular Router-API
• Een router-compatibele applicatie maken
• Het hosten van de gerouteerde componenten
• Navigatie met behulp van koppelingen en knoppen
• Programmatische navigatie
• Routeparameters doorgeven
• Navigeren met routeparameters
• De routeparameterwaarden verkrijgen
• De routeparameter synchroon ophalen
• Een routeparameter asynchroon ophalen
• Queryparameters
• Queryparameters leveren
• Queryparameters asynchroon ophalen
• Problemen met handleiding URL invoeren en bladwijzers maken
• Samenvatting

Hoofdstuk 13. Geavanceerde HTTP-client

• Opties aanvragen
• Een HttpResponse-object retourneren
• Verzoekheaders instellen
• Nieuwe waarneembare waarnemingen creëren
• Een eenvoudig waarneembaar creëren
• De waarneembare constructormethode Waarneembare operatoren
• De kaart- en filteroperatoren
• De flatMap()-operator
• De tap()-operator
• De zip()-combinator
• HTTP-reactie in cache opslaan
• Sequentiële HTTP-gesprekken voeren
• Parallelle gesprekken voeren
• Foutobject aanpassen met catchError()
• Fout in pijplijn
• Foutherstel
• Samenvatting

Hoofdstuk 14. Hoekmodules

• Waarom hoekmodules?
• Anatomie van een moduleklas
• @NgModule-eigenschappen
• Functiemodules
• Example Modulestructuur
• Maak een domeinmodule
• Maak een gerouteerd/routeringsmodulepaar
• Maak een servicemodule
• Gemeenschappelijke modules maken

Hoofdstuk 15. Geavanceerde routering

• Functiemodule met routering ingeschakeld
• Gebruik van de functiemodule
• Lui laden van de functiemodule
• Koppelingen maken voor de onderdelen van de functiemodule
• Meer over Lazy Loading
• Modules vooraf laden
• Standaardroute
• Wildcard-routepad
• omleiden naar
• Kindroutes
• Onderliggende routes definiëren
• voor onderliggende routes
• Links voor onderliggende routes
• Navigatiebewakers
• Guard-implementaties maken
• Bewakers gebruiken in een route
• Samenvatting

Hoofdstuk 16. Eenheidstests van hoektoepassingen

• Eenheidstest van hoekartefacten
• testtools
• Typische teststappen
• Testresultaten
• Jasmijn testsuites
• Jasmine-specificaties (eenheidstests)
• Verwachtingen (Beweringen)
• Matchers
• Examples over het gebruik van Matchers
• Gebruik de niet-eigenschap
• Opzetten en afbreken in Unit Test Suites
• Exampbestand van beforeEach en afterEach-functies
• Hoekige testmodule
• Example Hoekige testmodule
• Een dienst testen
• Een service-instantie injecteren
• Test een synchrone methode
• Test een asynchrone methode
• Met behulp van Mock HTTP-client
• Standaardantwoord leveren
• Een onderdeel testen
• Componenttestmodule
• Een componentinstantie maken
• De ComponentFixture-klasse
• Basiscomponententests
• De DebugElement-klasse
• Gebruikersinteractie simuleren
• Samenvatting

Hoofdstuk 17. Foutopsporing

• Overview van hoekige foutopsporing
• ViewTypeScript-code in Debugger invoeren
• Het debugger-trefwoord gebruiken
• Logboekregistratie foutopsporing
• Wat is Angular DevTools?
• Angular DevTools gebruiken
• Angular DevTools – Componentstructuur
• Angular DevTools – Uitvoering van wijzigingsdetectie
• Syntaxisfouten opvangen
• Samenvatting

Lab-oefeningen

• Lab 1. Inleiding tot Angular
• Lab 2. Inleiding tot TypeScript
• Lab 3. Inleiding tot componenten
• Lab 4. Componentsjabloon
• Lab 5. Maak een fotogalerijcomponent
• Lab 6. Sjabloongestuurde vorm
• Lab 7. Maak een bewerkingsformulier
• Lab 8. Reactieve vorm
• Lab 9. Ontwikkel een dienst
• Lab 10. Ontwikkel een HTTP-client
• Lab 11. Gebruik pijpen
• Lab 12. Basisapplicatie voor één pagina met router Lab 13. Bouw een applicatie voor één pagina (SPA)
• Lab 14. Geavanceerde HTTP-client
• Lab 15. Hoekige bootstrap gebruiken
• Lab 16. Luie module laden
• Lab 17. Geavanceerde routering
• Lab 18. Testen van eenheden
• Lab 19. Foutopsporing in hoekige toepassingen

VOOR WIE IS DE CURSUS?
Deze cursus is bedoeld voor iedereen die de basisprincipes van Angular 12-ontwikkeling wil leren en deze moet toepassen op het creëren web aanvragen meteen. We kunnen deze training ook voor grotere groepen verzorgen en op maat maken, waardoor uw organisatie tijd, geld en middelen bespaart.

PREREQUISITES
Web ontwikkelervaring met HTML, CSS en JavaScript is vereist om het meeste uit deze Angular-cursus te halen. Kennis van de browser DOM is ook handig. Voorafgaande ervaring met Angular, met AngularJS of een andere versie van Angular, is niet vereist.
https://www.lumifywork.com/en-au/courses/angular-12-programming/

Documenten / Bronnen

LUMIFY WORK Hoekig 12 Programmeren [pdf] Gebruikershandleiding Hoekig 12 Programmeren, Hoekig, 12 Programmeren, Programmeren

Referenties

• Gebruiksaanwijzing