LUMIFY WORK Angular 15 Programming User Guide

Sisällys piilottaa

1 MIKSI OPISKELDA TÄTÄ KURSSIA

SOVELLUS JA WEB KEHITYS
Angular 15 ohjelmointi
PITUUS 5 päivää
VERSIO 15

MIKSI OPISKELDA TÄTÄ KURSSIA

Tämä intensiivinen ja kattava Angular 15 -koulutus tarjoaa osallistujille taitoja, joita he voivat käyttää välittömästi työssään. Opit Angular 15 -kehityksen perusteet, kuten yksisivuiset selainsovellukset, responsiiviset websivustoja ja hybridimobiilisovellusioneja.
Tämä kurssi on yhdistelmä teoreettista oppimista ja käytännön laboratorioita, joka sisältää johdannon Angulariin, jota seuraa TypeScript, komponentit, ohjeet, palvelut, HTTPClient, testaus ja virheenkorjaus.
Huomautus: Voimme tarjota koulutusta myös muille Angular-versioille. Ota yhteyttä, jos haluat tiedustella tai rekisteröidä kiinnostuksesi.

KULMA TYÖSSÄ

MITÄ OPPIT

Tämän kurssin onnistuneesti suoritettuaan sinulla on seuraavat tiedot:

Kehitä yksisivuisia Angular-sovellusioneja Typescriptin avulla
Luo täydellinen Angular-kehitysympäristö
Luo komponentteja, ohjeita, palveluita, putkia, lomakkeita ja mukautettuja validaattoreita
Käsittele edistyneitä verkkotietojen hakutehtäviä Observables-toiminnon avulla
Kuluttaa tietoja REST:stä web palvelut Angular HTTP Client -sovelluksella
Käsittele push-datayhteysioneja käyttämällä WebSocket-protokolla
Työskentele Angular Pipesin kanssa tietojen muotoiluun
Käytä edistyneitä Angular Component Router -ominaisuuksia
Testaa ja korjaa Angular-sovellusioneja sisäänrakennetuilla työkaluilla
Työskentele Angular CLI:n kanssa

Opettajani oli hieno, kun hän pystyi esittämään skenaarioita todellisiin tapauksiin, jotka liittyivät erityiseen tilanteeseeni.
Minut saatettiin tuntemaan oloni tervetulleeksi saapumishetkestä lähtien, ja kyky istua ryhmänä luokkahuoneen ulkopuolella keskustelemassa tilanteistamme ja tavoitteistamme oli erittäin arvokasta.
Opin paljon ja koin tärkeäksi, että tavoitteeni saavutettiin osallistumalla tälle kurssille.
Hienoa työtä Lumify Work -tiimi.AMANDA NICOL
IT-TUKIPALVELUJOHTAJA – HEALTH WORLD LIMITED

KURSSIN AINEET

