Beginning Server-Side Application Development with Angular电子书

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

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