LUMIFY WORK Angular 12 Programming

YUAV UA LI CAS YUAV UA LI CAS NO

Qhov kev qhia dav dav Angular 12 Programming no yog kev sib txuas ntawm kev kawm theoretical thiab kev siv tes ua haujlwm uas suav nrog kev qhia txog Angular, ua raws li TypeScript, cov khoom siv, cov lus qhia, cov kev pabcuam, HTTP Client, kuaj, thiab debugging.
Cov chav kawm muaj cov ntaub ntawv tseem ceeb thiab ua tau zoo uas koj tuaj yeem siv rau koj txoj haujlwm tam sim ntawd. Kawm cov hauv paus ntsiab lus ntawm kev txhim kho Angular 12 xws li ib nplooj ntawv browser siv, teb websites, thiab hybrid mobile applications.
Nco tseg: Peb kuj tuaj yeem xa cov kev cob qhia rau lwm cov qauv ntawm Angular. Thov hu rau peb kom nug lossis sau npe rau koj qhov kev txaus siab.

KOJ YUAV TSUM KAWM
Thaum kawm tiav hoob no, koj yuav muaj peev xwm:

• Tsim ib nplooj ntawv Angular siv siv Typescript
• Teeb tsa ib puag ncig kev txhim kho Angular tiav
• Tsim cov Cheebtsam, Cov Lus Qhia, Cov Kev Pabcuam, Cov Yeeb Nkab, Cov Ntawv, thiab Cov Neeg Ua Haujlwm Kev Cai
• Tuav cov ntaub ntawv tshaj tawm hauv lub network uas siv cov Observables Siv cov ntaub ntawv los ntawm REST web cov kev pabcuam siv Angular HT TP Client Handle push-data connections using the WebQhov (socket) raws tu qauv
• Ua haujlwm nrog Angular Pipes los tsim cov ntaub ntawv
• Siv cov yam ntxwv ntawm Angular Component Router
• Kuaj thiab debug Angular daim ntawv thov siv cov cuab yeej built-in.

KEV KAWM NTAWV

Tshooj 1. Qhia Angular

• Angular yog dab tsi?
• Central Features ntawm Angular Framework tsim nyog siv Cases
• Tsev Blocks ntawm Angular Application Basic Architecture ntawm Angular Application Installing thiab Siv Angular
• Anatomy ntawm daim ntawv thov Angular khiav daim ntawv thov
• Tsim thiab xa daim ntawv thov Angular rau Native Mobile Apps
• Cov ntsiab lus

Tshooj 2. Taw qhia rau TypeScript

• Programming lus siv nrog Angular TypeScript Syntax
• Programming Editors
• Hom System – Defining Variables
• Hom System – Defining Arrays
• Basic Primitive Hom
• Ntaus hauv Functions
• Hom kev xav
• Txhais cov chav kawm
• Cov txheej txheem chav kawm
• Tswj kev pom
• Chav tsev tsim
• Class Constructors – Alternate Form Unitialised Fields
• Interfaces
• Ua haujlwm nrog ES6 Modules
• var vs lis
• Arrow Functions
• Arrow Function Compact Syntax Template Strings
• Generics hauv chav kawm
• Generics hauv Function
• Cov ntsiab lus

Tshooj 3. Cheebtsam

• Component yog dab tsi?
• Ib Example Component
• Tsim cov khoom siv Angular CLI
• Lub Component Class
• Tus @Component Decorator
• Registering a Component rau Nws Module Component Template
• Example: HelloComponent Template
• Example: HelloComponent Class Siv Ib Cheeb Tsam
• Khiav daim ntawv thov
• Component Hierarchy
• Daim ntawv thov Root Component
• Lub Bootstrap File
• Component Lifecycle Hooks Example Lifecycle Hooks
• CSS Styles
• Cov ntsiab lus

Tshooj 4. Cov Qauv Txheej Txheem

