LUMIFY WORK Angular 12 Programming

Wêrom studearje dizze kursus

Dizze wiidweidige kursus Angular 12 Programming is in kombinaasje fan teoretyske learen en praktyske laboratoaren dy't in ynlieding omfettet yn Angular, folge troch TypeScript, komponinten, rjochtlinen, tsjinsten, HTTP Client, testen en debuggen.
De kursus is fol mei nuttige en aksjebere ynformaasje dy't jo direkt kinne tapasse op jo wurk. Learje de fûneminten fan basisûntwikkeling fan Angular 12, lykas blêderapplikaasjes op ien pagina, responsyf websites, en hybride mobile applikaasjes.
Noat: Wy kinne ek training leverje op oare ferzjes fan Angular. Nim dan kontakt mei ús op om in ûndersyk te dwaan of jo belangstelling te registrearjen.

WAT JO LEARNE
Nei suksesfolle foltôging fan dizze kursus kinne jo:

• Untwikkelje Angular-applikaasjes mei ien side mei Typescript
• Stel in folsleine Angular-ûntwikkelingsomjouwing yn
• Meitsje komponinten, rjochtlinen, tsjinsten, pipes, formulieren en oanpaste validators
• Behannelje avansearre taken foar opheljen fan netwurkgegevens mei Observables Konsumearje gegevens fan REST web tsjinsten mei help fan de Angular HT TP Client Handle push-data ferbinings mei help fan de WebSockets protokol
• Wurkje mei Angular Pipes om gegevens op te meitsjen
• Brûk avansearre funksjes fan Angular Component Router
• Test en debug Angular-applikaasjes mei ynboude ark.

KURSUS FAKEN

Haadstik 1. Introducing Angular

• Wat is Angular?
• Sintrale eigenskippen fan it Angular Framework Passende gebrûk gefallen
• Boublokken fan in hoekapplikaasje Basisarsjitektuer fan in hoekapplikaasje Angular ynstallearje en brûke
• Anatomy fan in hoekapplikaasje dy't de applikaasje útfiert
• Bouwe en ynsette fan de applikaasje Angular foar Native Mobile Apps
• Gearfetting

Haadstik 2. Yntroduksje ta TypeScript

• Programmatalen foar gebrûk mei Angular TypeScript-syntaksis
• Programming Editors
• It type systeem - Defining fariabelen
• It typesysteem - Arrays definiearje
• Basis primitive soarten
• Typ yn Funksjes
• Typ Inference
• Klassen definiearje
• Klasse Metoaden
• Visibility Control
• Klasse Konstrukteurs
• Klassekonstruktors - Alternatyf formulier net inisjalisearre fjilden
• Schnittstellen
• Wurkje mei ES6 Modules
• var vs lit
• Arrow Funksjes
• Arrow Funksje Kompakte syntaksis sjabloan Strings
• Generika yn klasse
• Generics yn Funksje
• Gearfetting

Haadstik 3. Components

• Wat is in komponint?
• In eksample Component
• It meitsjen fan in komponint mei help fan Angular CLI
• De komponint klasse
• De @Component Decorator
• Registrearje in komponint oan syn module komponint sjabloan
• Example: HelloComponent Template
• Example: De HelloComponent-klasse mei in komponint
• Run de applikaasje
• Component Hierarchy
• De applikaasje Root-komponint
• De Bootstrap File
• Component Lifecycle Haken Example Lifecycle Haken
• CSS Styles
• Gearfetting

Haadstik 4. Component Templates

• Sjabloanen
• Template Lokaasje
• The Moustache {{ }} Syntaksis
• Ynstelle DOM Element Eigenskippen
• Ynstelling Element Body Text
• Event Bining
• Expression Event Handler
• Foarkom Standert Behanneling
• Attribute rjochtlinen
• Stilen tapasse troch CSS-klassen te feroarjen
• Example: ngklasse
• Stilen direkt tapasse
• Strukturele rjochtlinen
• Betingst útfiere sjabloan
• Example: ngif
• Looping Mei help fan ngFor
• ngFor Lokale fariabelen
• Manipulaasje fan de kolleksje Example - In item wiskje
• Item Tracking mei ng Foar it ruiljen fan eleminten mei ngSwitch Grouping Elements
• Template Referinsje fariabele Gearfetting

Haadstik 5. Inter Component Communication

• Kommunikaasje Basics
• De Data Flow Architecture
• It bern tariede om gegevens te ûntfangen
• Stjoer gegevens fan âlder
• Mear oer it ynstellen fan eigenskippen
• Firing Event fan in komponint
• @Output() Example – Child Component @Output() Example - Parent Component
• Folsleine Twa Way Binding
• It ynstellen fan Two Way Data Binding yn Parent
• Gearfetting

