LUMIFY WORK Angular 12 -ohjelmoinnin käyttöopas

LUMIFY WORK Angular 12 -ohjelmointi

MIKSI OPISKELDA TÄTÄ KURSSIA

Tämä kattava Angular 12 -ohjelmointikurssi on yhdistelmä teoreettista oppimista ja käytännön laboratorioita, jotka sisältävät johdannon Angulariin, jota seuraa TypeScript, komponentit, direktiivit, palvelut, HTTP-asiakas, testaus ja virheenkorjaus.
Kurssi on täynnä hyödyllistä ja hyödyllistä tietoa, jota voit soveltaa työhösi heti. Opi Angular 12 -peruskehityksen perusteet, kuten yksisivuiset selainsovellukset, reagoivat websivustot ja hybridimobiilisovellukset.
Huom: Voimme tarjota koulutusta myös muille Angular-versioille. Ota yhteyttä, jos haluat tiedustella tai rekisteröidä kiinnostuksesi.

MITÄ OPPIT
Tämän kurssin onnistuneesti suoritettuaan pystyt:

• Kehitä yksisivuisia Angular-sovelluksia Typescriptillä
• Luo täydellinen Angular-kehitysympäristö
• Luo komponentteja, direktiivejä, palveluita, putkia, lomakkeita ja mukautettuja validaattoreita
• Käsittele edistyneitä verkkotietojen hakutehtäviä Observables-toiminnon avulla. Käytä tietoja REST:stä web palvelut käyttämällä Angular HT TP Client Käsittele push-datayhteyksiä käyttämällä WebSockets-protokolla
• Työskentele Angular Pipesin kanssa tietojen muotoiluun
• Käytä edistyneitä Angular Component Router -ominaisuuksia
• Testaa ja korjaa Angular-sovelluksia sisäänrakennetuilla työkaluilla.

KURSSIN AINEET

Luku 1. Esittelyssä Angular

• Mikä on Angular?
• Angular Frameworkin keskeiset ominaisuudet Sopivat käyttötapaukset
• Kulmasovelluksen rakennuspalikoita Kulmikkaan sovelluksen perusarkkitehtuuri Angular-asennus ja -käyttö
• Sovellusta suorittavan kulmikkaan sovelluksen anatomia
• Angular-sovelluksen luominen ja käyttöönotto natiivimobiilisovelluksille
• Yhteenveto

Luku 2. Johdatus TypeScriptiin

• Ohjelmointikielet käytettäväksi Angular TypeScript -syntaksin kanssa
• Ohjelmointieditorit
• Tyyppijärjestelmä – Muuttujien määrittely
• Tyyppijärjestelmä – taulukoiden määrittely
• Primitiiviset perustyypit
• Kirjoita Funktiot
• Tyyppi johtopäätös
• Luokkien määrittely
• Luokkamenetelmät
• Näkyvyyden hallinta
• Luokan rakentajat
• Luokkakonstruktorit – Vaihtoehtoisen lomakkeen alustamattomat kentät
• Liitännät
• Työskentely ES6-moduulien kanssa
• var vs let
• Nuolitoiminnot
• Nuolitoiminto Kompakti syntaksimallin merkkijonot
• Generics luokassa
• Generics in Function
• Yhteenveto

Luku 3. Komponentit

• Mikä on komponentti?
• Example Komponentti
• Komponentin luominen Angular CLI:n avulla
• Komponenttiluokka
• @Component Decorator
• Komponentin rekisteröiminen sen moduulikomponenttimalliin
• Example: HelloComponent Template
• Example: HelloComponent-luokka käyttäen komponenttia
• Suorita sovellus
• Komponenttihierarkia
• Sovelluksen juurikomponentti
• Bootstrap File
• Komponenttien elinkaaren koukut Example Lifecycle Hooks
• CSS-tyylit
• Yhteenveto

Luku 4. Komponenttimallit

• Mallit
• Mallin sijainti
• Viikset {{ }} syntaksi
• DOM-elementin ominaisuuksien asettaminen
• Asetuselementin leipäteksti
• Tapahtuman sitominen
• Expression Event Handler
• Estä oletuskäsittely
• Ominaisuusdirektiivit
• Käytä tyylejä vaihtamalla CSS-luokkia
• Example: ngClass
• Tyylien käyttäminen suoraan
• rakennedirektiivit
• Ehdollisesti suorita malli
• Example: ngIf
• Silmukoiminen ngForilla
• ngPaikallisille muuttujille
• Kokoelman manipulointi esimample – Kohteen poistaminen
• Kohteiden seuranta ngFor Elementtien vaihtaminen ngSwitch Grouping Elements -elementeillä
• Mallin viitemuuttujien yhteenveto

Luku 5. Komponenttien välinen viestintä

• Viestinnän perusteet
• Tietovirran arkkitehtuuri
• Lapsen valmistaminen vastaanottamaan tietoja
• Lähetä tiedot vanhemmalta
• Lisätietoja ominaisuuksien asettamisesta
• Laukaisutapahtuma komponentista
• @Output() Esimample – Lapsikomponentti @Output() Esimample – Pääkomponentti
• Täysi kaksisuuntainen sidonta
• Kaksisuuntaisen datan sidonnan määrittäminen vanhempiin
• Yhteenveto