• Cov qauv
• Template Qhov chaw
• Lub Mustache {{ }} Syntax
• Teem DOM Element Properties
• Setting Element Body Text
• Txheej xwm Binding
• Kev nthuav qhia Event Handler
• Tiv thaiv kom tsis txhob kov
• Cov Lus Qhia
• Siv Cov Qauv los ntawm Kev Hloov CSS Chav Kawm
• Example: ngClass
• Thov Cov Qauv Ncaj Ncees
• Cov Lus Qhia Txog Cov Qauv
• Conditionally Execute Template
• Example: ngf
• Looping Siv ngFor
• ngFor Local Variables
• Manipulating Collection Example – Rho tawm ib yam khoom
• Yam khoom taug qab nrog ngFor Swapping Elements nrog ngSwitch Grouping Elements
• Template Reference Variable Summary

Tshooj 5. Kev sib txuas lus sib txuas

• Kev sib txuas lus Basics
• Data Flow Architecture
• Npaj tus me nyuam kom tau txais cov ntaub ntawv
• Xa cov ntaub ntawv los ntawm Niam Txiv
• Xav paub ntxiv txog Setting Properties
• Kev ua txhaum cai los ntawm ib qho khoom
• @Output() Example – Child Component @Output() Example – Parent Component
• Tag Nrho Ob Txoj Kev Sib Txuas
• Teeb tsa Ob Txoj Kev Cov Ntaub Ntawv Binding hauv Niam Txiv
• Cov ntsiab lus

Tshooj 6. Template Tsav Cov Ntawv

• Template Tsav Cov Ntawv
• Importing Forms Module
• Txoj kev yooj yim
• Kev teeb tsa ib daim ntawv
• Tau txais cov neeg siv nkag
• Omitting ngForm Attribute
• Pib qhov Form
• Ob Txoj Kev Data Binding
• Daim ntawv validation
• Angular Validators
• Tso saib Validation State Siv Chav Kawm Ntxiv Cov Lus Qhia Ntxiv
• Checkboxes
• Xaiv (Drop Down) Fields
• Rendering Options rau Xaiv (Nco tseg) Hnub tim teb
• Xov tooj cua khawm
• Cov ntsiab lus

Tshooj 7. Reactive Forms

• Daim ntawv Reactive dhauview
• Lub Tsev Blocks
• Ntshuam ReactiveFormsModule
• Tsim ib daim ntawv
• Tsim tus Template
• Tau txais cov nqi nkag
• Pib qhov Input Fields
• Kev teeb tsa tus nqi tsim nyog
• Subscribing rau kev hloov pauv hloov
• Kev lees paub
• Built-In Validators
• Qhia Validation yuam kev
• Custom Validator
• Siv tus Custom Validator
• Muab Configuration rau Custom Validator
• FormArray – Dynamically Ntxiv Inputs
• FormArray - Cov Khoom Siv Chav Kawm
• FormArray – Tus Template
• FormArray – Tus nqi
• Sub FormGroups – Cov chav kawm
• Sub FormGroups – HTML Template
• Vim li cas thiaj siv Sub FormGroups
• Cov ntsiab lus

Tshooj 8. Kev Pabcuam thiab Kev Txhaum Cai

• Kev Pabcuam yog dab tsi?
• Tsim Kev Pabcuam Yooj Yim
• Kev Pabcuam
• Dependency Txhaj Tshuaj yog dab tsi?
• Txhaj Tshuaj Tiv Thaiv
• Txhaj tshuaj
• Injector Hierarchy
• Sau npe ib qho kev pab cuam nrog lub hauv paus Injector
• Sau npe rau Kev Pabcuam nrog Cov Txheej Txheem Lub Txhaj Tshuaj
• Sau npe rau Kev Pabcuam nrog Feature Module Injector
• Yuav Sau Npe Kev Pabcuam Qhov twg?
• Kev Txhaum Kev Txhaum Cai hauv Lwm Cov Khoom Siv Uas Muab Kev Ua Haujlwm Hloov Kho Kev Txhaum Cai thiab @Host
• Dependency Txhaj thiab @Optional
• Cov ntsiab lus

Tshooj 9. HTTP Client