Haadstik 6. Template Driven Forms

• Template Driven Forms
• Ymportearje Forms Module
• Basis oanpak
• In formulier ynstelle
• Brûkerynput krije
• Welitte ngForm-attribuut
• Inisjalisearje it formulier
• Twa Way Data Binding
• Formuliervalidaasje
• Angular Validators
• Displaying Validation State Using Classes Oanfoljende ynfier Soarten
• Checkboxes
• Selektearje (Drop Down) fjilden
• Rendering opsjes foar Selektearje (Drop Down) Datum fjilden
• Radio knoppen
• Gearfetting

Haadstik 7. Reactive Forms

• Reaktive formulieren oerview
• De Bouwstenen
• Ymportearje ReactiveFormsModule
• Konstruearje in formulier
• Untwerp it sjabloan
• Getting Ynput Wearden
• Inisjalisearjen fan de ynfierfjilden
• Formulierwearden ynstelle
• Abonnearje op ynfierferoarings
• Validaasje
• Ynboude Validators
• Toant falidaasjeflater
• Oanpaste Validator
• Mei help fan in oanpaste validator
• Konfiguraasje leverje oan Custom Validator
• FormArray - Ynput dynamysk tafoegje
• FormArray - De komponint klasse
• FormArray - It sjabloan
• FormArray - Wearden
• Sub FormGroups - Component Class
• Sub FormGroups - HTML-sjabloan
• Wêrom brûke Sub FormGroups
• Gearfetting

Haadstik 8. Tsjinsten en ôfhinklikens Injection

• Wat is in tsjinst?
• It meitsjen fan in Basic Service
• De tsjinstklasse
• Wat is Dependency Injection?
• Injecting in Service Instance
• Ynjeksjers
• Injector hierargy
• Registrearje in tsjinst mei de Root Injector
• Registrearje in tsjinst mei in komponint syn Injector
• Registrearje in tsjinst mei in Feature Module Injector
• Wêr registrearje in tsjinst?
• Ofhinklikensynjeksje yn oare artefakten dy't in alternatyf ymplemintaasje-ôfhannelingynjeksje leverje en @Host
• Ofhinklikensynjeksje en @Opsjoneel
• Gearfetting

Haadstik 9. HTTP Client

• De Angular HT TP Client
• It brûken fan T he HT TP Client - Overview
• HttpClientModule ymportearje
• Tsjinst Mei help fan HttpClient
• It meitsjen fan in GET-fersyk
• Wat docht in waarnimmber objekt?
• It brûken fan de tsjinst yn in komponint
• De PeopleService Client Component Error Handling
• It flaterobjekt oanpasse
• It meitsjen fan in POST-fersyk
• It meitsjen fan in PUT-fersyk
• It meitsjen fan in DELETE-fersyk

Haadstik 10. Pipen en Data Formatting

• Wat binne Pipes?
• Ynboude Pipes
• Pipes brûke yn HTML Template Chaining Pipes
• Ynternasjonalisearre Pipes (i18n) Loading Locale Data
• De datum Pipe
• It nûmer Pipe
• Faluta Pipe
• Meitsje in oanpaste Pipe
• Oanpaste Pipe Example
• Mei help fan oanpaste pipes
• Mei help fan in Pipe mei ngFor
• In filterpipe
• Pipe Kategoryen: Suver en ûnrein
• Gearfetting
• Pure Pipe Example
• Unreine Pipe Example
• Gearfetting

Haadstik 11. Yntroduksje ta Single Page Applications

• Wat is in Single Page Application (SPA) tradisjoneel Web Oanfraach
• SPA Workflow
• Single Page Application Advantages HTML5 History API
• SPA Challenges
• SPA's ymplementearje mei Angular Summary

Haadstik 12. De Angular Component Router

• De komponint Router
• View Navigaasje
• De Angular Router API
• It meitsjen fan in router-ynskeakele applikaasje
• Hosting fan de routede komponinten
• Navigaasje mei keppelings en knoppen
• Programmatyske navigaasje
• Passing Route Parameters
• Navigearje mei rûteparameters
• It krijen fan de rûteparameterwearden
• It opheljen fan de Route Parameter Synchronously
• It opheljen fan in rûteparameter asynchronous
• Query Parameters
• It leverjen fan Query Parameters
• Query parameters asynchronously ophelje
• Problemen mei Manual URL yngong en Blêdwizer
• Gearfetting

Haadstik 13. Avansearre HTTP Client

