# Angular grundkurs

Nivå: beginner | Målgrupp: Web-Apps programmerare | Förkunskaper: God erfarenhet av att programmera i JavaScript och HTML/CSS
https://www.ribomation.se/programmerings-kurser/angular/

Angular har på kort tid blivit industri-standard för att bygga moderna webbapplikationer baserade på 
principen om single-page application (SPA). Denna kurs lär dig allt du behöver veta för att snabbt 
komma igång och bygga moderna webbapplikationer med hjälp av Angular.

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ång och bygga moderna webbapplikationer med hjälp av
Angular.

- Generation of project files and artifacts using ng-cli
- Design of Angular components, with models and views
- The use of pipes to format data in HTML fragments
- The use of ng directives to manipulate DOM in an HTML snippet
- Design service classes to encapsulate business logic
- Be able to implement calls to REST-WS background services
- Building apps with many pages, using ng-router
- Generate a server-side rendered app with Angular Universal

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