• Angular HT TP Client
• Siv T nws HT TP Client - Tshajview
• Ntshuam HttpClientModule
• Kev Pabcuam Siv HttpClient
• Ua Daim Ntawv Thov GET
• Observable Object ua dab tsi?
• Siv Cov Kev Pabcuam hauv Ib Cheeb Tsam
• Cov Neeg Pabcuam Cov Neeg Siv Khoom Siv Ua Haujlwm yuam kev
• Customizing qhov yuam kev Object
• Ua Kev Thov POST
• Ua daim ntawv thov PUT
• Ua DELETE Thov

Tshooj 10. Cov kav dej thiab cov ntaub ntawv Formatting

• Cov Pipes yog dab tsi?
• Built-In Cov kav dej
• Siv Pipes hauv HTML Template Chaining Pipes
• Internationalized Pipes (i18n) Loading Locale Data
• Hnub Pipe
• Tus lej Pipe
• Nyiaj Yeeb
• Tsim Cov Yeeb Nkab Kev Cai
• Custom Pipe Example
• Siv cov kav dej Customized
• Siv cov yeeb nkab nrog ngFor
• Ib Filter Pipe
• Pipe Qeb: Ntshiab thiab tsis huv
• Cov ntsiab lus
• Pure Yeeb Example
• Impure Tube Example
• Cov ntsiab lus

Tshooj 11. Kev Taw Qhia rau Ib nplooj ntawv thov

• Dab tsi yog Daim Ntawv Thov Ib Daim Ntawv (SPA) Ib txwm siv Web Daim ntawv thov
• SPA Workflow
• Ib nplooj ntawv thov Advantages HTML5 History API
• Kev Sib Tw SPA
• Kev siv SPA's Siv Angular Summary

Tshooj 12. Lub Angular Component Router

• Lub Component Router
• View Kev taw qhia
• Angular Router API
• Tsim ib Router Enabled Application
• Hosting Routed Components
• Navigation siv txuas thiab khawm
• Programmatic Navigation
• Passing Route Parameters
• Navigating nrog Route Parameters
• Tau txais Txoj Kev Parameter Tus Nqi
• Retrieving the Route Parameter Synchronously
• Retrieving ib Route Parameter Asynchronously
• Query Parameters
• Supplying Query Parameters
• Retrieving Query Parameters Asynchronously
• Teeb meem nrog Phau Ntawv Qhia URL nkag thiab Bookmarking
• Cov ntsiab lus

Tshooj 13. Advanced HTTP Client

• Thov xaiv
• Rov qab ib qho HttpResponse Object
• Teem Lub Npe Thov
• Tsim Cov Observables tshiab
• Tsim ib qho yooj yim Observable
• Observable Constructor Method Observable Operators
• Daim ntawv qhia thiab lim neeg ua haujlwm
• FlatMap() Operator
• Tus tap() Operator
• Tus zip() Combinator
• Caching HT TP teb
• Ua Sequential HT TP Hu
• Ua Parallel Hu
• Customizing Error Object nrog catchError()
• yuam kev hauv Pipeline
• Yuam kev rov qab
• Cov ntsiab lus

Tshooj 14. Angular Modules

• Vim li cas Angular Modules?
• Anatomy ntawm Module Class
• @NgModule Properties
• Feature Modules
• Example Module Structure
• Tsim lub Domain Module
• Tsim ib qho Routed / Routing Module Pair
• Tsim ib qho Kev Pabcuam Module
• Tsim Common Modules

Tshooj 15. Advanced Routing

• Routing Enabled Feature Module
• Siv lub Feature Module
• Lazy Loading Feature Module
• Tsim cov kev sib txuas rau Feature Module Cheebtsam
• Xav paub ntau ntxiv txog Lazy Loading
• Preloading Modules
• Default Route
• Wildcard Txoj Kev
• redirect rau
• Me Nyuam Txoj Kev
• Defining Child Routes
• rau Child Routes
• Txuas rau Child Routes
• Navigation Guards
• Tsim Kev Tiv Thaiv Kev Ua Haujlwm
• Kev siv Guards hauv ib Txoj Kev
• Cov ntsiab lus

