O'Reilly logo
live online training icon Live Online training

Moving from Server-Side to Client-Side with Angular

Learn the fundamentals of Angular and how they fit together

Lukas Ruebbelke

Modern web applications are significantly different than how we used to build web applications that were primarily rendered on the server. Applications are no longer coupled to a particular web server but can handle business right in the browser without ever having to refresh the page. With the explosion of powerful frontend JavaScript frameworks and the growing capabilities of browsers, how does someone with background in server-side web development make the transition to client-side development?

In this course, you’ll learn how to build a single-page application using Angular that is cleanly separated from the server. You’ll also learn how to implement server-side communication via a RESTful API in your application. With the benefits of client-side development using Angular, you’ll future-proof your apps by eliminating dependencies on the server and improve user experience.

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

By the end of this live, online course, you'll know how to:

  • Architect a single page application
  • Create an Angular application from scratch
  • Communicate with your server via a RESTful API in Angular

This training course is for you because...

You're a server-side developer with a background in Java or .NET and you need to learn how to build single-page applications using Angular.

Prerequisites

  • This course assumes a basic understanding of JavaScript, HTML and CSS
  • Familiarity with ES6 is helpful but not required
  • No Angular knowledge is required
  • No TypeScript knowledge is required
  • This course will be most helpful for Java or .NET developers who are starting to migrate to single page applications

Before the course:

  • Install the latest version of Node.js and NPM
  • Install the Angular CLI

Recommended Preparation:

The Angular 2 Video Collection

Learning Path: On the Road to Angular 2

About your instructor

  • Developer. Hacker. Community backer. Author and blogger. Console logger.

    Lukas Ruebbelke is also a Google Developer Expert for Angular and co-organizer of one of the largest meetups in the Phoenix metro area.

Schedule

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

DAY 1

Module 1.0: Getting Started

Length: 15 minutes

  • Instructor will introduce the purpose of the course, course outline, and materials
  • Participants will verify they can run the Angular CLI

Module 1.1: Hello Angular

Length 30 minutes

  • Instructor will discuss the basic structure of a single-page application
  • Instructor will discuss the basic elements of an Angular application
  • Participants will create their first Angular application using the Angular CLI
  • Participants will identify the basic elements in their Angular application

Module 1.2: Components

Length 60 minutes

  • Instructor will discuss how to creates components in Angular
  • Instructor will discuss Angular binding syntax
  • Participants will create a basic master-detail view application in Angular

Module 1.3: Services

Length 60 minutes

  • Instructor will discuss how to create services in Angular
  • Participants will refactor an existing component to pull data from an Angular service

DAY 2

Module 2.0: Getting Started

Length: 15 minutes

  • Instructor will introduce the purpose of the course, course outline, and materials
  • Participants will download and run the sample project

Module 2.1: Hello Server-Side Communication

Length 30 minutes

  • Instructor will discuss the basic structure for server-side communication
  • Instructor will explain how a RESTful API works
  • Instructor will explain how Angular handles server-side communication
  • Participants will make their first server-side call within their Angular application

Module 2.2: Server Communication in Angular

Length 60 minutes

  • Instructor will demonstrate how to implement a service that can fully communicate to the server via a RESTful API
  • Participants will refactor their service to communicate with the RESTful API

Module 2.3: Round Trip Communication

Length 60 minutes

  • Instructor will demonstrate how to implement round-trip communication by connecting the template, component, and service in our Angular application.
  • Participants will complete their master-detail view application by connecting the template, component, and service together.