LUMIFY WORK Angular 12 Programiranje

ZAKAJ ŠTUDIRATI TA TEČAJ

Ta obsežen tečaj programiranja Angular 12 je kombinacija teoretičnega učenja in praktičnih laboratorijev, ki vključuje uvod v Angular, ki mu sledijo TypeScript, komponente, direktive, storitve, odjemalec HTTP, testiranje in odpravljanje napak.
Tečaj je poln uporabnih in praktičnih informacij, ki jih lahko takoj uporabite pri svojem delu. Naučite se osnov osnovnega razvoja Angular 12, kot so enostranske brskalnikske aplikacije, odzivne webspletna mesta in hibridne mobilne aplikacije.
Opomba: Izvajamo lahko tudi usposabljanje za druge različice Angularja. Za povpraševanje ali registracijo zanimanja nas kontaktirajte.

KAJ SE BOSTE NAUČILI
Po uspešnem zaključku tega tečaja boste lahko:

• Razvijte enostranske aplikacije Angular z uporabo Typescripta
• Nastavite popolno razvojno okolje Angular
• Ustvarite komponente, direktive, storitve, cevi, obrazce in validatorje po meri
• Opravljajte napredna opravila pridobivanja omrežnih podatkov z uporabo Observables. Porabite podatke iz REST web storitve, ki uporabljajo odjemalca Angular HT TP, obravnavajo potisne podatkovne povezave z uporabo WebProtokol vtičnic
• Delajte z Angular Pipes za oblikovanje podatkov
• Uporabite napredne funkcije Angular Component Router
• Testirajte in odpravljajte napake v aplikacijah Angular z uporabo vgrajenih orodij.

PREDMETI

Poglavje 1. Predstavljamo Angular

• Kaj je Angular?
• Osrednje značilnosti primerov primerne uporabe Angular Framework
• Gradniki aplikacije Angular Osnovna arhitektura aplikacije Angular Namestitev in uporaba Angular
• Anatomija kotne aplikacije, ki izvaja aplikacijo
• Gradnja in uvajanje aplikacije Angular za izvorne mobilne aplikacije
• Povzetek

Poglavje 2. Uvod v TypeScript

• Programski jeziki za uporabo s sintakso Angular TypeScript
• Programski uredniki
• Tipski sistem – definiranje spremenljivk
• Tipski sistem – definiranje nizov
• Osnovni primitivni tipi
• Vnesite Funkcije
• Tipsko sklepanje
• Definiranje razredov
• Metode razreda
• Nadzor vidljivosti
• Konstruktorji razreda
• Konstruktorji razreda – nadomestna neinicializirana polja obrazca
• Vmesniki
• Delo z moduli ES6
• var vs let
• Funkcije puščic
• Nizi predloge kompaktne sintakse funkcije puščice
• Generiki v razredu
• Generiki v funkciji
• Povzetek

Poglavje 3. Komponente

• Kaj je komponenta?
• Example komponenta
• Ustvarjanje komponente z uporabo Angular CLI
• Razred komponente
• @Component Decorator
• Registracija komponente v njeni predlogi komponente modula
• Example: Predloga HelloComponent
• Example: Razred HelloComponent z uporabo komponente
• Zaženite aplikacijo
• Hierarhija komponent
• Korenska komponenta aplikacije
• Bootstrap File
• Kavlji življenjskega cikla komponente Example Lifecycle Hooks
• Slogi CSS
• Povzetek

Poglavje 4. Predloge komponent

• Predloge
• Lokacija predloge
• Sintaksa Moustache {{ }}
• Nastavitev lastnosti elementa DOM
• Nastavitev besedila telesa elementa
• Vezava dogodka
• Obravnavalec dogodkov izraza
• Prepreči privzeto ravnanje
• Atributne direktive
• Uporabite sloge s spreminjanjem razredov CSS
• Example: ngClass
• Neposredna uporaba slogov
• Strukturne direktive
• Predloga za pogojno izvedbo
• Example: ngIf
• Zankanje z uporabo ngFor
• ngZa lokalne spremenljivke
• Manipulacija zbirke Nprample – Brisanje predmeta
• Sledenje predmetom z ngZa zamenjavo elementov z elementi združevanja ngSwitch
• Povzetek spremenljivke referenčne predloge

Poglavje 5. Komunikacija med komponentami

• Osnove komunikacije
• Arhitektura pretoka podatkov
• Priprava otroka na sprejemanje podatkov
• Pošlji podatke od starša
• Več o nastavitvi lastnosti
• Sprožitev dogodka iz komponente
• @Output() Nprample – Podrejena komponenta @Output() Nprample – Nadrejena komponenta
• Popolna dvosmerna vezava
• Nastavitev dvosmerne vezave podatkov v Nadrejenem
• Povzetek

Poglavje 6. Obrazci na podlagi predloge

