Beginning Server-Side Application Development with Angular

,

• Publisher: Packt Publishing
• Year: 2018
• Print ISBN: 9781789342161
• eBook ISBN: 9781789343212
• Edition: 1
• Topic: Computer Science
• Subtopic: Programming
• Index: Computer Science

Discover how to rapidly prototype SEO-friendly web applications with Angular Universal

Key Features

• Rapidly build an application that's optimized for search performance
• Develop service workers to make your application truly progressive
• Automatically update metadata and load in content from external APIs

Book Description

Equip yourself with the skills required to create modern, progressive web applications that load quickly and efficiently. This fast-paced guide to server-side Angular leads you through an example application that uses Angular Universal to render application pages on the server, rather than the client.

You'll learn how to serve your users views that load instantly, while reaping all the SEO benefits of improved page indexing. With differences of just 200 milliseconds in performance having a measurable impact on your users, it's more important than ever to get server-side right.

What you will learn

• Use the official tools provided by Angular to build an SEO-friendly application
• Create a dynamic web application that maps to current Angular best practices
• Manage your Angular applications with Angular CLI
• Implement server-side rendering for your future web application projects
• Configure service workers to automatically update your application in the background

Who this book is for

This book is ideal for experienced front-end developers who are looking to quickly work through an intelligent example that demonstrates all the key features of server-side development with Angular. You'll need some prior exposure to Angular, as we skim over the basics and get straight to work.

Beginning Server-Side Application Development with Angular

---

Table of Contents

Beginning Server-Side Application Development with Angular

Credits

Contributors

About the author

About the reviewer

Packt is searching for authors like you

Why subscribe?

PacktPub.com

Preface

Checking the Version

Development API

Installation of the API

Who This Book is for

Conventions

Reader Feedback

Customer Support

Downloading the Example Code

Errata

Piracy

Questions

1. Creating the Base Application

Lesson Objectives

Server-Side and Client-Side Rendering

Installing Angular CLI

Generating a New Application

Creating a New Application

Serving the Application

Viewing Your Application

Setting Defaults for Angular CLI

Configuring Global Defaults

Configuring Global Styles

Linking to the Style Sheets in global styles.css

Adding Bootstrap and Font Awesome

Showing an Icon on the Page

Creating UI Modules and Components

Creating the UiModule

Importing Our UiModule

Displaying the Current Route

Creating the LayoutComponent

Adding a New Route

Building Our Layout

Creating the HeaderComponent

Updating the LayoutComponent to Reference Our New HeaderComponent

Creating the Actual Header

Creating the FooterComponent

Updating the LayoutComponent to Reference Our New FooterComponent

Creating the Actual Footer

Summary

2. Creating the Application Module and Components

Lesson Objectives

Types of Components

Presentational Components

Container Components

Folder Structure

Generate and Lazy Load the PostsModule

Creating the Container Components

Creating PostsComponent and ProfileComponent

Adding Dummy Post and Profile Data

Creating a Service to Retrieve Data

Generating the Service

Storing Our API URL

Referencing Our New PostsService in Our Container Components

Defining the Public Methods

Importing HttpClientModule in Our AppModule

Creating the Presentational Components

Creating the PostListComponent

Creating the PostItemComponent

Creating the ProfileItemComponent

Creating Resolvers to Retrieve Data Using the Router

Creating Resolvers

Importing Our Resolvers

Using the Data Resolved by the Router

Summary

3. Server-Side Rendering

Lesson Objectives

Generating the Server App

Generating the Angular Universal Application

Making Our Apps Consistent

Adding Dependencies for the Server App

Adding the Server App to Our Angular CLI Configuration

Adding Run Scripts to package.json

Adding npm Scripts

Testing the Builds of Both Apps

Implementing a Web Server

Installing Server Dependencies

Creating the server.ts File

Adding the npm Script to package.json

Starting the Server

Adding Dynamic Metadata

Creating the UiService

Adding Metadata to PostsComponent and ProfileComponent

Summary

4. Service Workers

Lesson Objectives

What Is a Service Worker?

What Is a Progressive Web App?

Installing Dependencies

Enabling the Service Worker

Importing the ServiceWorkerModule

Creating the Service Worker Configuration

Configuring the Service Worker

Asset and Data Groups

Configuring the Asset and Data Groups

Testing the Service Worker

Checking Where the Data Comes from

Enabling Offline Mode

Running a Local Build of the Browser App

Inspecting the Behavior

Setting Our Application to Offline Mode

Debugging the Service Worker

Chrome Developer Tools to the Rescue

Locating the Running Service Worker

Unregistering the Registered Service Worker

Summary

Index

Beginning Server-Side Application Development with Angular

Copyright © 2018 Packt Publishing

All rights reserved. No part of this book may be reproduced, stored in a retrieval system, or transmitted in any form or by any means, without the prior written permission of the publisher, except in the case of brief quotations embedded in critical articles or reviews.

Every effort has been made in the preparation of this book to ensure the accuracy of the information presented. However, the information contained in this book is sold without warranty, either express or implied. Neither the author, nor Packt Publishing, and its dealers and distributors will be held liable for any damages caused or alleged to be caused directly or indirectly by this b...

Table of contents

• Beginning Server-Side Application Development with Angular