Server-Side Enterprise Development with Angular

Server-Side Enterprise Development with Angular

by Bram Borggreve
Released November 2018
Publisher(s): Packt Publishing
ISBN: 9781789806267

Read it now on the O’Reilly learning platform with a 10-day free trial.

O’Reilly members get unlimited access to books, live events, courses curated by job role, and more from O’Reilly and nearly 200 top publishers.

Start your free trial

Book description

Build SEO-friendly, progressive web applications that live on the web, mobile, or desktop, using the latest Angular Universal which is loaded with powerful features such as components, directives, and services

Key Features

  • Explore differences between server-side and client-side rendering
  • Learn how to create a progressive web app with great SEO support
  • Discover best practices and how to use them to develop an app

Book Description

With the help of Server-Side Enterprise Development with Angular, equip yourself with the skills required to create modern, progressive web applications that load quickly and efficiently. This fast-paced book is a great way to learn how to build an effective UX by using the new features of Angular 7 beta, without wasting efforts in searching for referrals.

To start off, you'll install Angular CLI and set up a working environment, followed by learning to distinguish between the container and presentational components. You'll explore advanced concepts such as making requests to a REST API from an Angular application, creating a web server using Node.js and Express, and adding dynamic metadata. You'll also understand how to implement and configure a service worker using Angular PWA and deploy the server-side rendered app to the cloud.

By the end of this book, you'll have developed skills to serve your users views that load instantly, while reaping all the SEO benefits of improved page indexing.

What you will learn

  • Identify what makes an Angular application SEO-friendly
  • Generate commands to create components and services
  • Distinguish between the container and presentational components
  • Implement server-side rendering using Angular Universal
  • Create a web server using Node.js and Express
  • Add dynamic metadata to your web application
  • Deploy a server-side rendered app to the cloud
  • Implement and configure a service worker using Angular PWA

Who this book is for

Server-Side Enterprise Development with Angular is for you if you are an experienced front-end developer who wants to quickly work through examples that demonstrate all the key features of server-side development. You need some prior exposure to Angular to follow through this book.

Publisher resources

View/Submit Errata

