LUMIFY WORK Angular 12 programavimas

KODĖL STUDIJUSI ŠĮ KURSĄ

Šis išsamus Angular 12 programavimo kursas yra teorinio mokymosi ir praktinių laboratorijų derinys, apimantis įvadą į Angular, po kurio pateikiamas TypeScript, komponentai, direktyvos, paslaugos, HTTP klientas, testavimas ir derinimas.
Kurse gausu naudingos ir naudingos informacijos, kurią galite iš karto pritaikyti savo darbui. Išmokite pagrindinio Angular 12 kūrimo pagrindus, pvz., vieno puslapio naršyklės programas, reaguojančias websvetaines ir hibridines programas mobiliesiems.
Pastaba: Taip pat galime pristatyti mokymus apie kitas Angular versijas. Prašome susisiekti su mumis ir pateikti užklausą arba užregistruoti susidomėjimą.

KĄ IŠMOKSITE
Sėkmingai baigę šį kursą galėsite:

• Kurkite vieno puslapio kampines programas naudodami „Typescript“.
• Sukurkite visą Angular kūrimo aplinką
• Kurkite komponentus, direktyvas, paslaugas, vamzdžius, formas ir pasirinktinius tikrintojus
• Tvarkykite išplėstines tinklo duomenų gavimo užduotis naudodami Observables Vartokite duomenis iš REST web paslaugas naudojant Angular HT TP Client Handle tiesioginių duomenų ryšius naudojant WebLizdų protokolas
• Norėdami formatuoti duomenis, dirbkite su kampiniais vamzdžiais
• Naudokite išplėstines Angular Component Router funkcijas
• Išbandykite ir derinkite Angular programas naudodami integruotus įrankius.

KURSŲ DALYKAI

1 skyrius. Pristatome Angular

• Kas yra Kampinis?
• Pagrindinės kampinio karkaso ypatybės Tinkamo naudojimo atvejai
• Kampinio taikymo blokai Pagrindinė kampinio taikymo architektūra Įrengiant ir naudojant kampinį
• Kampinės programos, veikiančios programą, anatomija
• „Angular“ programos kūrimas ir diegimas vietinėms programoms mobiliesiems
• Santrauka

2 skyrius. Įvadas į TypeScript

• Programavimo kalbos, skirtos naudoti su kampine TypeScript sintaksė
• Programavimo redaktoriai
• Tipų sistema – kintamųjų apibrėžimas
• Tipų sistema – masyvų apibrėžimas
• Pagrindiniai primityvūs tipai
• Įveskite Funkcijos
• Tipo išvada
• Klasių apibrėžimas
• Klasės metodai
• Matomumo valdymas
• Klasės konstruktoriai
• Klasių konstruktoriai – alternatyvios formos nepainicijuoti laukai
• Sąsajos
• Darbas su ES6 moduliais
• var vs let
• Rodyklės funkcijos
• Rodyklės funkcija Kompaktiškos sintaksės šablono eilutės
• Generics klasėje
• Generics in Function
• Santrauka

3 skyrius. Komponentai

• Kas yra komponentas?
• Buvample Komponentas
• Komponento kūrimas naudojant kampinį CLI
• Komponentų klasė
• @Component Decorator
• Komponento registravimas jo modulio komponento šablone
• Example: HelloComponent šablonas
• Example: HelloComponent klasė naudojant komponentą
• Paleiskite programą
• Komponentų hierarchija
• Programos šakninis komponentas
• „Bootstrap“. File
• Komponentų gyvavimo ciklo kabliukai Example Lifecycle Hooks
• CSS stiliai
• Santrauka

4 skyrius. Komponentų šablonai

