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
• What is a single-page application (SPA)
• Angular tools and sub-systems

PART-1 - QUICK TOUR

In this section, we build an app step-by-step, to give a better conceptual foundation for the remainder of the course.

Setting up the DEV Environment

• NodeJS and NPM
• TypeScript
• Angular CLI (ng)
• JetBrains WebStorm vs. MS Visual Code
• Getting help from ng-cli

Creating an Angular Project

• Understanding the ng client
• Creating a new project
• Project directory structure
• Directory changes between Angular version 5 and 6
• Bootstrap files
• Generating components and other artefacts
• Inline templates and styles
• Text formatting using pipes
• Suppressing unit test files
• Angular Console, the ng-cli GUI
• The disk size of node_modules/

TypeScript

• What is TypeScript
• 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

A Simple web shop Angular app

• Understanding the root module and app component
• Import dependent module
• Handling click events
• Iterating over collections
• Text formatting using pipes
• Two-way binding of form fields
• Component styling
• Component Interaction
• Creating a service for the computation work
• Understanding dependency injection
• Creating the operands component
• Creating the results component
• Passing data between components

PART-2 - BASICS

Discussion of the most essential parts of Angular.

Modules & Components

• 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
• Brief about component architecture
• Data flow between components

Template Syntax

• HTML attributes vs DOM properties
• Understanding the DOM
• Interpolation with handlebar expressions
• Using the null-catch operator
• Template reference variables
• Property input [prp]=expr
• Event output (ev)=expr
• Two-way binding [(var)]=expr
• Implementation of the number-stepper component

Angular Pipes

• What is an Angular pipe
• Use the json pipe for debugging
• Various text transformation
• Formatting numbers
• Formatting dates
• Sub-lists
• Subscribing to RxJS feeds using the async pipe
• User-defined pipes
• Implementing the train-case pipe

Angular Directives

• What is an Angular directive
• What do the ‘*’ prefix mean
• NG templates
• Conditional inclusion with *ngIf
• Using template-snippets with *ngIf
• Conditional inclusion with ngSwitch
• Repeating elements with *ngFor
• Support variables to *ngFor
• Setting CSS classing with ngClass
• Setting CSS styles with ngStyle
• User-defined directives

Services

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

PART-3 - INTERMEDIATE

Discussion of slightly more complex parts of Angular

Asynchronous Computation

• Execution models
• The JavaScript execution model
• JS-VM call-stack vs. call-back-queue
• Using call-backs
• Understanding the call-back boomerang effect
• Understanding promises
• Using promises
• Promise chains
• Understanding async function in modern JS
• Using async and await

RxJS

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

Routing and Navigation

• What is routing
• Preparing the app for routing
• Defining routes
• Define the routing target
• How to switch to another page
• Redirecting routes
• Routing demo
• Setting a CSS class for an active route
• Route parameters
• Associating data to a route
• Router events
• Child routes
• Route guards
• Guard actions
• Sample entry guard
• Mock authentication

Working with Forms

• Different ways of using forms in Angular
• FormControl
• Validators
• User-defined validator
• FormGroup
• Using the FormBuilder service
• Model-driven forms
• Submitting a model-driven form
• Implementing a reactive form field
• Reactive incremental search demo
• Template-driven forms
• Template-driven field mapping
• Submitting a template-driven form

Back-end Calls

• Understanding the HTTP protocol
• HTTP request operations (methods)
• HTTP response codes
• What is a web service
• What is a REST web service
• What is AJAX
• Using the XMLHttpRequest object
• Sample CRUD REST operations using XMLHttpRequest
• Using the Angular HttpClient service
• Basic operations with HttpClient
• Invoking a public REST-WS service

PART-4 - DEVELOPMENT

In this section, we discuss topics related to developing a webb-app ready to be deployed.

Unit Testing in JavaScript

• The unit testing ecosystem of JS
• Installation of Jasmine
• Jasmine tests
• Matchers
• Life-cycle functions
• Test selection
• Testing async code
• Unit Testing in Angular
• Generating tests via ng-cli
• Running tests
• Running tests within WebStorm
• Angular TestBed and how to initialize
• Bootstrapping TestBed in async mode
• How to lookup view elements
• Trigger a change detection
• Testing @Input elements
• Testing @Output elements
• Mock dependencies
• Testing async operations
• Using FakeAsync() and tick()
• Performing fake HTTP operations

Function Testing in Angular

• What is e2e testing
• Understanding Protractor
• Using page objects
• Element locators
• Trigger element events/actions

Deployment

• Overview of the ng-cli documentation
• Upgrading ng-cli
• Upgrading Angular
• Adding BASH completion
• Configuring ng-cli
• Setting defaults for artefact generation
• Using a CSS pre-processor, such as SCSS
• Building an app
• Choosing a build target
• Using different environment config files
• Building for production deployment
• Configuring 3rd party CSS/JS libraries
• Server aspects, such as redirection and CORS