Angular Training - eLearning

Angular Training - eLearning 

Deze Angular certificeringscursus helpt u front-end webontwikkeling met Angular onder de knie te krijgen. Doe diepgaande kennis op van Angular concepten, zoals het vergemakkelijken van de ontwikkeling van single-page webapplicaties, dependency injection, typescript, componenten, directives, pipes, formulieren, routing en testen.

Inbegrepen

• 50 uur Blended Learning
• 20 uur online zelfstudie
• 30 uur door een instructeur geleide training
• Gratis inleidende JavaScript cursus
• Flexibiliteit om lesen te kiezen
• Door de industrie erkend certificaat ter voltooiing van de cursus

Doelgroep

• UI developers
• Technical project managers
• Full-stack web developers
• Quality assurance specialists
• Architects
• Students who wish to learn front-end UI development

Leerdoelen

• Understand the design of single-page applications and how Angular facilitates their development
• Separate the model, view, and controller layers of your application and implement them using Angular
• Master Angular expressions, filters, and scopes
• Build Angular forms and write Angular directives
• Unit test and end-to-end test your Angular applications
• Developing interactive and dynamic UI using Bootstrap

Certification Details and Criteria

• Complete at least 85 percent of the course or attend one complete batch
• Successful completion and evaluation in the project

Zelfstudieprogramma

Les 01 - Toepassingen voor één pagina

• Cursusoverzicht
• Inleiding tot Single Page Applications (SPA)
• Waar hebben we Angular voor nodig
• De ontwikkelomgeving instellen
• Angular Application Architecture
• Eerste Angular-app

Les 02 - TypeScript en ESNext

• Module Introductie en kennismaking met TypeScript
• De omgeving instellen om TypeScript te schrijven
• Variabele declaraties (var, let, en const)
• Types - Primitives
• Types - Referentie- en speciale types
• Operators - Spread and Backticks
• Operators - Destructure and Rest
• Klasses
• Interface
• Pijlfuncties
• Modules
• Fetch
• Async of await

Les 03 - Decorators

• Module Introductie en een overzicht van Angular Modules
• Wat zijn decoratoren
• Angulaire modules en de @NgModule Decorator
• Verklaringen
• Invoer en uitvoer
• Providers, bootstrap en invoercomponenten
• Angular-toepassing Bootstrap-mechanisme

Les 04 - Component Decorator

• Module Introductie
• Angular componenten en de @Component Decorator
• Een Angular Component maken met de Angular CLI en op StackBlitz
• Component Decorator Metadata
• Encapsulatie bekijken - Geëmuleerd, SchaduwDom, Geen
• Gegevensbinding - Interpolatie van tekenreeksen - {{ }}
• Eigenschap Binden - []
• Gebeurtenis binden - ()
• Eigenschappenversierders @Input en @Output
• Tweeweg gegevensbinding - [()]
• Attribuut Binden - [attr.]
• Klassebinding - [class.]
• Klasse Binden - [style.]
• Inleiding tot levenscyclus Hooks in Angular
• Levenscyclus Hooks gebruiken in Angular
• Query's bekijken - Kind bekijken, Kinderen bekijken, Kind inhoud, Kinderen inhoud bekijken
• Het detectiemechanisme in Angular wijzigen. ZoneJS, NgZones

Les 05 - Angular Routing

• Inleiding tot routing
• Routing implementeren in een Angular App
• Een gebruikerslijst maken. De basis leggen voor Kindroutering
• De gebruikerskoppeling abstraheren naar een afzonderlijk component
• Implementatie van kinderroutes
• Path Match en routetypes
• Inleiding tot routebeschermers in Angular
• CanActivate en CanActivateChild Guards in Angular
• Deactiveer Bewaking in Angular
• Gegevens vooraf ophalen voor een component met Resolve

Les 06 - Dependency Injection

• Inleiding tot sectie
• DI als patroon, DI als raamwerk en typen aanbieders
• Hierarchical Dependency Injection
• Inleiding tot services in Angular
• GET data van een Rest API met behulp van HttpClient
• CRUD Operations using HttpClient, HttpParams, and HttpHeaders
• Observables en Operators in Observables - Map, Retry, Catch
• Gedragsonderwerp en het delen van gegevens met behulp van gedragsonderwerpen

Les 07 - Directives Deep Dive

• Inleiding tot sectie
• Inleiding tot richtlijnen
• Ingebouwde structurele richtlijnen
• Ingebouwde attribuutrichtlijnen
• Aangepaste attribuutrichtlijnen bouwen
• Bouw aangepaste structurele richtlijnen
• Inleiding tot Pipes in Angular
• Ingebouwde leidingen gebruiken
• Creating Custom Pipes in Angular
• Pure and Impure Pipes in Angular
• Decorators Revisited
• Building Custom Decorators in Angular
• Een aangepaste Lifecycle Hook Class Logger Decorator bouwen
• Aangepaste eigenschap Decorator bouwen in Angular

Les 08 - Formulieren in Angular