• Šablonai
• Šablono vieta
• Ūsai {{ }} sintaksė
• DOM elemento ypatybių nustatymas
• Nustatymo elemento kūno tekstas
• Įvykio įrišimas
• Išraiškos įvykių tvarkytuvas
• Užkirsti kelią numatytam tvarkymui
• Atributų direktyvos
• Taikykite stilius keisdami CSS klases
• Example: ngClass
• Tiesioginis stilių taikymas
• Struktūrinės direktyvos
• Sąlygiškai vykdyti šabloną
• Example: ngJei
• Ciklo kūrimas naudojant ngFor
• ngVietiniams kintamiesiems
• Manipuliavimas kolekcija Pvzample – elemento ištrynimas
• Elementų sekimas naudojant „ngFor Swapping Elements with ngSwitch Grouping Elements“.
• Šablono nuorodos kintamųjų suvestinė

5 skyrius. Komponentų komunikacija

• Bendravimo pagrindai
• Duomenų srauto architektūra
• Vaiko paruošimas gauti duomenis
• Siųsti duomenis iš tėvų
• Daugiau apie ypatybių nustatymą
• Įvykio suaktyvinimas iš komponento
• @Output() Pvzample – antrinis komponentas @Output() Pvzample – Parent Component
• Pilnas dvipusis įrišimas
• Dviejų krypčių duomenų susiejimo nustatymas pirminėje sistemoje
• Santrauka

6 skyrius. Šablonais pagrįstos formos

• Šablonu pagrįstos formos
• Formų importavimo modulis
• Pagrindinis požiūris
• Formos nustatymas
• Vartotojo įvesties gavimas
• Praleidžiamas ngForm atributas
• Inicijuokite formą
• Dviejų krypčių duomenų įrišimas
• Formos patvirtinimas
• Kampiniai tikrintuvai
• Patvirtinimo būsenos rodymas naudojant klases papildomus įvesties tipus
• Žymės langeliai
• Pasirinkite (išskleidžiamąjį) laukus
• Atvaizdavimo parinktys pasirinkti (išskleidžiamajame) datos laukuose
• Radijo mygtukai
• Santrauka

7 skyrius. Reaktyviosios formos

• Reaktyvios formos baigėsiview
• Statybiniai blokai
• Importuoti ReactiveFormsModule
• Sukurkite formą
• Sukurkite šabloną
• Įvesties verčių gavimas
• Įvesties laukų inicijavimas
• Formos reikšmių nustatymas
• Įvesties pakeitimų prenumerata
• Patvirtinimas
• Integruoti tikrintuvai
• Rodoma patvirtinimo klaida
• Pasirinktinis tikrintuvas
• Naudojant tinkintą tikrintuvą
• Konfigūracijos pateikimas pasirinktiniam tikrintuvui
• FormArray – dinamiškai pridėkite įvestis
• FormArray – komponentų klasė
• FormArray – šablonas
• FormArray – reikšmės
• Sub FormGroups – komponentų klasė
• Sub FormGroups – HTML šablonas
• Kodėl verta naudoti subformų grupes
• Santrauka

8 skyrius. Paslaugos ir priklausomybės injekcija

• Kas yra Paslauga?
• Pagrindinės paslaugos kūrimas
• Paslaugų klasė
• Kas yra priklausomybės injekcija?
• Paslaugos egzemplioriaus suleidimas
• Injektoriai
• Purkštukų hierarchija
• Paslaugos registravimas naudojant Root Injector
• Paslaugos registravimas naudojant komponento purkštuką
• Užregistruokite paslaugą naudodami funkcijų modulio purkštuką
• Kur registruoti paslaugą?
• Priklausomybės įpurškimas kituose artefaktuose, teikiantis alternatyvų įgyvendinimą, priklausomybės įpurškimas ir @Host
• Priklausomybės įpurškimas ir @Neprivaloma
• Santrauka

9 skyrius. HTTP klientas

• Kampinis HT TP klientas
• Naudojant T he HT TP klientą – baigtaview
• Importuojamas HttpClientModule
• Paslauga naudojant „HttpClient“.
• GET užklausos pateikimas
• Ką daro stebimas objektas?
• Paslaugos naudojimas komponente
• „PeopleService“ kliento komponento klaidų tvarkymas
• Klaidos objekto pritaikymas
• POST užklausos pateikimas
• PUT užklausos pateikimas
• Ištrinti užklausą

