Angular Workshop

What Will I Learn?

We will review the tools every frontend developer should know, and dive into implementing a scalable Angular application.

Weather you've worked with Angular 1.x, or not, the strength of Angular 2 will amaze you.

You will experience that Angular embraces:

Lessons learned from Angular1 goodies and baddies

Better attention to state management and Ideas like Flux (with Redux)

Immutability as a friend

Super Angular

TypeScript to create codebases and development teams that scale

Reactive programing with RxJS built into the framework

Best Practices for modern frontend development

Warranty: Getting a hold of those super-powers will enable you to build outstanding frontends!

The Staff

Roni Krakover

Frontend developer, Project manager and the Marketing lead at misterBIT

Yaron Biton

Professional trainer ; misterBIT CTO ; Building the web for over 20 years ; Deep understanding of web technologies, aspects and evolvement ; Expert in building powerful, scalable and secure software ; Mamram graduate

Nadav Sinai

Fullstack Web Developer and more. with varied experience and knowledge in many programming environments, the Mobile world, Linux and other OSs,Networking, design and art.

Zohar Lederer

Rock solid experience helping individuals, teams and organization to achieve excellence

We are here to help you make the best of your coding time!

The Plan

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

This workshop will take you through power sessions and get our hands on the practical usage of those tools.

Building Modern Apps with Angular (3 Days)

Angular 2 is built in Typescript and uses RxJS reactive principals and building blocks such as Subjects and Observable, lets practice those two super powers.

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

Modules types, project structuring, debugging and testing, change detection and data flows (Redux)

Angular Workshop

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

Stream programming with RxJS

From Promises to Observables – 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.

In this session we will 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


  • 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

Basic Routing & Navigation

Single Page applications are becoming the standard for modern UX, lets unlock the power of the component's 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


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

Get the job done

We are putting a lot of effort to make this workshop the best it can be, and capture the most important ideas and coding practices in modern frontend development. We help developers use the newly-born-super-powers of web technologies to get the job done. Expect to leave this workshop with a heap of useful examples and resources.

Get Ready

We will rely on the foundations of HTML, CSS and Javascript, they will be the dance floor upon which we will play with angular and friends, if you are converting from other technologies, we suggest you (1) get excited and (2) get a hold of those technologies. If you need some help and guidance, just let us know.

Tailored training

We have trained tons of developers and helped companies build up their teams and knowledge for over twenty years. We also provide on-site tailored sessions designed to meet your special needs, please contact us for any question, or provide your details below and we will get back to you shortly.

Contact Us

and we will be with you shortly