Tshooj 16. Chav ntsuas ntsuas Angular daim ntawv thov

• Chav ntsuas Angular Artifacts
• Cov cuab yeej kuaj
• Cov kauj ruam kev xeem
• Cov qhabnias xeem
• Jasmine Test Suites
• Jasmine Specs (Unit Tests)
• Kev cia siab (Assertions)
• Cov neeg sib tw
• ExampSiv cov Matchers
• Kev siv cov khoom tsis yog
• Teeb thiab Teardown hauv Chav Test Suites
• Example ntawm ua ntejEach thiab afterEach Functions
• Angular Test Module
• Exampthiab Angular Test Module
• Kuaj Kev Pabcuam
• Txhaj Tshuaj Tiv Thaiv
• Kuaj ib txoj kev Synchronous
• Kuaj ib txoj kev Asynchronous
• Siv Mock HT TP Client
• Muab cov kaus poom teb
• Kuaj ib Cheeb Tsam
• Component Test Module
• Tsim ib qho piv txwv
• Cov ComponentFixture Class
• Basic Component Tests
• Chav Kawm DebugElement
• Simulating cov neeg siv kev sib tham
• Cov ntsiab lus

Tshooj 17. Debugging

• Tshajview ntawm Angular Debugging
• Viewhauv TypeScript Code hauv Debugger
• Siv lub ntsiab lus debugger
• Debug Logging
• Angular DevTools yog dab tsi?
• Siv Angular DevTools
• Angular DevTools - Cov qauv tsim
• Angular DevTools - Hloov Kev Tshawb Nrhiav Ua Haujlwm
• Catching Syntax yuam kev
• Cov ntsiab lus

Lab Exercises

• Lab 1. Taw qhia rau Angular
• Lab 2. Taw qhia rau TypeScript
• Lab 3. Kev Taw Qhia rau Cheeb Tsam
• Lab 4. Component Template
• Lab 5. Tsim ib daim duab Gallery Cheebtsam
• Lab 6. Template Tsav Daim Ntawv
• Lab 7. Tsim ib daim ntawv Kho kom raug
• Lab 8. Reactive Form
• Lab 9. Tsim Kev Pabcuam
• Lab 10. Tsim ib tug HT TP Client
• Lab 11. Siv cov kav dej
• Lab 12. Basic Single Page Application Siv Router Lab 13. Tsim Ib Daim Ntawv Thov Ib Ntus (SPA)
• Lab 14. Advanced HT TP Client
• Lab 15. Siv Angular Bootstrap
• Lab 16. Lazy Module Loading
• Lab 17. Advanced Routing
• Lab 18. Chav ntsuas
• Lab 19. Debugging Angular Applications

YUAV UA LI CAS?
Hoob no yog tsom rau txhua tus uas yuav tsum tau kawm cov hauv paus ntawm Angular 12 txoj kev loj hlob thiab siv los tsim web daim ntawv thov tam sim ntawd. Peb tseem tuaj yeem xa thiab kho qhov kev cob qhia no rau cov pab pawg loj dua - txuag koj lub sijhawm, nyiaj txiag thiab peev txheej.

YUAV TSUM TAU
Web kev txhim kho kev siv HTML, CSS thiab JavaScript yuav tsum tau kom tau txais txiaj ntsig zoo tshaj plaws ntawm chav kawm Angular no. Kev paub txog qhov browser DOM kuj tseem muaj txiaj ntsig. Ua ntej Angular kev paub, nrog AngularJS lossis txhua yam ntawm Angular, tsis tas yuav tsum muaj.
https://www.lumifywork.com/en-au/courses/angular-12-programming/

Cov ntaub ntawv / Cov ntaub ntawv

LUMIFY WORK Angular 12 Programming [ua pdf] Cov neeg siv phau ntawv qhia Angular 12 Programming, Angular, 12 Programming, Programming

Cov ntaub ntawv

• Cov neeg siv phau ntawv