Luku 6. Mallipohjaiset lomakkeet

• Mallipohjaiset lomakkeet
• Lomakkeiden tuontimoduuli
• Peruslähestymistapa
• Lomakkeen määrittäminen
• Käyttäjän syötteen saaminen
• Jätetään pois ngForm-attribuutti
• Alusta lomake
• Kaksisuuntainen tietojen sidonta
• Lomakkeen vahvistus
• Kulmavalidaattorit
• Vahvistustilan näyttäminen luokkien avulla Lisäsyöttötyypit
• valintaruudut
• Valitse (pudotusvalikosta) kentät
• Renderöintiasetukset Valitse (pudotusvalikosta) päivämääräkentille
• Radiopainikkeet
• Yhteenveto

Luku 7. Reaktiiviset lomakkeet

• Reaktiiviset lomakkeet ohiview
• Rakennuspalikat
• Tuo ReactiveFormsModule
• Rakenna lomake
• Suunnittele malli
• Syötearvojen hakeminen
• Syötekenttien alustaminen
• Lomakearvojen asettaminen
• Syötemuutosten tilaaminen
• Validointi
• Sisäänrakennetut validaattorit
• Näytetään vahvistusvirhe
• Custom Validator
• Mukautetun validaattorin käyttäminen
• Toimitetaan kokoonpano mukautettuun validaattoriin
• FormArray - Lisää syötteitä dynaamisesti
• FormArray – komponenttiluokka
• FormArray - Malli
• FormArray – Arvot
• Alalomakeryhmät – komponenttiluokka
• Alalomakeryhmät – HTML-malli
• Miksi käyttää alalomakeryhmiä
• Yhteenveto

Luku 8. Palvelut ja riippuvuuden lisääminen

• Mikä on palvelu?
• Peruspalvelun luominen
• Palveluluokka
• Mikä on riippuvuusruiske?
• Palveluesiintymän pistäminen
• Suihkutussuuttimet
• Injektorihierarkia
• Palvelun rekisteröiminen Root Injectorilla
• Palvelun rekisteröinti komponentin injektorilla
• Rekisteröi palvelu Feature Module Injectorilla
• Missä palvelu rekisteröidään?
• Riippuvuusinjektio muissa artefakteissa, jotka tarjoavat vaihtoehtoisen toteutuksen riippuvuusinjektion ja @Host
• Dependency Injection ja @Valinnainen
• Yhteenveto

Luku 9. HTTP-asiakas

• Angular HT TP -asiakas
• HT TP -asiakkaan käyttö – ohiview
• HttpClientModulea tuodaan
• Palvelu käyttämällä HttpClientiä
• GET-pyynnön tekeminen
• Mitä havaittava objekti tekee?
• Palvelun käyttäminen komponentissa
• PeopleService-asiakaskomponentin virheiden käsittely
• Virheobjektin mukauttaminen
• POST-pyynnön tekeminen
• PUT-pyynnön tekeminen
• POISTA-pyynnön tekeminen

Luku 10. Putket ja tietojen muotoilu

• Mitä putket ovat?
• Sisäänrakennetut putket
• Putkien käyttäminen HTML-mallien ketjutusputkissa
• Kansainväliset putket (i18n) Ladataan aluetietoja
• Päivämäärä Pipe
• Numero Pipe
• Valuuttaputki
• Luo mukautettu putki
• Mukautettu putki esimample
• Mukautettujen putkien käyttö
• Putken käyttäminen ngForin kanssa
• Suodatinputki
• Putken luokka: Puhdas ja epäpuhdas
• Yhteenveto
• Pure Pipe Example
• Epäpuhdas putki esimample
• Yhteenveto

Luku 11. Johdatus yksisivuisiin sovelluksiin

• Mikä on perinteinen yhden sivun sovellus (SPA)? Web Sovellus
• SPA-työnkulku
• Yksisivuinen sovellus Advantages HTML5 History API
• SPA Haasteet
• SPA:iden toteuttaminen kulmikkaan yhteenvedon avulla

Luku 12. Kulmakomponenttireititin

• Komponenttireititin
• View Navigointi
• Angular Router API
• Reititintä tukevan sovelluksen luominen
• Reititettyjen komponenttien isännöinti
• Navigointi linkkien ja painikkeiden avulla
• Ohjelmallinen navigointi
• Ohitusreitin parametrit
• Navigointi reittiparametreilla
• Reittiparametrien arvojen hankkiminen
• Reittiparametrin hakeminen synkronisesti
• Reittiparametrin haku asynkronisesti
• Kyselyparametrit
• Kyselyparametrien toimittaminen
• Haetaan kyselyparametreja asynkronisesti
• Ongelmia manuaalin kanssa URL merkintä ja kirjanmerkki
• Yhteenveto

Luku 13. Advanced HTTP Client

