O'Reilly logo
live online training icon Live Online training

Scalable Web Development with Angular

Get up to speed with latest web development techniques using the leading JavaScript framework Angular

Gion Kunz

If you are a web developer, be it rookie or seasoned, you must have heard about Angular as one of the finest platforms to build front end UIs and smarter web applications. With this curated training, you will be able to create and design dynamic and scalable client side applications using the Angular platform. In this training, you will first talk about basics of how to design and build Angular components right from the beginning, providing full coverage of the TypeScript syntax required to follow the examples included. From that point on, you will build upon our first components, interconnect them, and give shape to larger web applications. The key takeaways from here would be to ensure that you build the right kind of components for your applications and use the right approach to compose them within your application in a way that is effective and efficient.

You will then look at good and bad ways to handle your application state and explore why doing this right is crucial for scalability. You’ll also learn how to use the router of Angular to make some of your application state reflected within your browsers URL. After this, you will look into forms and user input validation.

There are finer and deeper patterns of using Angular which you will be taught after the initial introduction. Here, you will learn to transform your application architecture into a more scalable enterprise ready form. As testing is crucial for enterprise applications, you will first learn how to write meaningful tests using the Angular framework. We will also show you how to work with web services, to integrate your application with the back end efficiently. This will address some architectural concerns as well as some more sophisticated ways to leverage the power of surrounding frameworks like RxJS and ngrx.

What you'll learn-and how you can apply it

By the end of this live online course, you’ll understand:

  • Create Angular components from scratch and inter connect them efficiently
  • Make scalable enterprise ready applications with ease.
  • Learn efficient methods to connect your applications with web services.

This training course is for you because...

  • You are a JavaScript developer who want to start developing scalable, enterprise grade applications with Angular

Prerequisites

  • Knowledge of JavaScript programming techniques is essential to make the most out of this training

Recommended preparation:

Chapters 1 - 10 of Web Developer’s Reference Guide (book)

Mastering Angular Components (book)

Angular 2 Cookbook (book)

Learning Angular 2 (book)

Materials, downloads, or Supplemental Content needed in advance:

Resources: Mastering Reactive JavaScript (book)

About your instructor

  • Gion Kunz has years of experience with web technologies and is totally in love with web standards. With over 10 years of experience of writing interactive user interfaces using JavaScript, he constantly evaluates new approaches and frameworks. He's worked with AngularJS for over 3 years now and is one of the earliest adopters of Angular 2. Gion speaks about Angular 2 at conferences, and he helps with the organization of the Zurich Angular Meetup group in Switzerland.

    He's working as a freelancer in Zurich Switzerland, where he helps customers building websites and web applications. Besides working for clients, Gion is a head instructor at the SAE Institute in Zurich and loves to get his students enthusiastic about the Web.

    He is also the creator of the responsive charting library Chartist, and he loves to contribute to the open source community whenever he finds time.

    When Gion is not busy with web technologies, you can probably find him at his home music studio, outdoors, fishing, or spending quality time with his girlfriend and their cute little dog.

Schedule

The timeframes are only estimates and may vary according to how the class is progressing

DAY 1

Section 1: Technology required for Angular (30 minutes - instructor lecture + Q&A)

  • ES6, ES7 and Typescript
  • Typescript Decorators
  • Web Components – template elements, shadow DOM
  • NodeJS and NPM
  • Getting started with Angular using Angular CLI

Lab 1: Creating your first Application using Angular CLI (15 min activity + 5 min break)

  • Install Angular CLI
  • Create a new Project using Angular CLI
  • Create first components using Angular CLI

Section 2: Angular Architecture and Components (20 minutes - instructor lecture + Q&A)

  • AngularJS & Angular: One Framework architectural changes
  • Component thinking
  • Angular Component lifecycle
  • Solving problems by composition

Section 3: Creating Components (20 minutes - instructor lecture + Q&A)

  • Creating Angular Components
  • Template syntax
  • Property bindings
  • Event Bindings

Lab 3: Creating a simple click counter button (10 min + 5 min break)

  • Together we’re creating a very simple component which you should then transform into a clickable button which always shows the count of clicks it received
  • Section 3: Composing Angular Components (20 minutes – instructor lecture + Q&A)
  • Component Input and Output and bindings
  • Composition Examples

Lab 3: UI Composition exercise (15 min + 5 min break)

  • Given a baseline which contains a simple TODO list application, separate the bloated application component into multiple small components and wire them together using input and output.

Section 4: State management basics (20 minutes - instructor lecture + Q&A)

  • State management good and bad examples
  • Inversion of control for your data
  • Introduction to container components

Lab 4: Refactoring simple TODO app to include container component (15 minutes)

  • Modify our TODO list app to include a container component which handles the connection to our data.

Section 5: Angular router basics (15 minutes - instructor lecture + Q&A)

  • Angular router basics
  • Router configuration
  • Some configuration examples
  • Router directives – Router outlet, router link
  • Using routers with container components

Lab 5: Introduce detail view of TODO tasks and make them navigable using the router (15 min + 5 min break)

  • Create a default route that navigates to the TODO list container component
  • Create a TODO detail component
  • Create a TODO detail container component
  • Create a route to the TODO detail container component
  • Create navigation links in the TODO list component which route to the detail view

DAY 2

Section 6: Performance and Change detection (15 minutes - instructor lecture + Q&A)

  • Change detection basics
  • Pure components and ChangeDetectionStrategy.OnPush
  • Immutable data
  • Manual change detection

Lab 6: Immutable data, pure components, ChangeDetectionStrategy (15 min + 5 min break)

  • Switch all our UI components to be pure components using ChangeDetectionStrategy.OnPush
  • Turn all data manipulation in our container components to immutable operations

Section 7: Testing (20 minutes - instructor lecture + Q&A)

  • TestBed
  • Component fixture
  • Debug element
  • Querying for elements
  • Triggering events
  • Mocking services
  • Testing with Angular CLI

Lab 7: Writing tests for your TODO app (15 min + 5 min break)

  • Testing the toggle functionality of the TODO done flag
  • Mocking the TODO service as necessary

Section 8: Asynchronous data & reactive programming (20 minutes - instructor lecture + Q&A)

  • RxJS introduction
  • Observable streams
  • Async pipe
  • http service

Lab 8: Connecting the TODO app to asynchronous data (15 min + 5 min break)

  • Rewrite our TODO service to connect to a web service using the http service
  • Rewrite our container components to deal with observables and use the async pipe within view

Section 9: Reactive centralized state management I (30 minutes - instructor lecture + Q&A)

  • Flux architecture introduction
  • NgRx introduction
  • Example of NgRx in action
  • Benefits of using centralized state
  • Debug tools

Lab 9: Switching our TODO app to use centralized state management using NgRx (15 min + 5 min break)

  • I’ll walk your through with step-by-step instructions on how to convert your current TODO app into an application with centralized state management using NgRx

Section 9: Reactive centralized state management II (20 minutes - instructor lecture + Q&A)

  • Controlled side effects using NgRx Effects
  • Asynchronous operations the NgRx way

Lab 9: Connecting our state to the TODO service using NgRx Effects (15 minutes + 5 minutes break)

  • Together we’re creating the necessary NgRx Effects in order to connect our application to the TODO service again.

Wrap-up and remaining Q&A (15 min)