LUMIFY WORK Angular 12 Programare

DE CE A STUDIA ACEST CURS

Acest curs cuprinzător de programare Angular 12 este o combinație de învățare teoretică și laboratoare practice care include o introducere în Angular, urmată de TypeScript, componente, directive, servicii, client HTTP, testare și depanare.
Cursul este plin de informații utile și aplicabile pe care le puteți aplica imediat muncii dvs. Aflați elementele fundamentale ale dezvoltării Angular 12 de bază, cum ar fi aplicațiile de browser cu o singură pagină, responsive website-uri și aplicații mobile hibride.
Nota: De asemenea, putem oferi instruire pentru alte versiuni de Angular. Vă rugăm să ne contactați pentru a face o întrebare sau pentru a vă înregistra interesul.

CE VREI ÎNVĂȚA
După finalizarea cu succes a acestui curs, vei fi capabil să:

• Dezvoltați aplicații Angular pe o singură pagină folosind Typescript
• Configurați un mediu de dezvoltare Angular complet
• Creați componente, directive, servicii, conducte, formulare și validatoare personalizate
• Gestionați sarcinile avansate de recuperare a datelor din rețea folosind Observables Consume date din REST web servicii utilizând clientul Angular HT TP Gestionați conexiunile push-date folosind WebProtocol prize
• Lucrați cu Angular Pipes pentru a formata datele
• Utilizați funcțiile avansate ale routerului cu componente unghiulare
• Testați și depanați aplicațiile Angular folosind instrumente încorporate.

SUBIECTE CURSULUI

Capitolul 1. Prezentarea Angular

• Ce este Angular?
• Caracteristicile centrale ale cadrului unghiular Cazuri de utilizare adecvate
• Elementele de bază ale unei aplicații unghiulare Arhitectura de bază a unei aplicații unghiulare Instalarea și utilizarea Angular
• Anatomia unei aplicații unghiulare care rulează aplicația
• Construirea și implementarea aplicației Angular pentru aplicațiile mobile native
• Rezumat

Capitolul 2. Introducere în TypeScript

• Limbaje de programare pentru utilizare cu sintaxa Angular TypeScript
• Editori de programare
• Sistemul de tip – Definirea variabilelor
• Sistemul de tip – Definirea matricelor
• Tipuri primitive de bază
• Introduceți funcții
• Tip Inferență
• Definirea claselor
• Metode de clasă
• Controlul vizibilității
• Constructori de clasă
• Constructori de clasă – câmpuri neinițializate de formulare alternative
• Interfețe
• Lucrul cu modulele ES6
• var vs let
• Funcții săgeți
• Săgeată Funcție Compact Syntax Template Strings
• Generic în clasă
• Generic in Function
• Rezumat

Capitolul 3. Componente

• Ce este o componentă?
• Un example Component
• Crearea unei componente folosind Angular CLI
• Clasa de componente
• Decoratorul @Component
• Înregistrarea unei componente în șablonul său de componentă a modulului
• Example: HelloComponent Template
• Example: Clasa HelloComponent folosind o componentă
• Rulați aplicația
• Ierarhia componentelor
• Componenta rădăcină a aplicației
• Bootstrap-ul File
• Cârlige pentru ciclul de viață al componentelor Example Lifecycle Hooks
• Stiluri CSS
• Rezumat

Capitolul 4. Șabloane de componente

• Șabloane
• Locația șablonului
• Sintaxa Mustache {{ }}
• Setarea proprietăților elementului DOM
• Setarea textului corpului elementului
• Legarea evenimentului
• Manipulator de evenimente de expresie
• Preveniți manipularea implicită
• Directive de atribute
• Aplicați stiluri prin schimbarea claselor CSS
• Example: ngClass
• Aplicarea directă a stilurilor
• Directive structurale
• Șablon de executare condiționată
• Example: ngIf
• Buclă folosind ngFor
• ngPentru variabilele locale
• Manipularea colecției Example – Ștergerea unui articol
• Urmărirea articolelor cu ngFor Schimbarea elementelor cu elementele de grupare ngSwitch
• Rezumatul variabilelor de referință șablon

Capitolul 5. Comunicarea între componente

• Bazele comunicării
• Arhitectura fluxului de date
• Pregătirea copilului pentru a primi date
• Trimiteți date de la părinte
• Mai multe despre setarea proprietăților
• Evenimentul de declanșare dintr-o componentă
• @Output() Example – Componenta copil @Output() Example – Componenta părinte
• Legare completă în două sensuri
• Configurarea legăturii bidirecționale de date în Parent
• Rezumat

Capitolul 6. Formulare bazate pe șabloane

