K9128 AngularJS Grundlæggende Kursus

Grundkursus i AngularJS®, hvor du lærer at lave apps. AngularJS bygger på JavaScript og giver udvikleren mulighed for at frembringe Single Page Applicationss – også kaldet SPA…

| 3 dage | Afholdes i hele Danmark | Firmakursus | Online-kursus | Åbent kursus |

Om AngularJS

AngularJS er et JavaScript-framework, der introducerer MVC for Single Page Applications (SPA). En SPA er en client-site webapplication. En flad hjemmeside lavet i Notepad vil man kalde en webpage. I den anden grøft findes en server-baseret webapplication, som f.eks. SharePoint. Midt imellem findes AngularJS, der fungerer som en application, hvor data indhentes dynamisk til validering, authentikering m.m. Kurset køres i nyeste version af AngularJS med mindre andet aftales.

AngularJS og Angular m/TypeScript

Der findes 2 udgaver af Angular. AngularJS og Angular TypeScript. Dette kursus er for AngularJS. Du kan finde kursusbeskrivelse for kurset i Angular m/TypeScript her.

Kontakt ZoomTek, hvis du ønsker rådgivning om valg af kursus, eller hvis du er i tvivl om jeres benyttede version af Angular.

Efter kurset kan du

Kurset er bredt og lærer dig de grundlæggende discipliner i AngularJS udvikling. Er du allerede fortrolig med nedenstående termer, anbefales K9130 AngularJS Udvidet. ZoomTek har også kursus i Angular med TypeScript. En nyere Angular version, der er væsentligt anderledes i forhold til AngularJS.

Indhold af kurset i AngularJS Grundlæggende

1 | Introduktion til AngularJS

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

• Generel introduktion til AngularJS
• Det første eksempel som Hello World
• Hvad er AngularJS, og hvad er AngularJS ikke?
• Hvad er MVW, MVVM, MVC?
• Single Page Application (SPA) – hvordan defineres en SPA-side?
• Udfordringen ved SPA’er
• AngularJS.org – ressourcer og dokumentation
• Link til AngularJS-bibliotek

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 views
• ngRepeat dokumentation
• Brug af filtre (minder lidt om PowerShell i syntaks)
• Brug og demo af filtre
• Views, controllers og scope
• Globale namespaces
• Oprettelse af et view og en controller
• Moduler, routes og factories

3 | Data Binding

• Data binding mellem fiew og datamodel
• Loope med ng-repeat directive
• ng-Repeat-eksempel
• API Reference til directives
• ng-show, ng-hide og andre ‘lavthængende frugter’

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 applikationmodellen og views
• Konkret Hello World-kode

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

6 | Scopes

Scopes er et objekt, der refererer til applikationsmodellen (Application Model). Scopes styrer expressions og håndterer events. Scopes binder applikationskontrolleren (Application Controller) sammen med views.

• 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.

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.

• Expressions
• Filtre

8 | Indbyggede objekter

De mest almindelige indbyggede objekter

• Fuld liste over objekter.
• Hello World-opgaver

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 validt, ikke-validt, om feltet er ændret, ikke er ændret m.v.
• 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

10 | Directives

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

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å?

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

13 | Opsætning af Node.js

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

• Hvad er Node.js?
• 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 en kommando fra en kommando-prompt)?
• Tutorials med Node.js og AngularJS – best practice

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).

Angular Directives

AngularJS laves bl.a. ved hjælp af såkaldte directives. Dette betyder, 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.

Adskillelse af data, logik og visning

Konklusionen er, at du adskiller skærmbilleder fra data. Data opdateres altid korrekt og automatisk på skærmen i AngularJS. AngularJS har indbygget jQLite (JQuery Light).

Praktisk information

Angular®, Jasmine®, JavaScript®, JQuery®, Node.js®, PowerShell®, SharePoint®, TypeScript® (and others) are either registered trademarks or trademarks 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. ZoomTek does’nt have an affiliation, endorsement, sponsorship, or approval with or by any of these companies and their respective trademarks. ZoomTek has developed all courses on this website or passes the courses on to an external course provider. Read more about the use of trademarks on ZoomTek.dk