Angular Workshop

Are you struggling with the web application complexity? Thinking about using Angular for your next big project? Keen to learn how to create modern, single-page web applications using Angular? Or how to migrate your existing Flex/Silverlight/WPF application to HTML5?

Join us for this Angular course and learn how to super-charge your development with modern tools. In three super-intensive and highly practical days, you learn how to write elegant, testable and maintainable single-page web applications with Angular.

We will cover how to think about the state of your application and how to teach DOM new tricks by using components and directives. You will also learn how to make your application talk to the server whilst taming the complexity of asynchronous code.

Upon completion of this Angular course, you will have gained a solid understanding of the Angular framework, including best practices and anti-practices, and will have gained the skills you need to use Angular in production.

Learn now to

  • write modern single-page web applications with Angular
  • boost your productivity with ES6/TypeScript
  • write elegant, testable and maintainable code
  • teach DOM new tricks by using components/directives (both custom and built-in)
  • think about the state of your application
  • make your application talk to the server and tame the complexity of asynchronous code using promises and RxJS
  • use modern tools to super-charge your development

Programme

Getting started

  • initial setup (NodeJS, angular-cli)
  • application structure
  • modules and components
  • basic data-binding and templating
  • unit-test your components using jasmine

Components

  • templating & data binding
  • declarative UIs using built-in directives (NgIf, NgClass, NgStyle, NgFor)
  • pass the data in and out of your components using @Input and @Output
  • tap into key moments of component lifecycle using hooks (OnInit, OnDestroy, …)
  • working with forms

Services

  • isolating your application logic and state using services
  • dependency injection and injector scope
  • @Injectable decorator
  • using Observables to model state changes

TypeScript

  • faster development and safer refactoring with types
  • classes & interfaces
  • use modules for better encapsulation
  • arrow functions
  • destructuring objects and arrays
  • use decorators to encapsulate cross-cutting concerns

Routing

  • HTML5 routing overview
  • make your components navigable using Angular router
  • router-outlet and routerLink
  • parameterized routes and extracting route parameters

Server interaction

  • using HttpClient to communicate with remote HTTP endpoints
  • manage subscriptions declaratively using async pipe
  • modeling data streams using Observables
  • transforming and combining Observables using common operators
  • state management

Advanced state management with NgRx

  • use @ngrx/store to manage state
  • initiate state changes with actions
  • describe state “mutations” with reducers
  • consume your state within a component using select
  • add side-effects to your actions using @ngrx/effects

Best practices and pitfalls

  • Angular best practices
  • common mistakes and anti-patterns
  • release build and deployment

Audience

You should come if you wish to:

  • learn how to build modern single-page web applications
  • migrate your existing Flex/Silverlight/WPF application to HTML5
  • gain a better understanding of Angular framework, its best practices and anti-practices

Prerequisites

Hands-on experience with HTML/CSS/JavaScript. Experience with JavaScript libraries like jQuery is beneficial but not necessary. Node.js and surrounding ecosystem would be used throughout the workshop, but prior Node.js experience is not necessary.

Labs & Exercises

This workshop is a combination of lectures, discussions and practical exercises.

Installation Guide

  • Workstations with internet access
  • Git client
  • NodeJS 14
  • Google Chrome (or any other modern browser)
  • Visual Studio Code (or any other text-editor/IDE)

This is a BYOD (bring your own device) workshop.