• Fersyk opsjes
• It weromjaan fan in HttpResponse-objekt
• It ynstellen fan fersykkoppen
• It meitsjen fan Nije Observables
• It meitsjen fan in ienfâldige waarneembare
• De Observable Constructor Method Observable Operators
• De kaart en filter Operators
• De flatMap() Operator
• De tap() Operator
• De zip() Combinator
• Caching HT TP Response
• Opfolgjende HT TP-oproppen meitsje
• It meitsjen fan parallelle oproppen
• Flaterobjekt oanpasse mei catchError()
• Flater yn Pipeline
• Flaterherstel
• Gearfetting

Haadstik 14. Angular Modules

• Wêrom Angular Modules?
• Anatomy fan in module klasse
• @NgModule Eigenskippen
• Feature Modules
• Example Module Struktuer
• Meitsje in domeinmodule
• Meitsje in Routed / Routing Module Pair
• Meitsje in Service Module
• It meitsjen fan mienskiplike modules

Haadstik 15. Avansearre Routing

• Routing Enabled Feature Module
• Mei help fan de Feature Module
• Lazy laden fan de Feature Module
• Keppelings oanmeitsje foar de komponinten fan 'e Feature Module
• Mear oer Lazy Loading
• Foarladen modules
• Standert Route
• Wildcard Route Paad
• trochferwizing nei
• Bern Routes
• It definiearjen fan bernrûtes
• foar Child Routes
• Links foar Child Routes
• Navigaasje Guards
• It meitsjen fan Guard Implementaasjes
• Mei help fan Guards yn in rûte
• Gearfetting

Haadstik 16. Unit Testing Angular Applications

• Unit Testing Angular Artifacts
• Testing Tools
• Typyske teststappen
• Testresultaten
• Jasmine Test Suites
• Jasmine Specs (Unit Tests)
• Ferwachtings (ferwachtings)
• Matchers
• Examples fan it brûken fan Matchers
• It brûken fan it net Property
• Opset en teardown yn Unit Test Suites
• Example fan beforeEach en afterEach Functions
• Angular Test Module
• Example Angular Test Module
• Testen fan in tsjinst
• Injecting in Service Instance
• Test in syngroane metoade
• Testje in asynchrone metoade
• Mei help fan Mock HT TP Client
• It leverjen fan Canned Response
• Testen fan in komponint
• Component Test Module
• It meitsjen fan in komponint eksimplaar
• De ComponentFixture-klasse
• Basis komponint Tests
• De DebugElement-klasse
• Simulearjen fan brûkersynteraksje
• Gearfetting

Haadstik 17. Debuggen

• Oerview fan Angular Debuggen
• Viewing TypeScript Code yn Debugger
• Mei help fan de debugger Keyword
• Debug Logging
• Wat is Angular DevTools?
• Mei help fan Angular DevTools
• Angular DevTools - Component Struktuer
• Angular DevTools - Feroaringsdeteksje útfiering
• Syntaksisflaters fangen
• Gearfetting

Lab Oefeningen

• Lab 1. Ynlieding ta Angular
• Lab 2. Yntroduksje ta TypeScript
• Lab 3. Ynlieding ta komponinten
• Lab 4. Component Template
• Lab 5. Meitsje in Photo Gallery Component
• Lab 6. Template Driven Form
• Lab 7. Meitsje in bewurkje formulier
• Lab 8. Reactive Form
• Lab 9. Untwikkelje in tsjinst
• Lab 10. Untwikkelje in HT TP Client
• Lab 11. Brûk Pipes
• Lab 12. Basic Single Page Applikaasje Mei help fan Router Lab 13. Bou in Single Page Application (SPA)
• Lab 14. Avansearre HT TP Client
• Lab 15. Mei help fan Angular Bootstrap
• Lab 16. Lazy Module Loading
• Lab 17. Avansearre Routing
• Lab 18. Unit Testing
• Lab 19. Debuggen Angular Applications

WAT IS DE KURSUS FOAR?
Dizze kursus is rjochte op elkenien dy't de fûneminten fan Angular 12-ûntwikkeling moat leare en it tapasse op it meitsjen web applikaasjes direkt. Wy kinne dizze oplieding ek leverje en oanpasse foar gruttere groepen - jo organisaasje tiid, jild en middels besparje.

FEREISTEN
Web ûntwikkelingsûnderfining mei HTML, CSS en JavaScript is nedich om it measte út dizze Angular-kursus te heljen. Kennis fan 'e browser DOM is ek nuttich. Foarôfgeande Angular-ûnderfining, mei AngularJS as elke ferzje fan Angular, is net fereaske.
https://www.lumifywork.com/en-au/courses/angular-12-programming/

Dokuminten / Resources

LUMIFY WORK Angular 12 Programming [pdf] Brûkersgids Angular 12 Programming, Angular, 12 Programming, Programming

Referinsjes

• User Manual