O'Reilly logo

Stay ahead with the world's most comprehensive technology and business learning platform.

With Safari, you learn the way you learn best. Get unlimited access to videos, live online training, learning paths, books, tutorials, and more.

Start Free Trial

No credit card required

Beginning Server-Side Application Development with Angular

Book Description

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

About This Book
  • 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
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.

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
In Detail

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.

Style and approach

With this book, you'll be equipped to create modern, SEO-friendly web apps with best practices using Angular CLI. This book focuses on creating a progressive web app using Angular that is optimized for search engines.

Downloading the example code for this book You can download the example code files for all Packt books you have purchased from your account at http://www.PacktPub.com. If you purchased this book elsewhere, you can visit http://www.PacktPub.com/support and register to have the files e-mailed directly to you.

Table of Contents

  1. Beginning Server-Side Application Development with Angular
    1. Table of Contents
    2. Beginning Server-Side Application Development with Angular
    3. Credits
    4. Contributors
      1. About the author
      2. About the reviewer
      3. Packt is searching for authors like you
      1. Why subscribe?
      2. PacktPub.com
    5. Preface
      1. Checking the Version
      2. Development API
      3. Installation of the API
      4. Who This Book is for
      5. Conventions
      6. Reader Feedback
      7. Customer Support
      8. Downloading the Example Code
      9. Errata
      10. Piracy
      11. Questions
    6. 1. Creating the Base Application
      1. Lesson Objectives
      2. Server-Side and Client-Side Rendering
      3. Installing Angular CLI
      4. Generating a New Application
        1. Creating a New Application
        2. Serving the Application
        3. Viewing Your Application
      5. Setting Defaults for Angular CLI
        1. Configuring Global Defaults
      6. Configuring Global Styles
        1. Linking to the Style Sheets in global styles.css
        2. Adding Bootstrap and Font Awesome
        3. Showing an Icon on the Page
      7. Creating UI Modules and Components
        1. Creating the UiModule
          1. Importing Our UiModule
          2. Displaying the Current Route
        2. Creating the LayoutComponent
          1. Adding a New Route
          2. Building Our Layout
        3. Creating the HeaderComponent
          1. Updating the LayoutComponent to Reference Our New HeaderComponent
          2. Creating the Actual Header
        4. Creating the FooterComponent
          1. Updating the LayoutComponent to Reference Our New FooterComponent
          2. Creating the Actual Footer
      8. Summary
    7. 2. Creating the Application Module and Components
      1. Lesson Objectives
      2. Types of Components
        1. Presentational Components
        2. Container Components
        3. Folder Structure
      3. Generate and Lazy Load the PostsModule
      4. Creating the Container Components
        1. Creating PostsComponent and ProfileComponent
        2. Adding Dummy Post and Profile Data
      5. Creating a Service to Retrieve Data
        1. Generating the Service
        2. Storing Our API URL
        3. Referencing Our New PostsService in Our Container Components
        4. Defining the Public Methods
        5. Importing HttpClientModule in Our AppModule
      6. Creating the Presentational Components
        1. Creating the PostListComponent
        2. Creating the PostItemComponent
        3. Creating the ProfileItemComponent
      7. Creating Resolvers to Retrieve Data Using the Router
        1. Creating Resolvers
        2. Importing Our Resolvers
        3. Using the Data Resolved by the Router
      8. Summary
    8. 3. Server-Side Rendering
      1. Lesson Objectives
      2. Generating the Server App
        1. Generating the Angular Universal Application
        2. Making Our Apps Consistent
      3. Adding Dependencies for the Server App
        1. Adding the Server App to Our Angular CLI Configuration
      4. Adding Run Scripts to package.json
        1. Adding npm Scripts
        2. Testing the Builds of Both Apps
      5. Implementing a Web Server
        1. Installing Server Dependencies
        2. Creating the server.ts File
        3. Adding the npm Script to package.json
        4. Starting the Server
      6. Adding Dynamic Metadata
        1. Creating the UiService
        2. Adding Metadata to PostsComponent and ProfileComponent
      7. Summary
    9. 4. Service Workers
      1. Lesson Objectives
      2. What Is a Service Worker?
      3. What Is a Progressive Web App?
      4. Installing Dependencies
      5. Enabling the Service Worker
        1. Importing the ServiceWorkerModule
        2. Creating the Service Worker Configuration
      6. Configuring the Service Worker
        1. Asset and Data Groups
        2. Configuring the Asset and Data Groups
      7. Testing the Service Worker
        1. Checking Where the Data Comes from
        2. Enabling Offline Mode
          1. Running a Local Build of the Browser App
          2. Inspecting the Behavior
          3. Setting Our Application to Offline Mode
      8. Debugging the Service Worker
        1. Chrome Developer Tools to the Rescue
          1. Locating the Running Service Worker
          2. Unregistering the Registered Service Worker
      9. Summary
    10. Index