LUMIFY WORK Angular 15 Gebruikershandleiding voor programmeren

TOEPASSING EN WEB ONTWIKKELING
Hoekige 15 Programmering
LENGTE 5 dagen
VERSIE 15

Inhoud verbergen

1 WAAROM DEZE CURSUS STUDEREN

2 WAT JE LEERT?

3 CURSUSONDERWERPEN

4 VOOR WIE IS DE CURSUS?

5 PREREQUISITES

6 Documenten / Bronnen

6.1 Referenties

7 Gerelateerde berichten

WAAROM DEZE CURSUS STUDEREN

Deze intensieve en uitgebreide Angular 15-training biedt deelnemers vaardigheden die ze direct in hun werk kunnen gebruiken. Je leert de basisprincipes van Angular 15-ontwikkeling, zoals browserapplicaties van één pagina, responsief weblocaties en hybride mobiele toepassingen.
Deze cursus is een combinatie van theoretisch leren en praktische labs, inclusief een inleiding tot Angular, gevolgd door TypeScript, componenten, richtlijnen, services, HTTPClient, testen en debuggen.
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.

HOEKIG BIJ LUMIFY WORK

WAT JE LEERT?

Na succesvolle afronding van deze cursus beschikt u over de kennis om:

Ontwikkel hoekige toepassingen van één pagina met behulp van 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

Behandel push-dataverbindingen met behulp van de WebSocket-protocol
Werk met Angular Pipes om gegevens op te maken
Gebruik geavanceerde Angular Component Router-functies
Test en debug hoekige toepassingen met behulp van ingebouwde tools
Werk met Angular CLI

Mijn instructeur was geweldig in het omzetten van scenario's in voorbeelden uit de echte wereld die verband hielden met mijn specifieke situatie.
Ik voelde me welkom vanaf het moment dat ik aankwam en de mogelijkheid om als groep buiten het klaslokaal te zitten om onze situaties en onze doelen te bespreken was uiterst waardevol.
Ik heb veel geleerd en vond het belangrijk dat mijn doelen door het volgen van deze cursus werden bereikt.
Geweldig gedaan Lumify Work-team.AMANDA NICOLE
IT-ONDERSTEUNINGSDIENSTENMANAGER – HEALTH WORLD LIMITED

CURSUSONDERWERPEN

Maak kennis met Angular
• Wat is hoekig?
• Centrale kenmerken van het Angular Framework
• Passende gebruiksscenario's
• Bouwstenen van een hoekapplicatie
• Basisarchitectuur van een hoekapplicatie
• Angular installeren en gebruiken
• Anatomie van een hoekapplicatie
• Het uitvoeren van de applicatie
• Het bouwen en implementeren van de applicatie
• Hoekig voor native mobiele apps
Inleiding tot TypeScript
• Programmeertalen voor gebruik met Angular
• TypeScript-syntaxis
• Programmeereditors
• Het typesysteem – Variabelen definiëren
• Het typesysteem – Arrays definiëren
• Basisprimitieve typen
• Typ Functies in
• Type-inferentie
• Klassen definiëren
• Klassenmethoden
• Zichtcontrole
• Klasseconstructeurs
• Klasseconstructeurs – Alternatieve vorm
• Niet-geïnitialiseerde velden
• Interfaces
• Werken met ES6-modules
• var versus let
• Pijlfuncties
• Pijlfunctie Compacte syntaxis
• Sjabloonreeksen
• Generieke geneesmiddelen in de klas
• Generieken in functie

