Beginning Server-Side Application Development with Angular

Course Description

Web applications built with Angular can be optimized for search engines (SEO). Building support for SEO in apps means that search engines can read and understand the pages, and that the pages have dynamic data that is specifically aimed at search engines (meta tags). This increases the visibility of your app giving higher search rankings and more links, resulting in more revenues for you or your client. Angular provides built-in features that can be leveraged to ensure apps enjoy maximum visibility on the web. Angular also provides features to ensure that our apps keep working without an internet connection or on a slow connection as well.

With this course, you'll be equipped to create modern, SEO-friendly web apps with best practices using Angular CLI. This course focuses on creating a progressive web app using Angular that is optimized for search engines. As such, we will not focus on understanding Angular basics.

Overview

In this course, we will learn how to use Angular to create a progressive web app (PWA) that has great support for SEO. We will begin by identifying what makes an app SEO friendly and installing Angular CLI. We will then build out the UI and application components. By the end of the first lesson, we will have an app ready that is built using Angular's best practices. In the next lesson, we will implement server-side rendering. We will create a server with Express.js and add dynamic metadata to our app. In the final lesson, we will enable and configure service workers for our app, which will enable our app to work offline.

Designed to help instructors prepare to teach the course, Train the Trainer videos are included and can be accessed by redeeming the digital access key on the CHOICE platform.

Course Length

2 days

Scope

This course focuses on creating a progressive web app using Angular that is optimized for search engines. As such, we do not cover the basics of Angular. Also, this course uses Angular CLI to create the app.

Target Audience

This course is targeted at Angular developers interested in using Angular's features to bring SEO into their app development process. Previous app development experience using Angular is required.

The students taking this course must be well-versed with the following concepts:

• The basics of Angular
• HTML
• CSS
• Basics of TypeScript

Technical Requirements

Hardware:

This course will require a computer system for the instructor and one for each student. The minimum hardware requirements are as follows:

• Processor: i3
• Memory: 2 GB RAM
• Hard disk: 10 GB
• Internet connection

Software:

For this course, we will use the following software:

• Node 6.9.0 or higher
• npm 3.0 or higher
• Git
• Chrome (latest version)

Installation and Setup

• Download and install Atom from https://atom.io/

Course Outline

Lesson 1: Creating the Base Application

• Installing Angular CLI
• Generating a New Application
• Setting Defaults for Angular CLI
• Configuring Global Styles
• Creating UI Modules and Components
• Creating the Application Module and Components

Lesson 2: Server-Side Rendering

• Generating the Server App
• Adding Dependencies for the Server App
• Adding Run Scripts to package.json
• Implementing a Web Server
• Adding Dynamic Metadata

Lesson 3: Service Workers

• Installing Dependencies
• Enabling the Service Worker
• Configuring the Service Worker
• Testing the Service Worker
• Debugging the Service Worker