10 skyrius. Vamzdžiai ir duomenų formatavimas

• Kas yra vamzdžiai?
• Įmontuoti vamzdžiai
• Vamzdžių naudojimas HTML šablonų grandinės vamzdžiuose
• Internacionalizuoti vamzdžiai (i18n) Įkeliami vietos duomenys
• Data Pipe
• Skaičius Vamzdis
• Valiutos vamzdis
• Sukurkite pasirinktinį vamzdį
• Custom Pipe Example
• Naudojant pasirinktinius vamzdžius
• Vamzdžio naudojimas su ngFor
• Filtro vamzdis
• Vamzdžių kategorija: grynas ir nešvarus
• Santrauka
• Pure Pipe Example
• Nešvarus vamzdis Example
• Santrauka

11 skyrius. Įvadas į vieno puslapio programas

• Kas yra tradicinė vieno puslapio programa (SPA). Web Taikymas
• SPA darbo eiga
• Vieno puslapio programa Advantages HTML5 istorijos API
• SPA iššūkiai
• SPA diegimas naudojant kampinę santrauką

12 skyrius. Kampinio komponento maršrutizatorius

• Komponentinis maršrutizatorius
• View Navigacija
• „Angular Router“ API
• Maršrutizatoriaus įgalintos programos kūrimas
• Nurodytų komponentų talpinimas
• Naršymas naudojant nuorodas ir mygtukus
• Programinė navigacija
• Pravažiavimo maršruto parametrai
• Navigacija naudojant maršruto parametrus
• Maršruto parametrų verčių gavimas
• Sinchroninis maršruto parametro gavimas
• Asinchroninis maršruto parametro gavimas
• Užklausos parametrai
• Užklausos parametrų teikimas
• Asinchroninis užklausos parametrų gavimas
• Problemos su rankiniu URL įrašas ir žymėjimas
• Santrauka

13 skyrius. Išplėstinis HTTP klientas

• Užklausos parinktys
• „HttpResponse“ objekto grąžinimas
• Užklausų antraščių nustatymas
• Naujų stebimų objektų kūrimas
• Paprasto stebėjimo kūrimas
• Stebimi konstruktoriaus metodas Stebimi operatoriai
• Žemėlapis ir filtras Operatoriai
• FlatMap() operatorius
• Tap() operatorius
• Zip() kombinatorius
• Talpykloje saugomas HT TP atsakymas
• Nuosekliųjų HT TP skambučių atlikimas
• Skambinimas lygiagrečiai
• Klaidos objekto tinkinimas naudojant catchError()
• Klaida vamzdyne
• Klaidos atkūrimas
• Santrauka

14 skyrius. Kampiniai moduliai

• Kodėl kampiniai moduliai?
• Modulio klasės anatomija
• @NgModule Properties
• Funkcijų moduliai
• Example Modulio struktūra
• Sukurkite domeno modulį
• Sukurkite maršruto / maršruto parinkimo modulių porą
• Sukurkite paslaugų modulį
• Bendrųjų modulių kūrimas

15 skyrius. Išplėstinis maršruto parinkimas

• Maršruto parinkimo įgalintas funkcijos modulis
• Funkcijų modulio naudojimas
• Tingus įkeliamas funkcijų modulis
• Funkcijų modulio komponentų nuorodų kūrimas
• Daugiau apie tingų įkėlimą
• Išankstinio įkėlimo moduliai
• Numatytasis maršrutas
• Pakaitos simbolio maršruto kelias
• nukreipti į
• Vaikų maršrutai
• Vaikų maršrutų apibrėžimas
• Vaikų maršrutams
• Vaikų maršrutų nuorodos
• Navigacijos sargybiniai
• Apsaugos įgyvendinimų kūrimas
• Apsaugų naudojimas maršrute
• Santrauka

