LUMIFY WORK Angular 12 Uživatelská příručka k programování

LUMIFY WORK Angular 12 Programování

PROČ STUDOVAT TENTO KURZ

Tento komplexní kurz programování Angular 12 je kombinací teoretické výuky a praktických cvičení, která zahrnuje úvod do Angular, po kterém následuje TypeScript, komponenty, direktivy, služby, HTTP klient, testování a ladění.
Kurz je nabitý užitečnými a užitečnými informacemi, které můžete okamžitě použít ve své práci. Naučte se základy základního vývoje Angular 12, jako jsou jednostránkové aplikace prohlížeče, responzivní webweby a hybridní mobilní aplikace.
Poznámka: Můžeme také poskytnout školení na jiných verzích Angular. Prosím, kontaktujte nás pro poptávku nebo zaregistrujte svůj zájem.

CO SE NAUČÍTE
Po úspěšném absolvování tohoto kurzu budete schopni:

• Vyvíjejte jednostránkové aplikace Angular pomocí Typescript
• Nastavte kompletní vývojové prostředí Angular
• Vytvářejte komponenty, směrnice, služby, kanály, formuláře a vlastní validátory
• Zvládejte pokročilé úlohy získávání síťových dat pomocí Observables Consume data z REST web služby využívající klienta Angular HT TP Zvládejte push-data připojení pomocí WebProtokol zásuvek
• Pracujte s Angular Pipes pro formátování dat
• Používejte pokročilé funkce Angular Component Router
• Testujte a ladte aplikace Angular pomocí vestavěných nástrojů.

PŘEDMĚTY KURZU

Kapitola 1. Představení Angular

• Co je Angular?
• Centrální vlastnosti Angular Framework Vhodné případy použití
• Stavební bloky úhlové aplikace Základní architektura úhlové aplikace Instalace a používání Angular
• Anatomie úhlové aplikace Spuštění aplikace
• Vytvoření a nasazení aplikace Angular pro nativní mobilní aplikace
• Shrnutí

Kapitola 2. Úvod do TypeScript

• Programovací jazyky pro použití se syntaxí Angular TypeScript
• Editory programování
• Typový systém – Definování proměnných
• Typový systém – Definování polí
• Základní primitivní typy
• Zadejte Funkce
• Typ Inference
• Definování tříd
• Třídní metody
• Kontrola viditelnosti
• Konstruktoři třídy
• Konstruktory tříd – Neinicializovaná pole alternativních formulářů
• Rozhraní
• Práce s moduly ES6
• var vs let
• Funkce šipek
• Funkce šipky Řetězce šablony kompaktní syntaxe
• Generika ve třídě
• Generika ve funkci
• Shrnutí

Kapitola 3. Komponenty

• Co je to komponenta?
• Example Komponenta
• Vytvoření komponenty pomocí Angular CLI
• Třída komponent
• @Component Decorator
• Registrace součásti do šablony součásti modulu
• Example: Šablona HelloComponent
• Example: Třída HelloComponent pomocí komponenty
• Spusťte aplikaci
• Hierarchie komponent
• Kořenová komponenta aplikace
• Bootstrap File
• Háčky životního cyklu součástí Přample Lifecycle Háčky
• CSS styly
• Shrnutí

Kapitola 4. Šablony součástí

• Šablony
• Umístění šablony
• Syntaxe Mustache {{ }}
• Nastavení vlastností prvku DOM
• Nastavení textu těla prvku
• Vazba události
• Zpracování události výrazu
• Zabránit výchozí manipulaci
• Atributové směrnice
• Aplikujte styly změnou tříd CSS
• Example: ngClass
• Přímé použití stylů
• Strukturální směrnice
• Podmíněně spustit šablonu
• Example: ngIf
• Looping pomocí ngFor
• ngPro místní proměnné
• Manipulace se sbírkou Přample – Odstranění položky
• Sledování položek pomocí ngPro výměnu prvků s prvky seskupení ngSwitch
• Souhrn referenčních proměnných šablony

Kapitola 5. Komunikace mezi komponentami

• Základy komunikace
• Architektura toku dat
• Příprava dítěte na příjem dat
• Odeslat data od rodiče
• Více o nastavení vlastností
• Spuštění události z komponenty
• @Output() Přample – Podřízená komponenta @Output() Přample – Nadřazená komponenta
• Plná dvoucestná vazba
• Nastavení obousměrné datové vazby v nadřazeném prvku
• Shrnutí

