Angular Workshop

The Plan

Javascript is everywhere now-days and writing large scale applications with it has been through much progress.

This workshop is designed to deliver the knowledge A-Z and to allow you to put those tools into an effective practice.

Building Modern Apps with Angular

Angular is built with Typescript and uses Signals as it's reactive primitive, it also includes RxJS reactive building blocks such as Subjects and Observable

Lets get a deep look into Components, Pipes, Services, Forms, Routing, Http, Dependency Injection, Component lifecycle, Content projections and other communications.

Lets understand modules types, project structuring, debugging and testing, change detection and data flows (Redux, NGRX)

Modern Frontend development and Angular

Review the current state of frontend development and single page web applications, task runners, module loaders, ES6, Modular CSS & SASS, and setup our initial project

Module 1
Kicking Off

Practical Typescript

TypeScript is a typed superset of JavaScript that compiles to plain JavaScript.

It's a productivity booster, a code-quality enabler and the most elegant way to get dependency injection in Angular

TypeScript Language Features
The Type System
Interfaces, Classes and Generics
Running TypeScript in a Browser
Exceptions, Memory, and Performance
Building Declaration files

Module 1
Setting the ground

Programming with Signals & RxJS

In a model-driven web application, one of the main jobs of the framework is synchronizing changes to the application's data model and the UI.

We refer to this mechanism as reactivity, and every modern web framework has its own reactivity system.

In modern Angular every piece of important data is wrapped and used as signals

So, signals become immediately the most basic and important feature in Angular

Rx.js is the Reactive Extensions for JavaScript, an API for asynchronous programming, built-in the Angular framework's APIs: Form controls, route params and server communications all work with Observable streams.

Let's examine the most important operators you should know about and unleash the force of functional reactive programming.

Module 1
Setting the ground

Directives & Components

Introducing the component as the core primitive building block of the application

SPA and MVC in Angular
The Module system
Directives & Components
Template Syntax

Module 2
Understanding Components

Binding, events, forms, pipes

Understand the nitty-gritty of the most important concepts of the framework

Templates

Expressions & Statements
One way binding and Two-way data binding
Event listeners
Components styling encapsulation
Templates variables
Built-in directives

Components & Directives

Attribute Directives, Structural Directives & Components
Using components Input & Output
Component life cycle hooks
Host and Views

Using and Building Pipes

Built in pipes
Chaining and parameterizing
Custom pipes
Stateful (un-pure) pipes
Asynchronous pipes
Built-in directives

Module 2
Hooking it up

Dependency Injection

The DI system that comes with Angular is one of the most beautiful pieces of codes we've seen, let's get excited.

Deep look into the DI system
Working with the injector
Factories and Injectables
Mocking Injections for Unit Testing
Overriding behaviors with Child Injectors
Advanced use cases

Module 3
Injecting stuff

Component's Communication

It’s sometimes desired to interact with other components such as the host, the children or projected content. Let's review some useful ways to achieve that.

Module 3
Components Relationships

Life cycle hooks

The inversion of control design pattern in at the roots of Angular, so knowing which hooks are available for us to tap into key moments is important.

Module 3
Hanging on hooks

Server Communication

Awake our frontend by communicating with servers using XHR, JSONP, we will use Observables and also look into Building real time apps using web sockets.

Module 4
Talking to servers

Routing & Navigation

Single Page applications have become the standard for modern UX, lets unlock the power of the router

Navigation overview
Using Router-Outlets and Router links
Using the Router and Location

Module 4
Route to other dimensions

Simplified Forms

Building forms, and using Controls
Validations and Messages
Tracking and communicating changes

Module 4
Basic Forms

Project Best Practices

Component types, module types, structuring your bits right

Module 5
Structure Matters

Testing

Debugging & testing tools for Angular

Module 5
Testing is Caring

Into the Change Detection

Tracking changes over time and reflecting them efficiently is the key for having a rich, flowing, real time application.

Module 5
Detecting Changes

Data Flow

In the past it was not uncommon to have bits and pieces of state strewn across our application tucked inside of controllers, services, routes, directives, and templates. When the application grows, this approach is hard to scale.

In this session we will dive into state management and one way data flows, immutability, stores and Redux.

Module 5
All about your state

A brave look at the future

The frontend scene is changing, as HTML, CSS and Javascript are used to build web apps, server side, mobile, desktop, robots and what not.

In this session we will look at different standards, libraries and tools, and how Angular will play part in the future of frontend.

Module 6
Gazing at the future

Angular Workshop