• Formulare bazate pe șabloane
• Modulul de import de formulare
• Abordare de bază
• Configurarea unui formular
• Obținerea intrării utilizatorului
• Se omite atributul ngForm
• Inițializați formularul
• Legare de date în două sensuri
• Validarea formularului
• Validatoare unghiulare
• Afișarea stării de validare folosind clase Tipuri suplimentare de intrare
• Casete de selectare
• Selectați câmpuri (derulant).
• Opțiuni de randare pentru câmpurile Selectați (derulant) Data
• Butoane radio
• Rezumat

Capitolul 7. Forme reactive

• S-au terminat formele reactiveview
• Blocurile de construcție
• Importă ReactiveFormsModule
• Construiți o formă
• Proiectați șablonul
• Obținerea valorilor de intrare
• Inițializarea câmpurilor de intrare
• Setarea valorilor formularului
• Abonarea la modificările de intrare
• Validare
• Validatoare încorporate
• Se afișează eroarea de validare
• Validator personalizat
• Utilizarea unui validator personalizat
• Furnizarea configurației la validatorul personalizat
• FormArray – Adăugați dinamic intrări
• FormArray – Clasa de componente
• FormArray – Șablonul
• FormArray – Valori
• Sub FormGroups – Clasa de componente
• Sub FormGroups – șablon HTML
• De ce să folosiți Sub FormGroups
• Rezumat

Capitolul 8. Servicii și injecție de dependență

• Ce este un serviciu?
• Crearea unui serviciu de bază
• Clasa de servicii
• Ce este injecția de dependență?
• Injectarea unei instanțe de serviciu
• Injectoare
• Ierarhia injectoarelor
• Înregistrarea unui service cu Root Injector
• Înregistrarea unui service cu injectorul unei componente
• Înregistrați un service cu un injector cu modul caracteristic
• Unde să înregistrați un serviciu?
• Injecție de dependență în alte artefacte care oferă o implementare alternativă Injecție de dependență și @Host
• Injecție de dependență și @Opțional
• Rezumat

Capitolul 9. Client HTTP

• Clientul Angular HT TP
• Utilizarea Clientului HT TP – Pesteview
• Se importă HttpClientModule
• Serviciu folosind HttpClient
• Efectuarea unei cereri GET
• Ce face un obiect observabil?
• Utilizarea serviciului într-o componentă
• Gestionarea erorilor componentei client PeopleService
• Personalizarea obiectului de eroare
• Efectuarea unei cereri POST
• Efectuarea unei cereri PUT
• Efectuarea unei cereri de ștergere

Capitolul 10. Tuburi și formatarea datelor

• Ce sunt țevile?
• Conducte încorporate
• Utilizarea țevilor în șablon HTML Înlănțuirea țevilor
• Conducte internaționalizate (i18n) Se încarcă datele locale
• Data Pipe
• Numărul Pipe
• Conducta valutară
• Creați o conductă personalizată
• Conductă personalizată Example
• Utilizarea conductelor personalizate
• Folosind o țeavă cu ngFor
• O conductă de filtrare
• Categoria țevilor: pură și impură
• Rezumat
• Pure Pipe Example
• Țeavă impură Example
• Rezumat

Capitolul 11. Introducere în aplicațiile cu o singură pagină

• Ce este o aplicație o singură pagină (SPA) tradițională Web Aplicație
• Flux de lucru SPA
• Aplicație Advan o singură paginătages HTML5 History API
• Provocări SPA
• Implementarea SPA-urilor folosind rezumatul unghiular

Capitolul 12. Routerul cu componente unghiulare

• Routerul de componente
• View Navigare
• API-ul Angular Router
• Crearea unei aplicații cu router activat
• Găzduirea componentelor rutate
• Navigare folosind link-uri și butoane
• Navigare programatică
• Trecerea parametrilor rutei
• Navigarea cu parametrii rutei
• Obținerea valorilor parametrilor rutei
• Preluarea parametrului de rută în mod sincron
• Preluarea unui parametru de rută în mod asincron
• Parametrii de interogare
• Furnizarea parametrilor de interogare
• Preluarea parametrilor de interogare în mod asincron
• Probleme cu manualul URL intrare și marcare
• Rezumat

Capitolul 13. Client HTTP avansat

• Opțiuni de solicitare
• Returnarea unui obiect HttpResponse
• Setarea antetelor cererii
• Crearea de noi observabile
• Crearea unui observabil simplu
• Metoda constructorului observabil Operatori observabili
• Operatorii de hartă și filtru
• Operatorul flatMap().
• Operatorul tap().
• Combinatorul zip().
• Memorarea în cache a răspunsului HT TP
• Efectuarea de apeluri HT TP secvențiale
• Efectuarea de apeluri paralele
• Personalizarea obiectului de eroare cu catchError()
• Eroare în Pipeline
• Recuperare eroare
• Rezumat