Esittelyssä Angular
• Mikä on Angular?
• Angular Frameworkin keskeiset ominaisuudet
• Asianmukaiset käyttötapaukset
• Kulmasovelluksen rakennuspalikoita
• Kulmasovelluksen perusarkkitehtuuri
• Angularin asennus ja käyttö
• Kulmasovelluksen anatomia
• Sovelluksen suorittaminen
• Sovelluksen rakentaminen ja käyttöönotto
• Kulmikas alkuperäisille mobiilisovelluksille
Johdatus TypeScriptiin
• Ohjelmointikielet käytettäväksi Angularin kanssa
• TypeScript-syntaksi
• Ohjelmointieditorit
• Tyyppijärjestelmä – Muuttujien määrittely
• Tyyppijärjestelmä – Määrittelevät taulukot
• Primitiiviset perustyypit
• Kirjoita Function ions
• Type Inference
• Luokkien määrittely
• Luokkamenetelmät
• Näkyvyyden hallinta
• Luokkien rakentajat
• Luokkarakentajat – vaihtoehtoinen muoto
• Alustamattomat kentät
• Liitännät
• Työskentely ES6-moduulien kanssa
• var vs
• Nuolitoiminnot
• Nuolifunktio Kompakti syntaksi
• Mallimerkkijonot
• Generics in Class
• Generics in Funct ion
Komponentit
• Mikä on komponentti?
• Example Komponentti
• Komponentin luominen Angular CLI:n avulla
• Komponenttiluokka
• @Component Decorator
• Komponentin rekisteröinti sen moduuliin
• Komponenttimalli
• Esimample: HelloComponent Template
• Esimample: HelloComponent Class
• Komponentin käyttäminen
• Suorita sovellus
• Komponenttihierarkia
• Sovelluksen juurikomponentti
• Bootstrap File
• Komponenttien elinkaaren koukut
• Esimample Lifecycle Hooks
• CSS-tyylit
Komponenttimallit
• Mallit
• Mallin sijainti
• Viikset {{ }} -syntaksi
• DOM-elementin ominaisuuksien asettaminen
• Asetuselementin leipäteksti
• Tapahtuman sidonta
• Expression Event Handler
• Estä oletuskäsittely
• Ominaisuusdirektiivit
• Käytä tyylejä vaihtamalla CSS-luokkia
• Esimample: ngClass
• Tyylien käyttäminen suoraan
• Rakennedirektiivit
• Ehdollisesti suorita malli
• Esimample: ngIf
• Silmukka ngForilla
• ngPaikallisille muuttujille
• Kokoelman manipulointi
• Esimample – Kohteen poistaminen
• Kohteiden seuranta ngForin avulla
• Elementtien vaihto ngSwitchillä
• Elementtien ryhmittely
• Mallin viitemuuttuja
Komponenttien välinen viestintä
• Viestinnän perusteet
• Data Flow -arkkitehtuuri
• Lapsen valmistaminen vastaanottamaan tietoja
• Lähetä tiedot vanhemmalta
• Lisätietoja ominaisuuksien asettamisesta
• Tapahtuman laukaisu komponentista
• @Output() Esimample – lapsikomponentti
• @Output() Esimample – Pääkomponentti
• Täysi kaksisuuntainen sidonta
• Kaksisuuntaisen datan sidonnan määrittäminen vanhempiin
Mallit ja ohjatut 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 tiedon sidonta
• Lomakkeen validointi
• Kulmavalidaattorit
• Vahvistustilan näyttäminen luokkien avulla
• Muut tulotyypit
• Valintaruudut
• Valitse (pudotusvalikosta) kentät
• Selectin renderöintiasetukset (pudotusvalikko)
• Päivämääräkentät
• Radiopainikkeet
Reaktiiviset lomakkeet
• Reaktiiviset muodot ohiview
• Rakennuspalikat
• Tuo Reactive FormsModule
• Luo lomake
• Suunnittele malli
• Syötearvojen hakeminen
• Syöttökenttien alustaminen
• Lomakearvojen asettaminen
• Syötemuutosten tilaaminen
• Validointi
• Sisäänrakennetut validaattorit
• Näytetään vahvistusvirhe
• Custom Validator
• Mukautetun validaattorin käyttäminen
• Määritysten toimittaminen Custom Validatorille
• FormArray – Lisää syötteitä dynaamisesti
• FormArray – Komponenttiluokka
• FormArray – Malli
• FormArray – Arvot
• Sub FormGroups – Komponenttiluokka
• Alalomakeryhmät – HTML-malli
• Miksi käyttää alalomakeryhmiä
Palvelut ja riippuvuusruiske
• Mikä on palvelu?
• Peruspalvelun luominen
• Palveluluokka
• Mikä on riippuvuusinjektio?
• Palveluesiintymän pistäminen
• Injektorit
• Injektorihierarkia
• Palvelun rekisteröinti Root Injectorilla
• Palvelun rekisteröinti komponentin injektorilla
• Rekisteröi palvelu Feature Module Injectorilla
• Missä palvelu rekisteröidään?
• Riippuvuuden injektio muissa esineissä
• Vaihtoehtoisen toteutuksen tarjoaminen
• Dependency Injection ja @Host
• Dependency Injection ja @Valinnainen
HTTP-asiakas
• Angular HTTP Client
• HTTP-asiakasohjelman käyttäminen – ohiview
• Tuo HttpClientModule
• HttpClient-palvelu
• GET-pyynnön tekeminen
• Mitä havaittava objekti tekee?
• Palvelun käyttäminen komponentissa
• PeopleService-asiakaskomponentti
• Virheiden käsittely
• Virheobjektin mukauttaminen
• POST-pyynnön tekeminen
• PUT-pyynnön tekeminen
• POISTA-pyynnön tekeminen
Putket ja tietojen muotoilu
• Mitä putket ovat?
• Sisäänrakennetut putket
• Putkien käyttäminen HTML-mallissa
• Putkien ketjutus
• Kansainväliset ionisoidut putket (i18n)
• Ladataan aluetietoja
• Päivämäärä Pipe
• Numero Pipe
• Valuuttaputki
• Luo mukautettu putki
• Custom Pipe Example
• Mukautettujen putkien käyttäminen
• Putken käyttäminen ngForin kanssa
• Suodatinputki
• Putkiluokka: Puhdas ja epäpuhdas
• Pure Pipe Example
• Epäpuhdas putki Example
Johdatus yksisivuisiin sovelluksiin
• Mikä on Single Page Applicat ion (SPA)
• Perinteinen Web Sovellus
• SPA-työnkulku
• Single Page Application Advantages
• HTML5 History API
• SPA-haasteet
• Kylpylöiden toteuttaminen Angularilla
Kulmakomponenttireititin
• Komponenttireititin
• View Navigointi
• Angular Router API
• Reititintä tukevan sovelluksen luominen
• Reititettyjen komponenttien isännöinti
• Navigointi linkkien ja painikkeiden avulla
• Ohjelmallinen navigointi
• Reittiparametrien ohittaminen
• Navigointi reittiparametreilla
• Reittiparametrien arvojen hankkiminen
• Reittiparametrin hakeminen synkronisesti
• Reittiparametrin haku asynkronisesti
• Kyselyparametrit
• Kyselyparametrien antaminen
• Kyselyparametrien haku asynkronisesti
• Ongelmia manuaalisessa käytössä URL merkintä ja kirjanmerkki
Kehittynyt HTTP-asiakas
• Pyydä vaihtoehtoja
• HttpResponse-objektin palauttaminen
• Pyyntöotsikoiden asettaminen
• Uusien havaintojen luominen
• Yksinkertaisen havainnon luominen
• Havaittava konstruktorimenetelmä
• Havaittavat operaattorit
• Kartta ja suodatin Operaattorit
• FlatMap()-operaattori
• Tap()-operaattori
• Zip()-yhdistelmä
• HTTP-vastauksen tallentaminen välimuistiin
• Peräkkäisten HTTP-puheluiden soittaminen
• Rinnakkaisten puheluiden soittaminen
• Error-objektin mukauttaminen catchError()-toiminnolla
• Virhe putkistossa
• Virheen palautus
Kulmamoduulit
• Miksi kulmamoduulit?
• Moduuliluokan anatomia
• @NgModule Properties
• Ominaisuusmoduulit
• Esimample Moduulirakenne
• Luo verkkotunnusmoduuli
• Luo reititys/reititysmoduulipari
• Luo palvelumoduuli
• Yhteisten moduulien luominen
• Yhden moduulin käyttäminen toisesta
Edistynyt reititys
• Routing Enabled Feature Module
• Ominaisuusmoduulin käyttäminen
• Ominaisuusmoduulin laiska lataus
• Linkkien luominen ominaisuusmoduulin osiin
• Lisätietoja laiskasta lataamisesta
• Moduulien esilataus
• routerLinkActive-sidonta
• Oletusreitti
• Jokerimerkki Route Path
• redirectTo
• Lapsireitit
• Lapsireittien määrittäminen lapsireiteille
• Linkit lapsireiteille
• Navigointivartijat
• Vartijan toteutusten luominen
• Vartijoiden käyttäminen reitillä
Kulmasovellusten yksikkötestaus
• Yksikkötestaus Angular Artefacts
• Testaustyökalut
• Tyypilliset testausvaiheet
• Testitulokset
• Jasmine Test Suites
• Jasmiinin tiedot (yksikkötestit)
• Odotukset (väitteen ionit)
• Matchers
• Esimamples matchersin käyttämisestä
• Ei-ominaisuuden käyttäminen
• Asennus ja purkaminen Unit Test Suitesissa
• Esimample of beforeEach and afterEach Functions
• Kulmatestimoduuli
• Esimample Angular Test Module
• Palvelun testaus
• Palveluesiintymän pistäminen
• Testaa synkronista menetelmää
• Testaa asynkronista menetelmää
• Mock HTTP Clientin käyttäminen
• Valmiiden vastausten toimittaminen
• Komponentin testaus
• Komponenttitestimoduuli
• Komponenttiesiintymän luominen
• ComponentFixture Class
• Peruskomponenttitestit
• DebugElement-luokka
• Käyttäjävuorovaikutuksen simulointi
Virheenkorjaus
• Yliview Angular Debugging
• ViewTypeScript-koodin debuggerissa
• Viankorjausavainsanan käyttäminen
• Debug Logging
• Mikä on Angular DevTools?
• Angular DevToolsin käyttäminen
• Angular DevTools – Komponenttirakenne
• Angular DevTools – Change Detect ion Execut ion
• Syntaksivirheiden havaitseminen

KENELLE KURSSI ON?

Tämä kurssi on suunnattu kaikille, jotka haluavat oppia Angular 15 -kehityksen perusteet ja soveltaa niitä heti luomiseen. web sovelluksia.
Voimme myös toimittaa ja räätälöidä tämän koulutuksen suuremmille ryhmille – säästäen organisaatiosi aikaa, rahaa ja resursseja. Lisätietoja saat ottamalla meihin yhteyttä sähköpostitse osoitteeseen ph.training@lumifywork.com

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ödyllinen
Aikaisempaa Angular- tai AngularJS-kokemusta ei vaadita

Näiden Lumify Workin kurssien tarjontaa säätelevät varausehdot.
Lue ehdot huolellisesti ennen ilmoittautumista tälle kurssille, sillä kurssille ilmoittautumisen ehtona on näiden ehtojen hyväksyminen.

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