Kurs i

Angular Web App Development

Angular har på kort tid blivit industri-standard för att bygga moderna webbapplikationer baserade på principen om single-page application (SPA). Detta innebär att browsern laddar en enstaka HTML fil, som i sin tur laddar JavaScript kod och CSS style-sheets. Alla logiska webbsidor byggs upp av JS funktioner, HTML template snippets och renderas med CSS stylesheets.

Denna kurs lär dig allt du behöver veta för att snabbt komma igån och bygga moderna webbapplikationer med hälp av Angular.

Denna kurs behandlar Angular version 4, som utgör den moderna versionen av Angular, baserad på TypeScript. Vi har också en kurs, sedan tidigare, som behandlar AngularJS dvs version 1.

Detta får du lära dig på kursen
  • Skapa och utöka ett Angular project med ng-cli
  • Kunna skapa och tillämpa vanliga Angular artifakter,
  • Använda Components, Pipes, Directives och Providers
  • Kunna skapa SPA webbapplikationer med flera sidor via Angular routing
  • Skapa egna services och använda dependency injection
Innehåll

Background and Overview

  • Historik
  • Why AngularJS were created
  • Why Angular 2 was redesigned from the ground-up
  • What happended to Angular version 3
  • What is a single-page application (SPA)
  • Understanding model-view-whatever
  • Angular architecure
  • Angular dependent tools
  • Angular artefacts

PART-1: Angular Quick-Tour

I kursens första del bygger vi en enkel Angular app enligt principen "Följa John", så att du får en bra utgångspunkt för resten av kursen.

Setting up a DEV Environment

  • NodeJS and NPM
  • TypeScript
  • Angular CLI (ng)
  • MS Visual Code vs. JetBrains WebStorm
  • http-server and json-server
  • curl and httpie http clients

Starting a Project

  • Understanding ng
  • Getting help from ng
  • Creating a new project
  • Generating components and other artefacts
  • Inline templates and styles
  • Suppressing unit test files
  • Creating a "Hello Angular" app

A Simple Calculator

  • Creating a new project
  • Understanding the root module and app component
  • Undestanding components
  • Creating the operands component
  • Creating the results component
  • Formatting data
  • Passing data between components
  • Creating a service for the computation work
  • Splitting the service into an abstract base-class and a concrete sub-class
  • Understanding dependency injection

Using a REST Back-End

  • Brief about REST web serviecs
  • Using an ExpressJS REST-WS server
  • Using the Angular Http service
  • Creating a service sub-class for REST-WS invocations
  • Runing the system with a live back-end

PART-2: Foundation

I kursens andra del går vi igenom de tekniker och ramverk som Angular bygger på.

TypeScript

  • What is TypeScript
  • Relation to JS, ES5, ES6
  • Understanding the type support in TS
  • Modules
  • Scalar type types
  • Composite data types
  • ES6 Lambda expressions
  • Functions
  • Function Overloading and Default/Optional/Rest parameters
  • Classes and member variables and functions
  • Visibility and accessor methods
  • Static members
  • Annotations (aka decorators)
  • Sub-classes and abstract classes and methods
  • Interfaces
  • Generic classes

JS Modules and Loaders

  • What is a JS module
  • Understanding the "iffy" concept
  • SystemJS and WebPack

RxJS

  • What is reactive programming?
  • Understanding event streams
  • The Observable pattern
  • Observables vs. Observers
  • Common stream operations such as filter, map, reduce

PART-3: Angular Explained

I denna tredje del av kursen går vi på djupet av Angular och beskriver de olika beståndsdelarna av ramverket, så att du förstår hur de passar ihop med varandra och tänkt att användas.

Bootstrapping Angular

How an Angular web application starts up
  • Configuration
  • Includes in index.html
  • Purpose of main.ts
  • Bootstrapping Angular
  • Loading the app module
  • Adding 3rd party library assets, such as JS scripts and CSS styles

Components

  • The structure of a component
  • The Component annotation
  • External vs inline template and styles
  • Model data
  • Model functions

Data Binding

One-way and two-way data binding
  • Substituting text using the mustach notation {{...}}
  • Inputing data to a directive using the box notation [...]
  • Registering an event handler using the banana notation (...)
  • Binding two-way communication using the bananan-in-the-box notation [(...)]
  • Creating and using script variables using the hash prefix #...

Handling Events

  • Typical event handlers
  • Using model functions
  • Handling DOM events

Built-In Pipes

  • What is a pipe
  • Formatting data
  • Simple text transformations
  • Numbers and currency values
  • Dates
  • Viewing JSON for debugging purposes

Built-In Directives

  • What is a directive
  • Directive syntaxes
  • Attribute directives
  • Setting the element CSS class
  • Setting the element CSS style properties
  • Updating element attributes
  • Understanding ng-template
  • Conditional element rendering using ngIf
  • Conditional element rendering using ngSwitch
  • Iterating element generation using ngFor
  • Form directives

Working with Forms

  • Template-driven forms vs. reactive forms
  • Using [(ngModule)]
  • Using ngForm
  • Understanding form state
  • Form submit with ngSubmit
  • Validation
  • FormBuilder and FormGroup

Creating Services

  • What is a service, aka provider
  • Understanding dependency injection in Angular
  • Using Injectable
  • Configuring providers
  • Using indirect providers

Routing and Navigation

  • What is routing
  • How to switch to another page
  • Configuring routes
  • Using router links
  • Route parameters
  • Routing events
  • Redirects
  • Route wildcards

Creating Pipes

  • The Pipe annotation
  • The transform function
  • What is an impure pipe

PART-4: The Books & Video Store

I denna avslutande del av kursen bygger vi en fullt fungerande online bok- och videobutik, baserat på all kunskaper förvärvade under kursen.
  • Domain Model
  • Fake Back-End
  • Store Components
  • Cart and Checkout Components
  • REST-WS Back-End Server
  • Admin Components
  • Authentication
  • Order Component
SnabbFakta
Namn
Angular Web App Development
Längd
2 dagar
Nivå
Intermediate
Målgrupp
Webb-applikations-utvecklare som snabbt vill komma igång och bygga moderna SPA webb-applikationer
Förkunskaper
God erfarenhet av att programmera i JavaScript, HTML, och CSS
Teknisk miljö
  • NodeJS, NPM
  • En editor/IDE såsom MS Visual Code eller WebStorm
  • En modern webbläsare såsom Google Chrome eller Firefox
Dela
Relaterade Kurser
KursLängdNivå
JavaScript3 dagar Beginner
TypeScript2 dagarIntermediate
NodeJS2 dagar Advanced
GulpJS for Web Apps2 dagarBeginner
AngularJS (v1) for Web Apps2 dagar Beginner
Schemalagd Kurs

Pris

15 000 kr + moms

Vi ger 20% rabatt för tillkommande deltagare från samma företag vid samma kurstillfälle. Läs mer om vår samma-företags-rabatt.

Aktuella KursDatum
StartdatumPlats
2017-09-28 Stockholm City
2017-10-12Stockholm City
2017-10-26Stockholm City
2017-11-20Stockholm City
2017-12-11Stockholm City
Företagsintern Kurs

Om du beställer en företagsintern kurs kommer vi till er och håller kursen i era lokaler. Priset bestäms av vår prismodell och baseras på antalet kursdagar, antalet deltagare, samt i förekommande fall resa och logi.

Prisexempel för NN deltagare

PPP + moms

Antal
Område

Läs mer om vår prismodell och beställningsvillkor.