Kurs om
Angular grundkurs

Background and Overview

• Why Angular.js were created
• Misko Hevery
• Why Angular 2 was redesigned from the ground-up
• What happened to Angular version 3
• Angular version 6 and forward

Preparation

In this section we are laying the ground and establishing a baseline for the remaining of the course.

What is an SPA?

• Classic web MPA architecture
• Browser DOM model
• What is AJAX?
• XMLHttpRequest vs. Fetch
• Hybrid web MPA architecture
• SPA architecture
• SPA components
• Deployment architecture for SPA

Using Node.js, NPM & NPX

• Installation of Node.js
• What is NPM?
• Installing a local package using NPM
• Installing a remote package using NPM
• Application vs. development dependencies
• Global NPM modules
• Command-line Node.js apps
• Understanding the merits of NPX
• Beware of the storage size of node_modules/
• Alternatives to NPM, pnpm and yarn
• What is a transpiler?
• What is pre-processing?
• What is post-processing?
• What is bundling?
• Typical operations of a bundler

Modern ES & TypeScript

• What is TypeScript
• Anders Hejlsberg
• Relation to JS, ES5, ES6
• Understanding the type support in TS
• Installation of TypeScript
• Modules
• Scalar type types
• Composite data types
• ES6 Lambda expressions
• Functions
• Classes and member variables and functions
• Visibility and accessor methods
• Static members
• Interfaces
• Generic classes

Kick-Start

In this section are we creating a complete Angular app step-by-step, which will serve as a base for understanding for the remaining of the course

Using the ng CLI

• Understanding the ng client
• Installing the Angular (ng) CLI
• Command syntax
• Command overview
• Showing help
• Documentation at angular.io/cli
• Creating a new project
• Project directory structure
• Bootstrap files
• Generating components and other artefacts

Your 1st ng App

• Overall instructions
• Generate a new project, using NPX
• Edit the scripts section of package.json
• Interface Product
• Product service
• Edit app.component.*
• Generate pages, using NPX
• Edit welcome.page.*
• Creating a navbar widget
• Shopping basket service and common state
• Edit product.page.*
• Creating a shopping basket widget
• Edit shopping-basket.page.*

Angular Basics

Discussion of the most essential parts of Angular.

Modules

• TypeScript modules vs Angular modules
• The root module and its purpose
• ngModule annotation attributes
• Module dependencies
• Entry components and what they are used for
• Bootstrap components

Template Syntax

• HTML attributes vs DOM properties
• Understanding the DOM
• Interpolation with handlebar expressions
• Using the null-catch operator
• Template reference variables

Pipes

• What is an Angular pipe
• Use the json pipe for debugging
• Various text transformation
• Formatting numbers
• Formatting dates
• User-defined pipes
• Implementing the train-case pipe

Directives

• What is an Angular directive
• Understanding the ng attribute syntax
• Setting CSS classing with [ngClass]
• Setting CSS styles with [ngStyle]
• Usage of <ng-container>
• Usage of <ng-template>
• Parameterized <ng-template>
• Conditional inclusion with *ngIf
• Using template-snippets with *ngIf
• Conditional inclusion with [ngSwitch]
• Repeating elements with *ngFor
• Support variables to *ngFor
• What do the ‘*’ prefix mean
• User-defined directives

Services

• What is a service?
• Understanding dependency injection in Angular
• Service definition
• Generating a service
• Service usage, aka injection
• What is a provider
• Swapping service implementations
• Using constant value services
• Using a service factory
• Injecting a constant value service

Component I/O

• DOM property input [prop]="..."
• Defining inputs in a widget
• DOM event output (event)="..."
• Definng output emitters in a widget
• How to create two-way binding [(xyz)]
• Binding syntax summary

Components

• Usage of components
• Component categories
• Why you should differentiate based on categories
• Setting the category type, when generating a ng component
• Component architecture and data-flow
• Component attributes
• Life-cycle call-backs
• Member variable annotations
• Implementing nested components
• Generating lazy-loaded page modules

Angular Intermediate

Discussion of slightly more complex parts of Angular

RxJS

• What is RxJS?
• Installation of RxJS
• The anatomy of a rx stream
• Filtering and transformation
• Creating an event source
• Temporal events
• Rx feed creator functions
• Rx filters
• Rx transformers
• Rx subject
• Using rx as a message bus
• Converting a Rx stream into a promise
• How to wait for two or more rx streams
• Replacing errors
• Subscription in Angular
• The ng async pipe