• Pyydä vaihtoehdot
• HttpResponse-objektin palauttaminen
• Pyynnön otsikoiden asettaminen
• Uusien havaintojen luominen
• Yksinkertaisen havainnon luominen
• Havaittava konstruktorimenetelmä Havaittavat operaattorit
• Kartta ja suodatin Operaattorit
• FlatMap()-operaattori
• Tap()-operaattori
• Zip()-yhdistelmä
• Tallennetaan HTTP-vastauksen välimuistiin
• Peräkkäisten HT TP -puheluiden soittaminen
• Rinnakkaisten puheluiden soittaminen
• Virheobjektin mukauttaminen catchError()-toiminnolla
• Virhe putkistossa
• Virheen palautus
• Yhteenveto

Luku 14. Kulmamoduulit

• Miksi kulmamoduulit?
• Moduuliluokan anatomia
• @NgModule-ominaisuudet
• Ominaisuusmoduulit
• Example Moduulirakenne
• Luo verkkotunnusmoduuli
• Luo reititys/reititysmoduulipari
• Luo palvelumoduuli
• Yhteisten moduulien luominen

Luku 15. Edistynyt reititys

• Routing Enabled Feature Module
• Ominaisuusmoduulin käyttäminen
• Laiska ominaisuusmoduulin lataaminen
• Linkkien luominen ominaisuusmoduulin osiin
• Lisää laiskasta lataamisesta
• Moduulien esilataus
• Oletusreitti
• Jokerimerkki reittipolku
• uudelleenohjaus kohteeseen
• Lasten reitit
• Lapsireittien määrittely
• Child Routesille
• Linkkejä lapsireitteihin
• Navigointivartijat
• Vartijan toteutusten luominen
• Vartijoiden käyttö reitillä
• Yhteenveto

Luku 16. Kulmasovellusten yksikkötestaus

• Yksikkötestaus Angular Artefacts
• Testaustyökalut
• Tyypilliset testausvaiheet
• Testitulokset
• Jasmine Test Suites
• Jasmiinin tiedot (yksikkötestit)
• Odotukset (väitteet)
• Ottelijat
• Examples matchersin käyttämisestä
• Ei-omaisuuden käyttäminen
• Asennus ja purkaminen Unit Test Suitesissa
• Example of beforeEach and afterEach Functions
• Kulmatestimoduuli
• Example Angular Test Module
• Palvelun testaus
• Palveluesiintymän pistäminen
• Testaa synkronista menetelmää
• Testaa asynkronista menetelmää
• Mock HT TP -asiakkaan käyttö
• Toimitetaan valmiita vastauksia
• Komponentin testaus
• Komponenttitestimoduuli
• Komponenttiesiintymän luominen
• ComponentFixture-luokka
• Peruskomponenttitestit
• DebugElement-luokka
• Käyttäjävuorovaikutuksen simulointi
• Yhteenveto

Luku 17. Vianetsintä

• Yliview Angular Debugging
• ViewTypeScript-koodin debuggerissa
• Viankorjausavainsanan käyttäminen
• Virheenkorjauksen kirjaus
• Mikä on Angular DevTools?
• Angular DevToolsin käyttäminen
• Angular DevTools – Komponenttirakenne
• Angular DevTools – muutoksen havaitsemisen suorittaminen
• Syntaksivirheiden havaitseminen
• Yhteenveto

Laboratorioharjoitukset

• Lab 1. Johdatus Angulariin
• Lab 2. Johdatus TypeScriptiin
• Lab 3. Johdatus komponentteihin
• Lab 4. Komponenttimalli
• Lab 5. Luo valokuvagalleriakomponentti
• Lab 6. Mallipohjainen lomake
• Lab 7. Luo muokkauslomake
• Lab 8. Reaktiivinen muoto
• Lab 9. Kehitä palvelu
• Lab 10. Kehitä HT TP -asiakas
• Lab 11. Käytä putkia
• Lab 12. Yksisivuinen perussovellus reitittimen avulla 13. Yksisivuisen sovelluksen (SPA) luominen
• Lab 14. Advanced HT TP Client
• Lab 15. Angular Bootstrapin käyttö
• Lab 16. Laiska moduulin lataus
• Lab 17. Edistynyt reititys
• Lab 18. Yksikkötestaus
• Lab 19. Kulmasovellusten virheenkorjaus

KENELLE KURSSI ON?
Tämä kurssi on suunnattu kaikille, jotka haluavat oppia Angular 12 -kehityksen perusteet ja soveltaa niitä luomisessa web hakemuksia heti. Voimme myös toimittaa ja räätälöidä tämän koulutuksen suuremmille ryhmille – säästäen organisaatiosi aikaa, rahaa ja resursseja.

ESITIEDOT
Web Kehityskokemusta HTML:n, CSS:n ja JavaScriptin käytöstä vaaditaan saadaksesi kaiken irti tästä Angular-kurssista. Selaimen DOM:n tuntemus on myös hyödyllistä. Aiempaa Angular-kokemusta AngularJS:stä tai mistä tahansa Angular-versiosta ei vaadita.
https://www.lumifywork.com/en-au/courses/angular-12-programming/