Componenten
• Wat is een onderdeel?
• Een example Component
• Een component maken met behulp van Angular CLI
• De componentklasse
• De @Component-decorateur
• Een component in zijn module registreren
• Componentsjabloon
• Example: HelloComponent-sjabloon
• Example: De HelloComponent-klasse
• Een component gebruiken
• Voer de applicatie uit
• Componenthiërarchie
• De applicatiewortelcomponent
• De bootstrap File
• Componentenlevenscyclushaken
• Example Lifecycle-haken
• CSS-stijlen
Component-sjablonen
• Sjablonen
• Sjabloonlocatie
• De Snor {{ }} Syntaxis
• DOM-elementeigenschappen instellen
• Elementtekst instellen
• Gebeurtenisbinding
• Expressiegebeurtenishandler
• Voorkom standaardafhandeling
• Attribuutrichtlijnen
• Pas stijlen toe door CSS-klassen te wijzigen
• Example: ngKlasse
• Stijlen direct toepassen
• Structurele richtlijnen
• Sjabloon voorwaardelijk uitvoeren
• Example: ngIf
• Loopen met ngFor
• ngVoor lokale variabelen
• Manipulatie van de collectie
• Example – Een item verwijderen
• Artikel volgen met ngFor
• Elementen uitwisselen met ngSwitch
• Elementen groeperen
• Sjabloonreferentievariabele

Communicatie tussen componenten
• Communicatiebasisprincipes
• De Data Flow-architectuur
• Het kind voorbereiden op het ontvangen van gegevens
• Gegevens verzenden van ouder
• Meer over het instellen van eigenschappen
• Ontstekingsgebeurtenis van een component
• @Output() Bijvample – Onderliggende component
• @Output() Bijvample – Bovenliggende component
• Volledige tweerichtingsbinding
• Tweerichtingsgegevensbinding instellen in ouder
Sjabloongestuurde formulieren
• Sjabloongestuurde formulieren
• Formulierenmodule importeren
• Basisaanpak
• Een formulier instellen
• Gebruikersinvoer verkrijgen
• Het ngForm-kenmerk weglaten
• Initialiseer het formulier
• Tweerichtingsgegevensbinding
• Formuliervalidatie
• Hoekige validators
• Validatiestatus weergeven met behulp van klassen
• Extra invoertypen
• Selectievakjes
• Selecteer (vervolgkeuzelijst) velden
• Renderopties voor selecteren (vervolgkeuzelijst)
• Datumvelden
• Radio knoppen

Reactieve formulieren
• Reactieve formulieren voorbijview
• De bouwstenen
• Importeer reactieve formulierenmodule
• Construeer een formulier
• Ontwerp de sjabloon
• Invoerwaarden verkrijgen
• Initialiseren van de invoervelden
• Formulierwaarden instellen
• Abonneren op invoerwijzigingen
• Geldigmaking
• Ingebouwde validators
• Validatiefout weergeven
• Aangepaste validatie
• Een aangepaste validator gebruiken
• Het leveren van configuratie aan Custom Validator
• FormArray – Dynamisch invoer toevoegen
• FormArray – De componentklasse
• FormArray – de sjabloon
• FormArray – Waarden
• SubformulierGroepen – Componentklasse
• Subformuliergroepen – HTML-sjabloon
• Waarom subformuliergroepen gebruiken
Diensten en afhankelijkheidsinjectie
• Wat is een dienst?
• Creëren van een Basisdienst
• De serviceklasse
• Wat is afhankelijkheidsinjectie?
• 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?
• Afhankelijkheidsinjectie in andere artefacten
• Het bieden van een alternatieve implementatie
• Afhankelijkheidsinjectie en @Host
• Afhankelijkheidsinjectie en @Optional

HTTP-client
• De Angular HTTP-client
• Het gebruik van de HTTP-client – voorbijview
• HttpClientModule importeren
• Service via HttpClient
• Een GET-verzoek indienen
• Wat doet een waarneembaar object?
• Gebruik van de Dienst in een Component
• De PeopleService-clientcomponent
• Foutafhandeling
• Het foutobject aanpassen
• Een POST-verzoek indienen
• Een PUT-verzoek indienen
• Een VERWIJDERverzoek indienen
Pipes en gegevensopmaak
• Wat zijn pijpen?
• Ingebouwde leidingen
• Pipes gebruiken in HTML-sjabloon
• Kettingbuizen
• Internationale pijpleidingen (i18n)
• Landinstellingen laden
• De datumpijp
• Het getal Pijp
• Valutapijp
• Maak een aangepaste pijp
• Aangepaste pijp Example
• Gebruik van aangepaste pijpen
• Een pijp gebruiken met ngFor
• Een filterpijp
• Pijpcategorie: puur en onzuiver
• Pure Pipe Example
• Onzuivere leiding Vbample