Table of contents

  1. Preface
    1. About the Book
      1. About the Author
      2. Objectives
      3. Audience
      4. Approach
      5. Minimum Hardware Requirements
      6. Software Requirements
      7. Conventions
      8. Installation
      9. Additional Resources
  2. 1. Creating the Base Application
    1. Introduction
      1. Server-Side Rendering
      2. Client-Side Rendering
    2. Installing Angular CLI
      1. Exercise 1: Installing Angular CLI
    3. Creating a New Application
      1. Exercise 2: Creating a New Application
      2. Exercise 3: Starting the Development Server
      3. Exercise 4: Browsing to the Application
    4. Configuring Global Styles
      1. Linking to the Stylesheets in the Global styles.css File
      2. Exercise 5: Installing Bootstrap and Font Awesome
      3. Exercise 6: Using Bootstrap CSS and Font Awesome
      4. Activity 1: Using a BootSwatch Theme
      5. Activity 2: Using Different Font Awesome Icons
    5. Creating the UI for the Application
      1. Creating the UiModule
      2. Exercise 7: Creating the UiModule
      3. Exercise 8: Importing the UiModule
      4. Exercise 9: Updating the AppComponent Template
      5. Creating the Layout Component
      6. Exercise 10: Generating the LayoutComponent
      7. Exercise 11: Adding the LayoutComponent to the AppRoutingModule
      8. Exercise 12: Implementing the LayoutComponent Template
      9. Creating the Header and Footer
      10. Downloading the Angular Logo
      11. Exercise 13: Adding the Header to the LayoutComponent
      12. Exercise 14: Adding the Footer to the LayoutComponent
      13. Activity 3: Moving the Header to a Separate Component
      14. Activity 4: Moving the Footer to a Separate Component
    6. Creating the App Logic
      1. Types of Components
      2. Creating the Module
      3. Exercise 15: Generating the PostModule
      4. Exercise 16: Lazy Loading the PostModule
      5. Creating the Container Components
      6. Exercise 17: Generating the PostListComponent
      7. Exercise 18: Generating the PostDetailComponent
      8. Exercise 19: Defining our Data Model Types
      9. Creating a Service for API Interaction
      10. Exercise 20: Using the Environment to Store the API Endpoints
      11. Exercise 21: Generating and Implementing the PostService
      12. Exercise 22: Using the PostService in the Container Components
      13. Exercise 23: Importing the HttpClientModule to Enable the HttpClient
      14. Creating the Presentational Components
      15. Exercise 24: Generating the PostItemComponent
      16. Exercise 25: Generating the PostProfileComponent
      17. Exercise 26: Using the PostItemComponent
      18. Resolving Data Using the Router
      19. Exercise 27: Creating a Resolver for the getPosts Method
      20. Exercise 28: Creating a Resolver for the getPost Method
      21. Exercise 29: Adding the Resolvers to the PostRoutingModule
      22. Exercise 30: Using Resolved Data in the PostListComponent
      23. Exercise 31: Using Resolved Data in the PostDetailComponent
      24. Activity 5: Creating a ProfileModule
      25. Activity 6: Creating Container Components
      26. Activity 7: Creating Service and Resolvers
      27. Activity 8: Creating Presentational Components
    7. Summary
  3. 2. Server-Side Rendering
    1. Introduction
      1. How does a Normal App Render?
    2. Generating the Universal Code
      1. Exercise 32: Generating the Universal Code
      2. Exercise 33: Building the Angular Universal App
    3. Enabling Support for Lazy Loading
      1. Exercise 34: Installing the ModuleMapLoaderModule
      2. Exercise 35: Enabling initialNavigation in the AppRoutingModule
      3. Exercise 36: Adding the Build Scripts to package.json
    4. Building the Server
      1. Installing the Dependencies
      2. Exercise 37: Implementing the Nest Bootstrap file
      3. Exercise 38: Implementing the Nest AppModule
      4. Exercise 39: Creating the WebPack Configuration
      5. Exercise 40: Adding the Run Scripts to package.json
    5. Adding Dynamic Metadata
      1. Exercise 41: Creating the UiService
      2. Exercise 42: Adding Metadata to the PostListComponent
      3. Exercise 43: Adding Metadata to the PostDetailComponent
    6. Deploying to Production
      1. Exercise 44: Adding a Dockerfile to our Project
      2. Exercise 45: Deploying our Docker Image to now.sh
      3. Activity 9: Implementing the Transfer State Cache
    7. Summary
  4. 3. Service Workers
    1. Introduction
      1. What is a Service Worker?
      2. What is a Progressive Web App?
    2. Installing Angular PWA
      1. Exercise 46: Adding Angular PWA
    3. Configuring the Service Worker
      1. Exercise 47: Configuring Asset Groups
      2. Exercise 48: Configuring Data Groups
    4. Testing the Service Worker
      1. Checking Where the Data Comes From
      2. Enabling Offline Mode
      3. Exercise 49: Building and Running the App
      4. Exercise 50: Verifying that the Service Worker is Active
      5. Exercise 51: Running the Application in Offline Mode
    5. Debugging the Service Worker
      1. Chrome Developer Tools to the Rescue
      2. Exercise 52: Verifying that the Service Worker is Running
      3. Exercise 53: Unregistering the Service Worker
      4. Activity 10: Communicating with the Service Worker
    6. Summary
  5. Appendix A
    1. 1. Creating the Base Application
      1. Activity 1: Using a BootSwatch Theme
      2. Activity 2: Using Different Font Awesome Icons
      3. Activity 3: Moving the Header to a Separate Component
      4. Activity 4: Moving the Footer to a Separate Component
      5. Activity 5: Creating a ProfileModule
      6. Activity 6: Creating Container Components
      7. Activity 7: Creating Service and Resolvers
      8. Activity 8: Creating Presentational Components
    2. 2. Server-Side Rendering
      1. Activity 9: Implementing the Transfer State Cache
    3. 3. Service Workers
      1. Activity 10: Communicating with the Service Worker

Product information

  • Title: Server-Side Enterprise Development with Angular
  • Author(s): Bram Borggreve
  • Release date: November 2018
  • Publisher(s): Packt Publishing
  • ISBN: 9781789806267