Skyrius 16. Vieneto testavimas Angular Applications

• Kampinių artefaktų matavimo vienetas
• testavimo įrankiai
• Įprasti testavimo žingsniai
• Testo rezultatai
• Jasmine Test Suites
• Jazminų specifikacijos (vieneto testai)
• Lūkesčiai (teigimai)
• Degtukai
• Exampatitikmenų naudojimas
• Ne nuosavybės naudojimas
• Sąranka ir išardymas „Unit Test Suite“.
• Example of beforeEach ir afterEach Functions
• Kampinis bandymo modulis
• Example kampinio bandymo modulis
• Paslaugos testavimas
• Paslaugos egzemplioriaus suleidimas
• Išbandykite sinchroninį metodą
• Išbandykite asinchroninį metodą
• Mock HT TP Client naudojimas
• Pateikiamas paruoštas atsakymas
• Komponento testavimas
• Komponentų testavimo modulis
• Komponento egzemplioriaus kūrimas
• „Component Fixture“ klasė
• Pagrindinių komponentų testai
• DebugElement klasė
• Vartotojo sąveikos modeliavimas
• Santrauka

17 skyrius. Derinimas

• Baigėsiview kampinio derinimo
• View„TypeScript“ kodo derinimo programoje
• Derinimo priemonės raktinio žodžio naudojimas
• Derinimo registravimas
• Kas yra Angular DevTools?
• Naudojant Angular DevTools
• Angular DevTools – komponentų struktūra
• Angular DevTools – pakeitimų aptikimo vykdymas
• Sintaksės klaidų gaudymas
• Santrauka

Laboratoriniai pratimai

• 1 laboratorija. Kampinio įvadas
• 2 laboratorija. Įvadas į TypeScript
• 3 laboratorija. Komponentų įvadas
• 4 laboratorija. Komponento šablonas
• 5 laboratorija. Sukurkite nuotraukų galerijos komponentą
• 6 laboratorija. Šablonu pagrįsta forma
• 7 laboratorija. Sukurkite redagavimo formą
• 8 laboratorija. Reaktyvioji forma
• 9 laboratorija. Paslaugos kūrimas
• 10 laboratorija. Sukurkite HT TP klientą
• 11 laboratorija. Naudokite vamzdžius
• 12 laboratorija. Pagrindinė vieno puslapio programa naudojant maršrutizatorių laboratoriją 13. Sukurkite vieno puslapio programą (SPA)
• 14 laboratorija. Išplėstinis HT TP klientas
• 15 laboratorija. Angular Bootstrap naudojimas
• 16 laboratorija. Tingus modulio įkėlimas
• 17 laboratorija. Išplėstinis maršruto parinkimas
• 18 laboratorija. Vieneto testavimas
• 19 laboratorija. Kampinių programų derinimas

KAM SKIRTA KURSAS?
Šis kursas skirtas visiems, kuriems reikia išmokti Angular 12 kūrimo pagrindus ir pritaikyti juos kuriant web programas iš karto. Taip pat galime pristatyti ir pritaikyti šį mokymo kursą didesnėms grupėms – taupydami jūsų organizacijos laiką, pinigus ir išteklius.

REIKALAVIMAI
Web Norint išnaudoti visas šio kampinio kurso galimybes, reikalinga kūrimo patirtis naudojant HTML, CSS ir JavaScript. Naršyklės DOM žinios taip pat praverčia. Ankstesnė Angular patirtis naudojant AngularJS ar bet kurią Angular versiją nebūtina.
https://www.lumifywork.com/en-au/courses/angular-12-programming/

Dokumentai / Ištekliai

LUMIFY WORK Angular 12 programavimas [pdfVartotojo vadovas Kampinis 12 programavimas, kampinis, 12 programavimas, programavimas

Nuorodos

• Vartotojo vadovas