Inleiding tot toepassingen met één pagina
• Wat is een Single Page Application (SPA)
• Traditioneel Web Sollicitatie
• SPA-workflow
• Eén pagina-applicatie Advantages
• HTML5-geschiedenis-API
• SPA-uitdagingen
• Implementeren van SPA's met behulp van Angular
De hoekige componentrouter
• 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
• Het verkrijgen van de routeparameterwaarden
• Synchronisch ophalen van de routeparameter
• Een routeparameter asynchroon ophalen
• Queryparameters
• Het leveren van queryparameters
• Queryparameters asynchroon ophalen
• Problemen met handleiding URL invoeren en bladwijzers maken

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 operators
• 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
• Herstel van een fout
Hoekige modules
• Waarom hoekmodules?
• Anatomie van een moduleklas
• @NgModule-eigenschappen
• Functiemodules
• Example Modulestructuur
• Maak een domeinmodule
• Maak een gerouteerd/routeringsmodulepaar
• Maak een servicemodule
• Gemeenschappelijke modules creëren
• De ene module van de andere gebruiken

Geavanceerde routering
• Functiemodule met routering ingeschakeld
• Gebruik van de functiemodule
• Lui laden van de functiemodule
• Koppelingen maken voor de onderdelen van de featuremodule
• Meer over Lazy Loading
• Modules vooraf laden
• routerLinkActive-binding
• Standaard route
• Wildcard-routepad
• omleiden naar
• Onderliggende routes
• Onderliggende routes definiëren voor onderliggende routes
• Links voor onderliggende routes
• Navigatiebewakers
• Guard-implementaties creëren
• Bewakers gebruiken in een route
Eenheidstesten van hoektoepassingen
• Eenheidstests van hoekartefacten
• Testhulpmiddelen
• Typische teststappen
• Test resultaten
• Jasmijn-testsuites
• Jasmine-specificaties (eenheidstests)
• Verwachtingen (Beweringen)
• Matchers
• Examples over het gebruik van Matchers
• Gebruik van 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
• Het gebruik van een nep-HTTP-client
• Het leveren van standaardantwoorden
• Een component testen
• Componenttestmodule
• Een componentinstantie maken
• De ComponentFixture-klasse
• Basiscomponenttesten
• De klasse DebugElement
• Simulatie van gebruikersinteractie

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

VOOR WIE IS DE CURSUS?

Deze cursus is bedoeld voor iedereen die de basisprincipes van Angular 15-ontwikkeling wil leren en deze meteen moet toepassen op het creëren web toepassingen.
We kunnen deze training ook voor grotere groepen verzorgen en op maat maken, waardoor uw organisatie tijd, geld en middelen bespaart. Voor meer informatie kunt u contact met ons opnemen via e-mail op ph.training@lumifywork.com

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
Er is geen voorafgaande ervaring met Angular of AngularJS vereist

Op het aanbod van deze cursus door Lumify Work zijn de boekingsvoorwaarden van toepassing.
Lees de algemene voorwaarden zorgvuldig door voordat u zich inschrijft voor deze cursus, aangezien inschrijving voor de cursus afhankelijk is van acceptatie van deze algemene voorwaarden.

https://www.lumifywork.com/en-ph/courses/angular-15-programming/ ph.training@lumifywork.com
lumifywork.com
facebook.com/LumifyWorkPh
linkedin.com/company/lumify-work-ph
twitter.com/LumifyWorkPH
youtube.com/@lumifywork