HttpClient

• Overview of the HttpClient service
• HTTP operations
• Single value rx observables
• Response handling
• Request headers
• Request query parameters
• Data interface
• Dealing with errors

Basic Routing

• What is routing?
• Mapping route path to component
• Injecting a routed page component into a template
• Navigation in template
• Programmatic navigation
• Redirection
• Default route
• Handling undefined routes
• Using a CSS class to indicate the current route
• Updating the page title
• Updating HTML meta data
• Static route data
• Router events

Parameterized Routes

• Defining route parameters
• How to respond to a chosen route parameter value
• Navigating to a stand-alone page, using a route parameter
• Dealing with query parameters

Child Routes

• What is a child route ?
• Route definitions
• Embedded page components
• Navigating to an embedded page components

Route Guards

• What is a route guards?
• Guard result variations
• Guard forms
• Generating a guard service
• Route configuration

Forms

In this section we discuss HTML form fields and what support Angular provides for dealing with validation.

Form Fields

• Overview of HTML form fields
• Usage of [(ngModel)]
• Various types for <input>
• Toggle buttons
• Multi-line text
• Item selection
• Numeric values
• Handling date fields in Angular
• Handling radio buttons

Angular Forms Support

• Different ways of defining forms in Angular
• Form modules
• Form related classes to know about
• Overview of class FormControl
• Overview of class FormGroup
• Angular form validation support
• Validation classes

Template-Oriented Forms

• Structure of a template-oriented form
• Definition of a form field
• Definition of a form element
• Setting validators
• Handling validation errors

Component-Oriented Forms

• Structure of a component-oriented form
• Definition of a form field
• Definition of a form element
• Nested form elements
• The form builder service
• Setting validators
• Handling validation errors

Interactive Form Fields

• What is an interactive field?
• Setting up the subscription logic
• Sample code snippets

User-Defined Validation

• What is user-defined validation?
• Sample validator
• Difference of applying a validation between component vs. template oriented forms
• Defining a multi-field validator

Brief about Authentication

• What is authentication?
• How authentication differs between SPA vs. MPA apps
• What is JWT?
• Registering claims
• Typical auth operations
• Installing njwt
• Usage of njwt on a node.js server

Development

In this section we discuss various topics when developing Angular apps.

Development Advice

• Using the Angular Dev Tools
• Use a CSS pre-processor
• Use of the ng update tool
• Consider using pnpm

Configuration

• Workspace configuration files and folders
• Angular configuration
• Structure of angular.json
• Build configurations
• Environments
• Server redirection
• Brief about CORS

Using 3rd Party Libraries

• Incorporating JS only libraries
• Incorporating CSS/JS libraries
• Asset files
• Angular plugins

Build

• Building an app
• Configurations
• Preparing for routing
• How to run a production build

Angular Universal

• SPA boot time
• Understanding T2FMP
• Lazy loading pages
• Server-side rendering
• Reasons for SSR
• Different ways of provide SSR
• What is PWA?
• Overview of Angular Universal
• Installation of ng-universal
• Build for dynamic SSR
• Build for static SSR (pre-rendering)

Här ser du vilka kursdatum som är tillgängliga. Klicka på en av datumknapparna för att anmäla dig till ett kurstillfälle. På kursen pratar läraren svenska, medan vårt kursmaterial alltid är författat på engelska.

Missa inte vår samfaktureringsrabatt! Är ni fler personer från samma företag/organisation som går på samma kurs, rabatteras tillkommande personer med 25%. Ni anmäler er till kursen en och en, men uppger samma företag, så ordnar vi resten. Samtliga deltagare från samma företag ingår på samma faktura, den första till fullt pris och resterande till rabatterat pris.

Datum för klassrumskurser

Du sitter bekvämt i ett av våra klassrum. I priset ingår tryckt kursmaterial, samt kaffe/te med smörgås på förmiddagen och kaffe/te med bulle på eftermiddagen.

Pris: 22 000 kr + moms

Hoppsan då 😳
Just nu finns det inga datum tillgängliga. Titta förbi om några dagar eller kontakta oss och be oss lägga upp fler kursdatum.

Datum för fjärrkurser

Du sitter bekvämt framför datorn och deltar i kursen via internet. Vi använder programvaran Zoom för alla våra fjärrkurser. I priset ingår kursmaterial som PDF.

Pris: 18 000 kr + moms

5 aug. 2024 12 aug. 2024 19 aug. 2024 26 aug. 2024