• Obrazci na podlagi predloge
• Modul za uvoz obrazcev
• Osnovni pristop
• Nastavitev obrazca
• Pridobivanje uporabniškega vnosa
• Izpuščen atribut ngForm
• Inicializirajte obrazec
• Dvosmerna vezava podatkov
• Preverjanje obrazca
• Kotni validatorji
• Prikaz stanja preverjanja z uporabo razredov Dodatne vrste vnosa
• Potrditvena polja
• Izberite (spustni meni) Polja
• Možnosti upodabljanja za izbrana (spustna) datumska polja
• Radijski gumbi
• Povzetek

Poglavje 7. Reaktivni obrazci

• Reaktivni obrazci so končaniview
• Gradniki
• Uvozi ReactiveFormsModule
• Sestavite obrazec
• Oblikujte predlogo
• Pridobivanje vhodnih vrednosti
• Inicializacija vnosnih polj
• Nastavitev vrednosti obrazca
• Naročanje na spremembe vnosa
• Validacija
• Vgrajeni validatorji
• Prikaz napake pri preverjanju
• Validator po meri
• Uporaba validatorja po meri
• Dobava konfiguracije za validator po meri
• FormArray – dinamično dodajanje vnosov
• FormArray – Razred komponent
• FormArray – Predloga
• FormArray – Vrednosti
• Sub FormGroups – razred komponent
• Sub FormGroups – Predloga HTML
• Zakaj uporabljati Sub FormGroups
• Povzetek

Poglavje 8. Storitve in vstavljanje odvisnosti

• Kaj je storitev?
• Ustvarjanje osnovne storitve
• Servisni razred
• Kaj je vbrizgavanje odvisnosti?
• Vbrizgavanje primerka storitve
• Injektorji
• Hierarhija injektorjev
• Registracija storitve z orodjem Root Injector
• Registracija storitve z injektorjem komponente
• Registrirajte storitev z injektorjem funkcijskega modula
• Kje registrirati storitev?
• Vstavljanje odvisnosti v druge artefakte, ki zagotavljajo vstavljanje odvisnosti nadomestne izvedbe in @Host
• Vstavljanje odvisnosti in @Optional
• Povzetek

Poglavje 9. Odjemalec HTTP

• Odjemalec Angular HT TP
• Uporaba odjemalca HT TP – Konecview
• Uvažanje HttpClientModule
• Storitev z uporabo HttpClient
• Izdelava zahteve GET
• Kaj počne opazljivi objekt?
• Uporaba storitve v komponenti
• Obravnava napak odjemalske komponente PeopleService
• Prilagajanje predmeta napake
• Izdelava zahteve POST
• Izdelava zahteve PUT
• Izdelava zahteve za IZBRIS

Poglavje 10. Cevi in ​​oblikovanje podatkov

• Kaj so cevi?
• Vgradne cevi
• Uporaba cevi v predlogi HTML Veriženje cevi
• Internacionalizirane cevi (i18n) Nalaganje lokalnih podatkov
• Datum Pipe
• Številka Pipe
• Currency Pipe
• Ustvarite cev po meri
• Custom Pipe Example
• Uporaba cevi po meri
• Uporaba cevi z ngFor
• Filtrirna cev
• Kategorija pipe: čista in nečista
• Povzetek
• Pure Pipe Example
• Nečista cev Example
• Povzetek

Poglavje 11. Uvod v enostranske aplikacije

• Kaj je tradicionalna enostranska aplikacija (SPA). Web Aplikacija
• Potek dela SPA
• Enostranska aplikacija Advantagje API za zgodovino HTML5
• SPA izzivi
• Implementacija SPA z uporabo Angular Summary

Poglavje 12. Kotni komponentni usmerjevalnik

• Komponentni usmerjevalnik
• View Navigacija
• Angular Router API
• Ustvarjanje aplikacije, ki podpira usmerjevalnik
• Gostovanje preusmerjenih komponent
• Navigacija z uporabo povezav in gumbov
• Programska navigacija
• Prenos parametrov poti
• Navigacija s parametri poti
• Pridobivanje vrednosti parametrov poti
• Sinhrono pridobivanje parametra poti
• Asinhrono pridobivanje parametra poti
• Parametri poizvedbe
• Dobava parametrov poizvedbe
• Asinhrono pridobivanje parametrov poizvedbe
• Težave z priročnikom URL vnos in zaznamki
• Povzetek

Poglavje 13. Napredni odjemalec HTTP

• Možnosti zahteve
• Vrnitev predmeta HttpResponse
• Nastavitev glav zahtev
• Ustvarjanje novih opazovalk
• Ustvarjanje preproste opazovalke
• Metoda opazovalnega konstruktorja Opazljivi operatorji
• Operaterji zemljevida in filtra
• Operator flatMap().
• Operator tap().
• Kombinator zip().
• Predpomnjenje HT TP odgovora
• Opravljanje zaporednih klicev HT TP
• Opravljanje vzporednih klicev
• Prilagajanje predmeta napake s funkcijo catchError()
• Napaka v cevovodu
• Odpravljanje napak
• Povzetek

