AngularJS kursus for begyndere

AngularJS - AJS

AngularJS er et JavaScript framework, der introducerer MVC for Single Page Applications (SPA). En SPA er en client-site web-application. En flad hjemmeside lavet i Notepad vil man kalde en web page. I den anden grøft findes en server-baseret webapplication, som f.eks. SharePoint.

Midt imellem findes AngularJS. En lokal side, der fungerer som en Application - hvor data kan hentes dynamisk ind til validering, authentikering m.m.

AngularJS benytter Modul/View/Controller tilgangen til udvikling. Man adskiller data, logik og visninger fra hinanden, hvilket gør programmering nemmere og mere skalérbart i større projekter (separation of concerns). 


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)

AngularJS laves ved hjælp af såkaldte directives. Har du ikke arbejdet med AngularJS før, så betyder det, at AngularJS laves som almindelig HTML tilføjet specielle attributter, som kaldes directives. Data gemmes i en Application Model og vises med Views og Expressions.

Konklusionen er, at du adskiller skærmbilleder fra data. Du slipper for at bekymre dig om, hvorvidt data bliver opdateret og vist rigtigt på skærmen - det sker automatisk i AngularJS. AngularJS har indbygget jQLite (JQuery Light).

Forudsætninger for AngularJS Kursus

Du må gerne være helt nybegynder i AngularJS. Til gengæld bør du have rimelig JavaScript erfaring. Visse passager i kurset er ret kodetunge, og da AngularJS primært - men ikke alene - danser sammen med JavaScript er kendskab hertil en forudsætning.

Endvidere skal HTML5 (kun markup - ikke hele HTML5 API) være din hjemmebane. Du kender naturligvis også CSS. Der vises endvidere eksempler på JQuery, som i jQLite ligger indbygget i AngularJS.

Afholdelse af kursus

Kurserne afholdes enten som firmakurser eller fjernundervisning. AngularJS kan benyttes til alle løsninger, der ender ud i en browser. På et lukket firmakursus kan vi tage udgangspunkt i Jeres systemer. Vi kan også tilbyde at kombinere AngularJS med f.eks. JQuery eller integration med SharePoint, Drupal eller lignende. Kontakt os på tlf 4250 5040 eller This email address is being protected from spambots. You need JavaScript enabled to view it. for yderligere info. 

Er du allerede fortrolig med nedenstående termer anbefaler vi kurset K9130 AngularJS - AJS Udvidet. Ønsker du at læse mere om MVC udvikling og AngularJS så klik her. Vi har også kursus i Angular 2.0, som er væsentlig anderledes end Angular 1.3.

Kursusindhold

Modul 1 - introduktion til AngularJS

Det første modul er en generel introduktion. Inden 10 minutter er har deltagerne lavet det første eksempel, som viser AngularJS i en simpel udgave.

  • Generel introduktion til AngularJS
  • HelloWorld - det første eksempel
  • Hvad er AngularJS og hvad er AngularJS ikke
  • Hvad er MVW, MVVM, MVC?
  • Single Page Application (SPA) - hvordan defineres en sådan
  • Udfordringen ved SPA'er 
  • AngularJS.org - ressourcer og dokumentation 
  • Link til AngularJS-bibliotek

 Modul 2 - De vigtigste begreber og koncepter

Modulet gennemgår de helt bærende begreber i AngularJS krystaliseret ud på simple eksempler og hands-on øvelser

  • Directives, Models, Scope, Expressions og View
  • ngRepeat Dokumentation
  • Brug af Filtre (minder lidt om PowerShell i syntaks)
  • Brug af Filter Demo
  • Views, Controllers og Scope .
  • Globale Namespaces
  • Oprettelse af etView og en Controller 
  • Moduler, Routes og Factories 

Modul 3 - Data Binding

  • Data binding mellem View og Data Model
  • Loope med ng-repeat Directive .
  • ng-Repeat eksempel 
  • API Reference til Directives 
  • ng-show, ng-hide og andre 'lavthængende frugter'

