Angular 2 / Angular 4

Bemærk: Dette kursus kan køres både til Angular 2 og Angular 4

ZoomTek afholder 2 kurser i Angular 2 / Angular 4. Et grundlæggende og et udvidet. Angular 2 er ikke blot en fortsættelse af Angular 1.3 og 1.6, men en fuldstændig omskrivning. Kodningen og arkitekturen er ændret fuldstændigt.

Angular 2 / Angular 4 tilbyder bedre performance, højere skalérbarhed og hurtigere udvikling. Angular 2 bygger på TypeScript og laves oftest på en motor af NodeJS/npm eller Visual Studio.


Bemærk: Kurset er sat til 3 dage. Er deltagerne helt nye med Angular anbefales 4 dage. Udvikler deltagerne allerede i Angular fast anbefales 2-3 dage.

Du får altid:

Afholdelsesgaranti inden 30 dage checkmark       Gratis Hotline efter kursus checkmark     Afholdes i hele Danmark checkmark
(pga travlhed gælder afholdelsesgarantien ekstraordinært ikke før 15. november)

Forudsætninger for Angular 2 / Angular 4 kurset

Kurset forudsætter grundlæggende viden om html, css, javascript og webudvikling generelt. Har du stiftet bekendskab med første version af Angular er det fint, men da Angular 2 er fuldstængig 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 uden ekstrapris. 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.

Kursusindhold

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

 

Modul 1: Introduktion til Angular

  • Forskelle på AngularJS 1.3/1.6 og Angular 2/Angular 4
  • Buzzwords og Fokusområder
  • Fordele/Promises ved Angular
  • NodeJS contra Visual Studio
  • Editorer -> Visual Studio Code, Sublime
  • 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

 Modul 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

Modul 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 2
  • Kompilering af TypeScript
  • Ikke browser-kompatibel
  • Hvad er TypeScript ikke?
  • Alternativer til TypeScript
  • TypeScript Tutorial

 

Modul 4: Angular Arkitektur, Komponenter (Components) og Begreber

  • Angular 2 er Component-opbygget. 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 Angular2 - og så alligevel ikke)

 

Modul 5: Providers, Services og Dependency Injection

  • Hvad er en Provider?
  • Findes der indbyggede Providers i Anguar 2 (oh yes, you bet...)
  • 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?

 

Modul 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
  • En lille advarsel. Måden at kode Routing på er forskellig i alfa, beta og gold release af Angular 2. Desværre er meget support på nettet skrevet til alfa og beta-versioner
  • HTTP i relation til Angular 2

Modul 7: Løsninger med mange komponenter

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

 

Modul 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

Modul 9: Template Syntaks

  • Events - herunder brug af $event
  • Hosts
  • Interpolation
  • ngModul på 3 måder

Modul 10: Angular Universal

Introduktion til Angular Universal. Ny feaure i Angular 4

Modul 11: Animation

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

Modul 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 

Modul 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

Modul 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

Modul 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ø

Modul 16: Angular API

  • Overblik - sådan finder du flere info

 

Modul 17: Opsamling - ekstraemner

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

Del denne artikel på

Mest læste sider

test1.png