K9128 AngularJS Grundkursus

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

Om AngularJS

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. Kurset køres i nyeste version af AngularJS med mindre andet aftales.

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, 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 med TypeScript, som er væsentlig anderledes end AngularJS.

Indhold af AngularJS Grund kurset

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

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

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’

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

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 Application Model. Scopes styrer Expressions og håndterer Events. Scopes binder Application Controller sammen med View.

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

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 valid, ikke-valid, 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 NodeJS

AngularJS kan godt køre uden NodeJS. NodeJS er en server, som man kan interagere med 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.

• 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

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

Adskillelse af data, logik og visning

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

Angular (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.