Poglavje 14. Kotni moduli

• Zakaj kotni moduli?
• Anatomija razreda modula
• Lastnosti @NgModule
• Funkcijski moduli
• Example Struktura modula
• Ustvarite modul domene
• Ustvarite par Usmerjeni/usmerjevalni modul
• Ustvarite servisni modul
• Ustvarjanje skupnih modulov

Poglavje 15. Napredno usmerjanje

• Modul funkcij z omogočenim usmerjanjem
• Uporaba modula funkcij
• Leno nalaganje modula funkcij
• Ustvarjanje povezav za komponente modula funkcij
• Več o lenem nalaganju
• Prednalaganje modulov
• Privzeta pot
• Pot z nadomestnimi znaki
• preusmeri na
• Otroške poti
• Definiranje podrejenih poti
• za otroške poti
• Povezave za Child Routes
• Navigacijski stražarji
• Ustvarjanje izvedb Guard
• Uporaba varoval na poti
• Povzetek

Poglavje 16. Testiranje enot kotnih aplikacij

• Testiranje enot kotnih artefaktov
• Orodja za testiranje
• Tipični koraki testiranja
• Rezultati testa
• Testne zbirke Jasmine
• Specifikacije Jasmine (preskusi enot)
• Pričakovanja (trditve)
• Tekme
• Exampo uporabi ujemalnikov
• Uporaba lastnosti not
• Nastavitev in razgradnja v kompletih za testiranje enot
• Exampdatoteka funkcij beforeEach in afterEach
• Kotni testni modul
• Exampkotni testni modul
• Testiranje storitve
• Vbrizgavanje primerka storitve
• Preizkusite sinhrono metodo
• Preizkusite asinhrono metodo
• Uporaba Mock HT TP Client
• Dobava pripravljenega odziva
• Testiranje komponente
• Modul za testiranje komponent
• Ustvarjanje primerka komponente
• Razred ComponentFixture
• Preizkusi osnovnih komponent
• Razred DebugElement
• Simulacija uporabniške interakcije
• Povzetek

Poglavje 17. Odpravljanje napak

• konecview kotnega odpravljanja napak
• Viewkodo TypeScript v razhroščevalniku
• Uporaba razhroščevalnika Ključna beseda
• Dnevnik odpravljanja napak
• Kaj je Angular DevTools?
• Uporaba Angular DevTools
• Angular DevTools – Struktura komponent
• Angular DevTools – Izvedba zaznavanja sprememb
• Lovljenje sintaksnih napak
• Povzetek

Laboratorijske vaje

• Lab 1. Uvod v Angular
• Lab 2. Uvod v TypeScript
• Lab 3. Uvod v komponente
• Lab 4. Predloga komponente
• Lab 5. Ustvarite komponento fotogalerije
• Lab 6. Obrazec na podlagi predloge
• Lab 7. Ustvari obrazec za urejanje
• Lab 8. Reaktivna oblika
• Lab 9. Razvijte storitev
• Lab 10. Razvijte odjemalca HT TP
• Lab 11. Uporabite cevi
• Lab 12. Osnovna enostranska aplikacija z uporabo usmerjevalnika Lab 13. Zgradite enostransko aplikacijo (SPA)
• Lab 14. Napredni odjemalec HT TP
• Lab 15. Uporaba Angular Bootstrap
• Lab 16. Leno nalaganje modula
• Lab 17. Napredno usmerjanje
• Lab 18. Testiranje enot
• Lab 19. Odpravljanje napak Angular aplikacij

KOMU JE TEČAJ NAMENJEN?
Ta tečaj je namenjen vsem, ki se morajo naučiti osnov razvoja Angular 12 in jih uporabiti pri ustvarjanju web aplikacije takoj. Ta tečaj usposabljanja lahko izvedemo in prilagodimo tudi za večje skupine – prihranimo čas, denar in sredstva vaši organizaciji.

POVEZANOST Z DNE
Web razvojne izkušnje z uporabo HTML, CSS in JavaScript so potrebne, da kar najbolje izkoristite ta tečaj Angular. Koristno je tudi poznavanje brskalnika DOM. Predhodne izkušnje z Angularjem, z AngularJS ali katero koli različico Angularja, niso potrebne.
https://www.lumifywork.com/en-au/courses/angular-12-programming/

Dokumenti / Viri

LUMIFY WORK Angular 12 Programiranje [pdf] Uporabniški priročnik Angular 12 programiranje, Angular, 12 programiranje, programiranje

Reference

• Uporabniški priročnik