K9140 Angular TypeScript Kursus – SPA udvikling

Lær at lave apps med Angular m/TypeScript. Angular er en platform for udvikling af webløsninger baseret på komponenter. Løsninger lavet i Angular er skalérbare, fleksible og nemme at udvikle. Kurset kan køres på flere niveauer efter aftale med instruktøren…

ZoomTek afholder et grundlæggende og et udvidet kursus i Angular. Angular er en fuldstændig omskrivning i forhold til AngularJS 1.x. Arkitekturen er ændret fuldstændigt.

Angular tilbyder bedre performance og skalérbarhed samt hurtigere udvikling. Angular bygger på TypeScript og NodeJS.

Med mindre andet aftales, afholdes kursus i nyeste Angular version. Kontakt evt. instruktøren, hvis du har særlige ønsker.

Fold ud

Google står bag Angular

Angular er udviklet af Google. Angular har udviklet sig løbende siden sin fødsel i 2014. Flere features og muligheder er lagt ind og performance er løbet forbedret markant.

Angular benyttes til Single Page Applications (SPA). Normale hjemmesider (som ZoomTek.dk) loader en ny side, hver gang man skal have nyt indhold. Med Angular arbejder man med én webside (en url), hvor indholdet dynamisk opdateres med indhold fra webserveren.

SPA sider giver en bedre brugeroplevelse, og gør det nemmere for brugere at navigere.

De fleste søgemaskiner inden for rejsebranchen er SPA-sider. Vælges f.eks. Paris og fly, kan man søge videre efter hotel, biludlejning og forsikring uden at forlade Paris-siden – og uden at skulle vælge Paris igen. Vinduer og sideindhold opdateres løbende og automatisk.

Målgruppe

Kurset i Angular henvender sig til udviklere og it-professionelle, som står over for at udvikle projekter baseret på Angular.

Forudsætninger for Angular kurset

Kurset forudsætter grundlæggende viden om HTML, CSS, JavaScript og webudvikling generelt. Har du stiftet bekendtskab med første version af Angular (AngularJS) er det fint, men da Angular m/TypeScript er fuldstændig anderledes, er det ok, hvis du f.eks. blot er JavaScript-udvikler.

Kursusafholdelse fuld af Hands-on øvelser

Kurset kan med fordel afholdes som firmakursus. Kurset tilbydes også som 1-mandskursus/Online-kursus. Kurset er fuld af øvelser, hello world og a-ha oplevelser. Du får den nødvendige teori, men du får også koden til at virke på skærmen.

Kurser i København, Århus, Odense og Aalborg.

ZoomTek giver rabat på hotel.
Kurset kan køres på jeres adresse. Nemt og praktisk...

I skal blot have et mødelokale og wifi.
Kolleger kan deltage remote via video. Så kan alle deltage, selv om I har afdelinger i hele landet eller udlandet. Kurser kan afholdes på engelsk.

Indhold af Angular m/TypeScript kurset

Kursuspensum kan variere afhængig af deltagernes niveau, behov og forudsætninger. Men grundstammen vil oftest være som vist her:

1 | Introduktion til Angular m/TypeScript

  • Forskelle på AngularJS og Angular m/TypeScript
  • Buzzwords og Fokusområder
  • Fordele ved Angular
  • NodeJS contra Visual Studio
  • Editorer -> Visual Studio Code, Sublime, Notepad++
  • Grundlæggende arkitektur i Angular inkl. TypeScript
  • Hvorfor NodeJS ? -> herunder kompilering
  • Up and Running med NodeJS
  • Installation af NodeJS/npm
  • npm-kommandoer
  • Hentning af ressourcer på Github
  • Hello World – det første Component
  • Opsætning af Skabelon-bibliotek

2 | CLI opsætning og brug

  • Installation af CLI
  • Brug af CLI – mest brugte ng kommandoer
  • Oprettelse af projekt med CLI
  • Oprettelse af komponent, directive m.m. med CLI

3 | TypeScript og Angular

  • Intro til TypeScript. Hvorfor – Hvordan?
  • TypeScript muliggør brug af klasser, interfaces, members, objekter og constructors, som det kendes fra f.eks. Java og C#.net – det kan udnyttes i Angular
  • Kompilering af TypeScript
  • Hvad er TypeScript ikke?
  • Alternativer til TypeScript
  • TypeScript Tutorial