Capitolul 14. Module unghiulare

• De ce module unghiulare?
• Anatomia unei clase de modul
• @NgModule Proprietăți
• Module de caracteristici
• Example Structura modulului
• Creați un modul de domeniu
• Creați o pereche de module de rutare/rutare
• Creați un modul de service
• Crearea modulelor comune

Capitolul 15. Rutare avansată

• Modul de funcții cu rutare activată
• Utilizarea Modulului de caracteristici
• Încărcare leneșă a modulului de caracteristici
• Crearea de legături pentru componentele modulului de caracteristici
• Mai multe despre Lazy Loading
• Preîncărcarea modulelor
• Ruta implicită
• Calea traseului cu wildcard
• redirecționează către
• Trasee pentru copii
• Definirea rutelor pentru copii
• pentru trasee pentru copii
• Link-uri pentru traseele copiilor
• Gărzi de navigație
• Crearea de implementări de gardă
• Folosirea gardienilor într-un traseu
• Rezumat

Capitolul 16. Aplicații unghiulare de testare unitară

• Unitatea de testare a artefactelor unghiulare
• Instrumente de testare
• Pași tipici de testare
• Rezultatele testelor
• Jasmine Test Suites
• Specificații Jasmine (teste unitare)
• Așteptări (afirmații)
• Potrivitori
• Exampfișierele de utilizare a potrivirilor
• Folosind proprietatea not
• Configurare și demontare în suitele de testare unitară
• Example of beforeEach și afterEach Funcții
• Modul de testare unghiulară
• Example Modulul de testare unghiulară
• Testarea unui serviciu
• Injectarea unei instanțe de serviciu
• Testați o metodă sincronă
• Testați o metodă asincronă
• Folosind Mock HT TP Client
• Furnizarea răspunsului predefinit
• Testarea unei componente
• Modul de testare a componentelor
• Crearea unei Instanțe de Componentă
• Clasa ComponentFixture
• Teste ale componentelor de bază
• Clasa DebugElement
• Simularea interacțiunii utilizatorului
• Rezumat

Capitolul 17. Depanare

• Pesteview de depanare unghiulară
• Viewcodul TypeScript în Debugger
• Folosind cuvântul cheie de depanare
• Înregistrare de depanare
• Ce este Angular DevTools?
• Folosind Angular DevTools
• Angular DevTools – Structura componentelor
• Angular DevTools – Execuția detectării modificărilor
• Captarea erorilor de sintaxă
• Rezumat

Exerciții de laborator

• Laboratorul 1. Introducere în Angular
• Laboratorul 2. Introducere în TypeScript
• Laboratorul 3. Introducere în Componente
• Laboratorul 4. Șablon de componente
• Laboratorul 5. Creați o componentă Galerie foto
• Laboratorul 6. Formular bazat pe șablon
• Laboratorul 7. Creați un formular de editare
• Laboratorul 8. Forma reactivă
• Laboratorul 9. Dezvoltați un serviciu
• Laboratorul 10. Dezvoltați un client HT TP
• Laboratorul 11. Utilizați țevi
• Laboratorul 12. Aplicație de bază cu o singură pagină folosind router Laboratorul 13. Crearea unei aplicații cu o singură pagină (SPA)
• Laboratorul 14. Client HT TP avansat
• Laboratorul 15. Utilizarea Angular Bootstrap
• Laboratorul 16. Încărcare leneșă a modulului
• Laboratorul 17. Rutare avansată
• Laboratorul 18. Testarea unitară
• Laboratorul 19. Depanarea aplicațiilor unghiulare

CUI ESTE CURSUL?
Acest curs se adresează oricărei persoane care trebuie să învețe elementele fundamentale ale dezvoltării Angular 12 și să le aplice la crearea web aplicații imediat. De asemenea, putem oferi și personaliza acest curs de formare pentru grupuri mai mari – economisind timp, bani și resurse organizației dumneavoastră.

CERINTE
Web Este necesară experiența de dezvoltare în utilizarea HTML, CSS și JavaScript pentru a profita la maximum de acest curs Angular. Cunoașterea browserului DOM este, de asemenea, utilă. Nu este necesară experiența anterioară în Angular, cu AngularJS sau orice versiune de Angular.
https://www.lumifywork.com/en-au/courses/angular-12-programming/

Documente/Resurse

LUMIFY WORK Angular 12 Programare [pdfGhid de utilizare Angular 12 Programare, Angular, 12 Programare, Programare

Referințe

• Manual de utilizare