• Inleiding tot sectie
• Types van formulierbouwstrategieën in Angular
• Snel lange Bootstrap-formulieren maken met VS Code met Emmet
• Formuliercontrol(s) toevoegen aan een Template Driven formulier met de ngModel richtlijn
• De JavaScript-objectrepresentatie van een formulier ophalen met de richtlijn ngForm
• De verzendknop op een formulier uitschakelen met de $invalid vlag van het formulier
• De JavaScript-objectrepresentatie van een formulier ophalen in de TypeScript-klasse
• Selectievakje, keuzerondjes en keuzelijst toevoegen aan een formulier op basis van een sjabloon
• Maken van subsecties in het formulier met behulp van de NgModelGroup richtlijn
• Stappen om een Reactive formulier in Angular te implementeren
• Snel een Bootstrap-formulier maken voor ons Reactive-formulier met Emmet
• Een Reactive-formulier maken in de TypeScript-klasse & koppelen aan het sjabloon
• Validaties toevoegen aan een Reactive Form
• Dynamisch toevoegen of verwijderen van FormControl(s) of FormGroup(s) met behulp van FormArray(s)
• Synchrone aangepaste validaties toevoegen aan je Reactive Form
• Assync Custom Validations toevoegen aan je Reactive Form
• De waarde van een formulier resetten

Les 09 - Gebruik van bibliotheken van derden

• Inleiding tot sectie
• Een Angular CLI Project maken met SCSS als basisstijl
• Introducing Material Design Bootstrap into your Angular CLI Project
• Een navigatiebalk toevoegen in je header
• Material Design-knoppen toevoegen
• Kaarten toevoegen
• Gebruik Material Design Dropdowns en formulieringangen
• Introducing Angular Material in your Angular CLI Project on the top of MDB
• Radio Buttons, Slide Toggle, Slider, Progress Bar en Spinner toevoegen Inleiding tot Firebase
• Een app maken met behulp van de Firebase Console
• Instellen van je Angular CLI Project om Firebase te ondersteunen
• Interactie met Firebase Realtime Database via methoden op AngularFireList
• Gegevens toevoegen aan en lezen uit Realtime Database in Firebase
• Gegevens bijwerken en verwijderen uit de real-time database in Firebase

Live Virtual Class Curriculum

Les 01 - Eigenschappen van TypeScript

• Inleiding
• Inleiding tot TypeScript
• Inleiding tot gegevenstypen
• Let vs. Const.
• Inleiding tot functies
• Inleiding tot parameters
• Inleiding tot de klassen

Les 02 - Eigenschappen van Angular

• Geschiedenis van Angular
• Understanding Angular
• Stel Angular App in
• Angulaire bouwstenen
• Observables
• Inleiding tot reactieve vormen
• Inleiding tot servercommunicatie

Les 03 - Ngmodule

• Angulaire modules
• Routing Module
• Feature Module
• Delen Module
• Systematisch rangschikken van onderdelen van de app

Les 04 - Ng Unit Testing en Observables

• Inleiding tot geautomatiseerd testen
• Types van geautomatiseerd testen
• Inleiding tot testhulpmiddelen
• Inleiding tot Test Bed
• Handling Component Dependencies
• RxJS - Observables

Les 05 - Bootstrap

• Leerdoelen
• Verklaar Responsive Web Design (RWD)
• Ontdek het Bootstrap Rastersysteem
• Leer Bootstrap Componenten
• Quiz
• Belangrijkste opmerkingen

Les 06 - Binding en gebeurtenissen

• Leerdoelen
• Wat is Sjabloonmodel?
• Hoe Angular Binding werkt en het type Binding
• Ingebouwde richtlijnen van Angular begrijpen
• Basisprincipes van Webpack en SystemJS
• Quiz
• Belangrijkste opmerkingen

Les 07 - Dependency Injection en Service

• Leerdoelen
• Understand Dependency Injection (DI)
• Understand DI Application Programming Interface
• Een dienst uitleggen
• Beschrijf hoe je een service maakt
• Uitleg over het injecteren van een service
• Quiz
• Belangrijkste opmerkingen

Les 08 - Directives

• Leerdoelen
• Angulaire richtlijnen
• Typen Angular Directives
• Ingebouwde Angular-richtlijnen
• Werken met aangepaste richtlijnen
• Quiz
• Belangrijkste opmerkingen

Les 09 - Pipes

• Leerdoelen
• Wat is Pipe in Angular
• Ontdekken hoe ingebouwde pijpen werken in Angular
• Begrijp Angular Custom pipes
• Quiz
• Belangrijkste opmerkingen

Les 10 - Formulieren

• Leerdoelen
• Angular Form Benefits
• Template-Driven Approach
• Modelgedreven aanpak
• Angular Form Validation
• Quiz
• Belangrijkste opmerkingen

Les 11 - Routing

• Leerdoelen
• Ontdekken hoe Angular helpt SPA te bereiken met behulp van Routing
• Bepaal de voordelen van @NgModule
• Identificeer meerdere manieren om toegang te krijgen tot routes
• Ontdek het proces van de routecyclus
• Quiz
• Belangrijkste opmerkingen

Les 12 - HTTP, Promises en Observables

• Leerdoelen
• Ontdekken Werken met RxJS
• Angular-interactie met HTTP GET begrijpen
• Het proces van gegevens verzenden naar de server beschrijven
• Het verschil uitleggen tussen beloften en waarneembaarheden
• Quiz
• Key Takeaways

Eind Project

Een productlijst-webapp bouwen in Angular. Implementeer CRUD-functionaliteit in Angular en bouw een Angular-app met de volgende functies:

• Productformulier
• Productlijst
• Producten uit de lijst bekijken, verwijderen en bewerken