Grundkurs i Angular

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)