4 | Angular Arkitektur

  • Komponenter (Components) og begreber
  • Angular er kompenentopbygget. Hvad betyder det i praksis?
  • Det første Component. Hello World. Up-and-running.
  • Nødvendige begreber: Decorator Function, Component Artifact, Meta Objects, Fields, Selectors, templates
  • Intro til Providers og Directives
  • Sådan opbygges et Projekt
  • Gennemgang af Projekt-filer – herunder: cli-config, index.html, tsconfig.json, systemjs.config.js, package.json, typings.json samt main.ts i app-folderen
  • Rodkomponent (root component) contra subkomponent (sub component)
  • Import/eksport af components
  • Databinding 1way
  • Databinding 2way (mangler i Angular – og så alligevel ikke)

5 | Providers, Services og Dependency Injection

  • Hvad er en Provider?
  • Findes der indbyggede Providers i Anguar?
  • Hvad er en Service?
  • Hvordan laves en Service implementering?
  • Hvad er Dependency Injection (DI)?
  • Hvorfor er Dependency Injection smart?
  • Hvordan laves Dependency Injection i praksis?

6 | Routing og HTTP

  • Hvad er Routing?
  • Konfigurering af Routing
  • Nested Routing
  • Routing Parameters – parsing af url-data til child-komponent ved Routing
  • Import af nødvendige Providers

7 | Løsninger med mange komponenter

  • Property Binding
  • Event Binding
  • @Input, @Output, Eventemitter
  • @ViewChild

8 | Directives

  • Brug af indbyggede directives som *ngIf, *ngIf-else, *For
  • Udvikling af egne directives: Hvorfor? Hvordan?
  • Components
  • Structural Directives. Hvad er det? og hvordan laves det?
  • Attribute Directives. Hvad er det? og hvordan laves det?
  • @Hostlistener
  • @Hostbinding

9 | Template Syntaks

  • Events – herunder brug af $event
  • Hosts
  • Interpolation
  • ngpå 3 måder

10 | Angular Universal

  • Introduktion til Angular Universal

11 | Animation

  • Introduktion til Angular Animation. Omfattende mulighed for at lave grafiske effekter i Angular

12 | Formularer

  • Template-driven forms med FormsModule
  • Validering af felter – valid, dirty, touched
  • Validering pr. felt
  • Formatering af felter ud fra validering
  • Template Model Binding
  • Model-driven forms (Reactive forms)
  • FormGroup, FormControl
  • Brug af FieldSet
  • FormBuilder
  • Validering af Controls
  • Observables på felter

13 | Unit Testing, LifeCycle

  • Unit Testing
  • Mocking
  • Simpelt Hello World eksempel
  • Fejlfinding i kode
  • Læse Debug filer
  • Best practice: hvilken browser giver mest hjælp m.m.
  • Et kig i Angular API vedrørende Unit Testing

14 | Observables og Promises

  • Hvad er Observables?
  • Subscribe i detaljer
  • Observables og fejlhåndtering
  • Unsubcribe()
  • Call Stacks og Event Tables
  • Design Pattern
  • Alternativer til Event Loop
  • RxJS – struktur og overblik
  • Forskelle på Observables og Promises

15 | Projekter i Angular

  • Oprettelse af egne moduler til genbrug af bl.a. komponenter på tværs af projekter
  • Publisering af moduler – med npm
  • Import af moduler – med npm
  • Overførsel af udviklingsprojekt til produktionsmiljø

16 | Angular API

  • Overblik – sådan finder du flere info

17 | Opsamling – ekstraemner

  • Style Guide
  • LifeCycle Hooks
  • Polifills
  • User Input
  • Pipes
  • Google Developer Tools
  • Mere API Reference
  • Opbygning – best practice
  • Ressourcer og Next Step

Praktisk Information

Hvordan bestilles et kursus?

Udfyld formularen nedenfor eller til højre. Alternativt kan du blot skrive en mail på info@zoomtek.dk eller ringe 4250 5040.

Hvordan finder jeg prisen på kurset?

Forespørg på kurset ved at kontakte ZoomTek. Så finder vi det bedste kursus til dig. Du betaler ikke for formidlingen.

Hvornår afholdes kurset?

ZoomTek kan oftest skaffe et kursus inden for 30 dage. Enten vil vi finde et åbent kursus til dig. Alternativt får du et lukket firmakursus, hvor du og dine kolleger aftaler datoen direkte med kursusinstruktøren.

Få et skræddersyet kursus uden merpris

Kursusbeskrivelserne på ZoomTek.dk er vejledende. For et lukket firmakursus vil kurser altid blive skræddersyet gennem dialog med instruktøren. For åbne kurser har du mulighed for at tale med instruktøren før kurset.

Angular, Git, Google, Notepad++, Visual Studio, Visual Studio Code (and others) are either registered trademarks or trademarks of Google, Microsoft or others in the United States and/or other countries. On this page you may find other trademarks and/or registered trademarks that belong to third parties and are the property of their respective owners. Read more about the use of trademarks on ZoomTek.dk.