Kapitola 6. Formuláře řízené šablonou

• Formuláře řízené šablonou
• Import modulu formulářů
• Základní přístup
• Nastavení formuláře
• Získání uživatelského vstupu
• Vynechání atributu ngForm
• Inicializujte formulář
• Dvoucestná datová vazba
• Ověření formuláře
• Úhlové validátory
• Zobrazení stavu ověření pomocí tříd Další typy vstupu
• Zaškrtávací políčka
• Vyberte (rozbalovací) pole
• Možnosti vykreslování pro pole Vybrat (rozbalovací) datum
• Přepínače
• Shrnutí

Kapitola 7. Reaktivní formy

• Reaktivní formy přesview
• Stavební bloky
• Importujte ReactiveFormsModule
• Vytvořte formulář
• Navrhněte šablonu
• Získání vstupních hodnot
• Inicializace vstupních polí
• Nastavení hodnot formuláře
• Přihlášení k odběru změn vstupu
• Validace
• Vestavěné validátory
• Zobrazuje se chyba ověření
• Vlastní validátor
• Použití vlastního validátoru
• Dodání konfigurace do vlastního validátoru
• FormArray – Dynamicky přidávat vstupy
• FormArray – Třída komponent
• FormArray – Šablona
• FormArray – Hodnoty
• Sub FormGroups – Třída komponent
• Sub FormGroups – HTML šablona
• Proč používat podskupiny formulářů
• Shrnutí

Kapitola 8. Služby a vkládání závislostí

• Co je to služba?
• Vytvoření základní služby
• Třída služeb
• Co je Dependency Injection?
• Vložení instance služby
• Vstřikovače
• Hierarchie vstřikovačů
• Registrace služby pomocí kořenového injektoru
• Registrace služby u vstřikovače součásti
• Zaregistrujte si službu pomocí vstřikovače funkčního modulu
• Kde zaregistrovat službu?
• Vložení závislosti v jiných artefaktech poskytující alternativní vložení závislosti implementace a @Host
• Dependency Injection a @Optional
• Shrnutí

Kapitola 9. HTTP klient

• Klient Angular HT TP
• Použití klienta HT TP – Overview
• Import modulu HttpClientModule
• Služba pomocí HttpClient
• Podání žádosti GET
• Co dělá pozorovatelný objekt?
• Používání Služby v Komponentě
• Zpracování chyb klientské komponenty PeopleService
• Přizpůsobení objektu Error
• Odeslání požadavku POST
• Podání požadavku PUT
• Odeslání požadavku SMAZÁNÍ

Kapitola 10. Trubky a formátování dat

• Co jsou trubky?
• Vestavěné trubky
• Použití potrubí v šabloně HTML řetězení potrubí
• Internacionalizované kanály (i18n) Načítání dat o lokalitě
• Datum Pipe
• Číslo Pipe
• Měna potrubí
• Vytvořte vlastní potrubí
• Vlastní potrubí Přample
• Použití vlastních potrubí
• Použití potrubí s ngFor
• Filtrační trubka
• Kategorie potrubí: Čisté a nečisté
• Shrnutí
• Pure Pipe Example
• Nečisté potrubí Přample
• Shrnutí

Kapitola 11. Úvod do jednostránkových aplikací

• Co je tradiční jednostránková aplikace (SPA). Web Aplikace
• Pracovní postup SPA
• Jednostránková aplikace Advantages HTML5 History API
• SPA výzvy
• Implementace SPA pomocí Angular Summary

Kapitola 12. Router Angular Component

• Component Router
• View Navigace
• Angular Router API
• Vytvoření aplikace s podporou směrovače
• Hostování směrovaných komponent
• Navigace pomocí odkazů a tlačítek
• Programatická navigace
• Předávání parametrů trasy
• Navigace pomocí parametrů trasy
• Získání hodnot parametrů trasy
• Synchronní načítání parametru trasy
• Načítání parametru trasy asynchronně
• Parametry dotazu
• Zadání parametrů dotazu
• Asynchronní načítání parametrů dotazu
• Problémy s manuálem URL vstup a záložka
• Shrnutí

Kapitola 13. Pokročilý HTTP klient

• Možnosti žádosti
• Vrácení objektu HttpResponse
• Nastavení záhlaví požadavků
• Vytváření nových pozorovatelů
• Vytvoření jednoduchého pozorovatelného
• Metoda pozorovatelného konstruktoru Pozorovatelní operátoři
• Mapa a filtr Operátoři
• Operátor flatMap().
• Operátor tap().
• Kombinátor zip().
• Ukládání odpovědi HT TP do mezipaměti
• Provádění sekvenčních HT TP volání
• Provádění paralelních hovorů
• Přizpůsobení objektu chyby pomocí catchError()
• Chyba v potrubí
• Obnovení po chybě
• Shrnutí