Modul 4 - Controllers

  • Hvad er en Controller?
  • Hvorfor er en Controller en central brik i al AngularJS-kode?
  • En Controller er en constructor-funktion, der bl.a. styrer $scope-objektet - hvorfor, hvordan?
  • En Controller er bindeled mellem Application Model og View
  • Konkret Hello World kode

Modul 5 - Services, Factoring og Dependency Injection

  • Hvad er en service?
  • Brug af indbyggede services i AngularJS herunder $http
  • Forskel på services og factoring
  • Indsættelse af flere services i samme controller

Modul 6 - Scopes

 Scopes er et objekt, der refererer til Application Model. Scopes styrer Expressions og håndterer Events. Scopes binder Application Controller sammen med View.

  • Overblik over Scopes. Helt nede på jorden: Hello World med Scopes
  • Brug af Scopes i en Controller
  • Brug af $watch, $digest og $apply. Forståelse for hvornår disse skal benyttes, og hvornår AngularJS håndterer disse internt
  • Brug af indlejrede scopes (nested scopes). Sondring mellem Child Scopes og Isolated Scopes.

Modul 7 - Expressions og Filters

Med Expressions og Filters kan man vise data i HTML (View). Du kan således både vise data, lave simple beregninger, vise indhold fra et array og properties fra et objekt i Expression. Filters og Filter Chaining muliggør formatering af data.

Modul 8 - Indbyggede objekter

  • De mest almindelige indbyggede objekter
  • Fuld liste over objekter
  • Hello World opgaver

Modul 9 - Forms, Validations

 Forms kendes fra almindelig html-kode. Det er en række kontrolelementer omsluttet af et form-element. Med AngularJS kan vi lave manipulation med forms.

  • Styring af status på felt. Spørge på eller ændre status på om et felt er valid, ikke-valid, om feltet er ændret, ikke er ændret etc.
  • Sammenbinding af form og kontrolelementer
  • Update triggers (normalt opdaterer AngularJS alt på skærmen med det samme, men det kan selvfølgelig styres)
  • Validering - styring af indbygget validering i html5
  • Validering - tilpasset validering - f.eks. med Regular Expressions

Modul 10 - Directives

  • Flere indbyggede directives i AngularJS
  • Oprettelse af egne Directives - en hjørnesten i AngularJS

Modul 11 - Opbygning af moduler

  • Repetition: hvad er et modul? 
  • Hello World kode for opbygning af simpelt modul
  • Dependencies - altså hvilke afhængigheder bygger modulet på

Modul 12 - Unit Testing med Jasmine

  • Hvorfor MVC strukturen i AngularJS gør Unit Testing om ikke nem, så i hvert fald nemmere
  • Eksempler på forskellige værktøjer - primært 'Jasmine'
  • Brug af Angular-mocks
  • Test af Controllers 

Modul 13 - Opsætning af NodeJS

AngularJS kan godt køre uden NodeJS. NodeJS er en simpel server, som man kan interagere med i AngularJS til mere avancerede tests. NodeJS skal downloades og ved hjælp af npm (Node Package Manager) kommandoer kan serveren opsættes. Herefter kan man køre en række AngularJS kørsler op mod denne server.

Afhængig af kursusdeltagere kan dette emne variaere fra omtale til faktisk opsæt af NodeJS.

  • Hvad er NodeJS?
  • Hvor downloades den?
  • Hvordan installeres den?
  • Hvordan får man bugt på npm-init fejlen, som ofte opstår ved opsæt
  • Hvor findes ekstra packages til udvidelse af serveren (små programmer, der downloades og kan opsættes med 1 kommando fra en kommando-prompt)
  • Tutorials med NodeJS og AngularJS - best practice

Del denne artikel på

Mest læste sider

test5.png