Kapitola 14. Úhlové moduly

• Proč Angular Modules?
• Anatomie modulové třídy
• Vlastnosti @NgModule
• Hlavní moduly
• Example Struktura modulu
• Vytvořte modul domény
• Vytvořte dvojici modulů směrování/směrování
• Vytvořte servisní modul
• Vytváření společných modulů

Kapitola 15. Pokročilé směrování

• Modul funkcí povoleno směrování
• Použití modulu funkcí
• Líné načítání modulu funkcí
• Vytváření odkazů pro komponenty Feature Module
• Více o líném načítání
• Předběžné načítání modulů
• Výchozí trasa
• Trasa se zástupným znakem
• přesměrovat na
• Dětské trasy
• Definování podřízených tras
• pro dětské trasy
• Odkazy na dětské trasy
• Navigační stráže
• Vytváření implementací stráží
• Použití stráží na trase
• Shrnutí

Kapitola 16. Testování jednotek Úhlové aplikace

• Unit Testing Angular Artefakty
• Nástroje testování
• Typické testovací kroky
• Výsledky testu
• Jasmine Test Suites
• Specifikace jasmínu (testy jednotek)
• Očekávání (tvrzení)
• Matchers
• Exampsoubory používání dohazovačů
• Použití ne vlastnosti
• Nastavení a odstranění v Unit Test Suite
• Exampsoubor funkcí beforeEach a afterEach
• Úhlový testovací modul
• Example Úhlový testovací modul
• Testování služby
• Vložení instance služby
• Vyzkoušejte synchronní metodu
• Otestujte asynchronní metodu
• Použití Mock HT TP klienta
• Poskytování předpřipravené odezvy
• Testování komponenty
• Modul testování součástí
• Vytvoření instance komponenty
• Třída ComponentFixture
• Testy základních součástí
• Třída DebugElement
• Simulace uživatelské interakce
• Shrnutí

Kapitola 17. Ladění

• Nadview úhlového ladění
• Viewing TypeScript Code v Debuggeru
• Použití klíčového slova ladicího programu
• Protokolování ladění
• Co je Angular DevTools?
• Použití Angular DevTools
• Angular DevTools – Struktura komponent
• Angular DevTools – Změňte provádění detekce
• Zachycování chyb syntaxe
• Shrnutí

Laboratorní cvičení

• Laboratoř 1. Úvod do Angular
• Cvičení 2. Úvod do TypeScriptu
• Cvičení 3. Úvod do komponent
• Laboratoř 4. Šablona součásti
• Laboratoř 5. Vytvořte komponentu Fotogalerie
• Laboratoř 6. Formulář řízený šablonou
• Laboratoř 7. ​​Vytvořte formulář pro úpravy
• Laboratoř 8. Reaktivní forma
• Laboratoř 9. Vyvinout službu
• Laboratoř 10. Vyvinout klienta HT TP
• Laboratoř 11. Použijte potrubí
• Laboratoř 12. Základní jednostránková aplikace pomocí směrovače Laboratoř 13. Sestavení jednostránkové aplikace (SPA)
• Laboratoř 14. Pokročilý klient HT TP
• Cvičení 15. Použití Angular Bootstrap
• Laboratoř 16. Líné načítání modulu
• Laboratoř 17. Pokročilé směrování
• Laboratoř 18. Testování jednotek
• Laboratoř 19. Ladění úhlových aplikací

PRO KOHO JE KURZ URČEN?
Tento kurz je zaměřen na každého, kdo se potřebuje naučit základy vývoje Angular 12 a aplikovat je při tvorbě web aplikace ihned. Můžeme také dodat a upravit tento školicí kurz pro větší skupiny – šetříte tak vaší organizaci čas, peníze a zdroje.

Předpoklady
Web Abyste z tohoto kurzu Angular vytěžili maximum, jsou vyžadovány zkušenosti s vývojem pomocí HTML, CSS a JavaScriptu. Užitečná je také znalost prohlížeče DOM. Předchozí zkušenosti s Angular s AngularJS nebo jakoukoli verzí Angular nejsou vyžadovány.
https://www.lumifywork.com/en-au/courses/angular-12-programming/