Search icon CANCEL
Subscription
0
Cart icon
Your Cart (0 item)
Close icon
You have no products in your basket yet
Save more on your purchases now! discount-offer-chevron-icon
Savings automatically calculated. No voucher code required.
Arrow left icon
Explore Products
Best Sellers
New Releases
Books
Videos
Audiobooks
Learning Hub
Conferences
Free Learning
Arrow right icon
Beginning Server-Side Application Development with Angular
Beginning Server-Side Application Development with Angular

Beginning Server-Side Application Development with Angular: Discover how to rapidly prototype SEO-friendly web applications with Angular Universal

Arrow left icon
Profile Icon Borggreve
Arrow right icon
$16.99
Paperback Apr 2018 110 pages 1st Edition
eBook
$8.99 $13.99
Paperback
$16.99
Subscription
Free Trial
Renews at $19.99p/m
Arrow left icon
Profile Icon Borggreve
Arrow right icon
$16.99
Paperback Apr 2018 110 pages 1st Edition
eBook
$8.99 $13.99
Paperback
$16.99
Subscription
Free Trial
Renews at $19.99p/m
eBook
$8.99 $13.99
Paperback
$16.99
Subscription
Free Trial
Renews at $19.99p/m

What do you get with Print?

Product feature icon Instant access to your digital eBook copy whilst your Print order is Shipped
Product feature icon Paperback book shipped to your preferred address
Product feature icon Download this book in EPUB and PDF formats
Product feature icon Access this title in our online reader with advanced features
Product feature icon DRM FREE - Read whenever, wherever and however you want
Table of content icon View table of contents Preview book icon Preview Book

Beginning Server-Side Application Development with Angular

Chapter 2. Creating the Application Module and Components

In this lesson, we will start by creating a PostsModule that contains all the code related to displaying the posts that come from our API.

Inside this module, we will add various components, a service, and two resolvers.

The components are used to display the data in the browser. We will go over their use in this lesson. The service is used to retrieve the data from the API. Lastly, we will add resolvers to our app; resolvers make sure the data from the service is available at the moment we navigate from one route to another.

Lesson Objectives


  • Explore the types of components that will be used in our app

  • Create and load the PostsModule

  • Create the container components, such as PostsComponent and ProfileComponent

  • Add dummy posts and profiles

  • Create a service to retrieve data

  • Create the presentational components, such as PostListComponent, PostItemComponent, and ProfileItemComponent

  • Create and import resolvers

Types of Components


In this section, we will take a look at how we can differentiate our components by making a distinction between container and presentational components. Sometimes, they are also called smart and dumb components, referring to how much knowledge of the world outside of the components each of them has.

The main difference we can make is the following:

  • A presentational component is responsible for how things look

  • A container component is responsible for how things work

We will dive into more details of why this distinction is important when we create them, but we can give away a few things already.

Presentational Components

We can say the following about presentational components:

  • They get their data passed in using the @Input() decorator

  • Any operations are passed up using the @Output() decorator

  • They handle the markup and the styling of the application

  • They mostly just contain other presentational components

  • They have no knowledge (or dependencies) on any routes or services from...

Generate and Lazy Load the PostsModule


We will generate the PostsModule using the ng command and lazy load the PostsModule in the AppRoutingModule.

Using the ng generate command, we can generate or scaffold out all sorts of code that can be used in our Angular application.

We will use the ng generate module command to generate our PostsModule.

This command has one required parameter, which is the name. In our application, we will call this module posts. A second optional parameter is passed in in order to create a separate file to hold the routes for this module, the PostsRoutingModule:

  1. Open your terminal and navigate to the project directory.

  2. Run the following command from inside the project directory:

    ng g m posts --routing

As you can see from the output of the command, our PostsModule is generated in the new folder src/app/posts:

In contrast to how we load our UiModule by importing it into our AppModule, we will lazy load our PostsModule using our AppRoutingModule.

This is an optimization of how...

Creating the Container Components


In this section, we will use ng generate to create the PostsComponent and ProfileComponent inside the PostsModule, add routes to both components, and add dummy data that we can use to build our presentational components.

Creating PostsComponent and ProfileComponent

We will be using the ng generate command to create our PostsComponent. This is the component that will eventually list an overview for all our posts.

The application route to this component will be /posts:

  1. Open your terminal and navigate to the project directory.

  2. Run the following command from inside the project directory:

    ng g c posts/containers/posts
  3. Open the src/app/posts/posts-routing.module.ts file.

  4. Import the PostsComponent:

    import { PostsComponent } from './containers/posts/posts.component'
  5. Add the following route to the routes array:

    { path: '', component: PostsComponent },

Now when we refresh the page in our app, we should see the text posts works! between our header and footer:

Very similar to how...

Creating a Service to Retrieve Data


In this section, we will use ng generate to create the PostsService, use environment to store the API URL, and use the PostsService in our components. We will then define our API calls in the PostsService and leverage the HttpClientModule to enable HTTP access.

Generating the Service

We will use the ng generate service command to generate a service that will handle the interaction with our API:

  1. Open your terminal and navigate to the project directory.

  2. Run the following command from inside the project directory:

    ng g s posts/services/posts --module posts/posts

Storing Our API URL

We will use the environment of Angular CLI to store our API URL. Using the environment, we can define a different URL for development and production environments.

By default, the application generated with Angular CLI comes with two predefined environments. These environments are defined in .angular-cli.json in the project root.

  1. Open the src/environments/environment.ts file.

  2. Inside the environment...

Creating the Presentational Components


In this section, we will use ng generate component to create the PostListComponent and PostItemComponent inside the PostsModule. We will then add a UI to these components and use these components in our container components.

The PostListComponent is responsible for taking in an array of posts using its Input, and it loops over each of these posts and invokes the PostItemComponent.

The PostItemComponent accepts a single post as its Input and displays that post.

Creating the PostListComponent

We will be using the ng generate command to create our PostListComponent. This is the component that will loop over our posts and will be called from our PostsComponent:

  1. Open the src/app/posts/container/posts/posts.component.ts file.

  2. Update the template to the following:

    <app-post-list [posts]="posts"></app-post-list>
  3. Open your terminal and navigate to the project directory.

  4. Run the following command from inside the project directory:

    ng g c posts/components/post...

Creating Resolvers to Retrieve Data Using the Router


In this section, we will manually create two Injectable classes that act as resolvers and then configure our router to use these resolvers. We will then update our container components to use this resolved data.

A resolver is a class that we can use to fetch the data that we use in our component before the component is displayed. We call the resolvers in the routes where we need the data. In our implementation, the resolvers retrieve the data from the API and return it so it can be displayed in the components.

Note

More information about resolvers can be found at: https://angular.io/guide/router#resolve-pre-fetching-component-data.

Our application is quite neatly structured already, but there is one thing that we can optimize.

In order to see what our problem is, open Chrome Developer Tools and then the Performance tab:

Hit the cog icon and set Network to Slow 3G:

If we now click around in our application, we will see that that our page navigation...

Summary


In this lesson, we learned the different types of components and how to create them. We then learned how to create resolvers to retrieve data using the router.

In the next lesson, we will look at implementing server-side rendering in our app.

Left arrow icon Right arrow icon

Key benefits

  • 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

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.

Who is this book 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
Estimated delivery fee Deliver to Ukraine

Economy delivery 10 - 13 business days

$6.95

Premium delivery 6 - 9 business days

$21.95
(Includes tracking information)

Product Details

Country selected
Publication date, Length, Edition, Language, ISBN-13
Publication date : Apr 30, 2018
Length: 110 pages
Edition : 1st
Language : English
ISBN-13 : 9781789342161
Vendor :
Google
Languages :
Tools :

What do you get with Print?

Product feature icon Instant access to your digital eBook copy whilst your Print order is Shipped
Product feature icon Paperback book shipped to your preferred address
Product feature icon Download this book in EPUB and PDF formats
Product feature icon Access this title in our online reader with advanced features
Product feature icon DRM FREE - Read whenever, wherever and however you want
Estimated delivery fee Deliver to Ukraine

Economy delivery 10 - 13 business days

$6.95

Premium delivery 6 - 9 business days

$21.95
(Includes tracking information)

Product Details

Publication date : Apr 30, 2018
Length: 110 pages
Edition : 1st
Language : English
ISBN-13 : 9781789342161
Vendor :
Google
Languages :
Tools :

Packt Subscriptions

See our plans and pricing
Modal Close icon
$19.99 billed monthly
Feature tick icon Unlimited access to Packt's library of 7,000+ practical books and videos
Feature tick icon Constantly refreshed with 50+ new titles a month
Feature tick icon Exclusive Early access to books as they're written
Feature tick icon Solve problems while you work with advanced search and reference features
Feature tick icon Offline reading on the mobile app
Feature tick icon Simple pricing, no contract
$199.99 billed annually
Feature tick icon Unlimited access to Packt's library of 7,000+ practical books and videos
Feature tick icon Constantly refreshed with 50+ new titles a month
Feature tick icon Exclusive Early access to books as they're written
Feature tick icon Solve problems while you work with advanced search and reference features
Feature tick icon Offline reading on the mobile app
Feature tick icon Choose a DRM-free eBook or Video every month to keep
Feature tick icon PLUS own as many other DRM-free eBooks or Videos as you like for just $5 each
Feature tick icon Exclusive print discounts
$279.99 billed in 18 months
Feature tick icon Unlimited access to Packt's library of 7,000+ practical books and videos
Feature tick icon Constantly refreshed with 50+ new titles a month
Feature tick icon Exclusive Early access to books as they're written
Feature tick icon Solve problems while you work with advanced search and reference features
Feature tick icon Offline reading on the mobile app
Feature tick icon Choose a DRM-free eBook or Video every month to keep
Feature tick icon PLUS own as many other DRM-free eBooks or Videos as you like for just $5 each
Feature tick icon Exclusive print discounts

Frequently bought together


Stars icon
Total $ 115.97
Mastering Angular Components
$43.99
Angular 6 for Enterprise-Ready Web Applications
$54.99
Beginning Server-Side Application Development with Angular
$16.99
Total $ 115.97 Stars icon

Table of Contents

4 Chapters
Creating the Base Application Chevron down icon Chevron up icon
Creating the Application Module and Components Chevron down icon Chevron up icon
Server-Side Rendering Chevron down icon Chevron up icon
Service Workers Chevron down icon Chevron up icon
Get free access to Packt library with over 7500+ books and video courses for 7 days!
Start Free Trial

FAQs

What is the delivery time and cost of print book? Chevron down icon Chevron up icon

Shipping Details

USA:

'

Economy: Delivery to most addresses in the US within 10-15 business days

Premium: Trackable Delivery to most addresses in the US within 3-8 business days

UK:

Economy: Delivery to most addresses in the U.K. within 7-9 business days.
Shipments are not trackable

Premium: Trackable delivery to most addresses in the U.K. within 3-4 business days!
Add one extra business day for deliveries to Northern Ireland and Scottish Highlands and islands

EU:

Premium: Trackable delivery to most EU destinations within 4-9 business days.

Australia:

Economy: Can deliver to P. O. Boxes and private residences.
Trackable service with delivery to addresses in Australia only.
Delivery time ranges from 7-9 business days for VIC and 8-10 business days for Interstate metro
Delivery time is up to 15 business days for remote areas of WA, NT & QLD.

Premium: Delivery to addresses in Australia only
Trackable delivery to most P. O. Boxes and private residences in Australia within 4-5 days based on the distance to a destination following dispatch.

India:

Premium: Delivery to most Indian addresses within 5-6 business days

Rest of the World:

Premium: Countries in the American continent: Trackable delivery to most countries within 4-7 business days

Asia:

Premium: Delivery to most Asian addresses within 5-9 business days

Disclaimer:
All orders received before 5 PM U.K time would start printing from the next business day. So the estimated delivery times start from the next day as well. Orders received after 5 PM U.K time (in our internal systems) on a business day or anytime on the weekend will begin printing the second to next business day. For example, an order placed at 11 AM today will begin printing tomorrow, whereas an order placed at 9 PM tonight will begin printing the day after tomorrow.


Unfortunately, due to several restrictions, we are unable to ship to the following countries:

  1. Afghanistan
  2. American Samoa
  3. Belarus
  4. Brunei Darussalam
  5. Central African Republic
  6. The Democratic Republic of Congo
  7. Eritrea
  8. Guinea-bissau
  9. Iran
  10. Lebanon
  11. Libiya Arab Jamahriya
  12. Somalia
  13. Sudan
  14. Russian Federation
  15. Syrian Arab Republic
  16. Ukraine
  17. Venezuela
What is custom duty/charge? Chevron down icon Chevron up icon

Customs duty are charges levied on goods when they cross international borders. It is a tax that is imposed on imported goods. These duties are charged by special authorities and bodies created by local governments and are meant to protect local industries, economies, and businesses.

Do I have to pay customs charges for the print book order? Chevron down icon Chevron up icon

The orders shipped to the countries that are listed under EU27 will not bear custom charges. They are paid by Packt as part of the order.

List of EU27 countries: www.gov.uk/eu-eea:

A custom duty or localized taxes may be applicable on the shipment and would be charged by the recipient country outside of the EU27 which should be paid by the customer and these duties are not included in the shipping charges been charged on the order.

How do I know my custom duty charges? Chevron down icon Chevron up icon

The amount of duty payable varies greatly depending on the imported goods, the country of origin and several other factors like the total invoice amount or dimensions like weight, and other such criteria applicable in your country.

For example:

  • If you live in Mexico, and the declared value of your ordered items is over $ 50, for you to receive a package, you will have to pay additional import tax of 19% which will be $ 9.50 to the courier service.
  • Whereas if you live in Turkey, and the declared value of your ordered items is over € 22, for you to receive a package, you will have to pay additional import tax of 18% which will be € 3.96 to the courier service.
How can I cancel my order? Chevron down icon Chevron up icon

Cancellation Policy for Published Printed Books:

You can cancel any order within 1 hour of placing the order. Simply contact customercare@packt.com with your order details or payment transaction id. If your order has already started the shipment process, we will do our best to stop it. However, if it is already on the way to you then when you receive it, you can contact us at customercare@packt.com using the returns and refund process.

Please understand that Packt Publishing cannot provide refunds or cancel any order except for the cases described in our Return Policy (i.e. Packt Publishing agrees to replace your printed book because it arrives damaged or material defect in book), Packt Publishing will not accept returns.

What is your returns and refunds policy? Chevron down icon Chevron up icon

Return Policy:

We want you to be happy with your purchase from Packtpub.com. We will not hassle you with returning print books to us. If the print book you receive from us is incorrect, damaged, doesn't work or is unacceptably late, please contact Customer Relations Team on customercare@packt.com with the order number and issue details as explained below:

  1. If you ordered (eBook, Video or Print Book) incorrectly or accidentally, please contact Customer Relations Team on customercare@packt.com within one hour of placing the order and we will replace/refund you the item cost.
  2. Sadly, if your eBook or Video file is faulty or a fault occurs during the eBook or Video being made available to you, i.e. during download then you should contact Customer Relations Team within 14 days of purchase on customercare@packt.com who will be able to resolve this issue for you.
  3. You will have a choice of replacement or refund of the problem items.(damaged, defective or incorrect)
  4. Once Customer Care Team confirms that you will be refunded, you should receive the refund within 10 to 12 working days.
  5. If you are only requesting a refund of one book from a multiple order, then we will refund you the appropriate single item.
  6. Where the items were shipped under a free shipping offer, there will be no shipping costs to refund.

On the off chance your printed book arrives damaged, with book material defect, contact our Customer Relation Team on customercare@packt.com within 14 days of receipt of the book with appropriate evidence of damage and we will work with you to secure a replacement copy, if necessary. Please note that each printed book you order from us is individually made by Packt's professional book-printing partner which is on a print-on-demand basis.

What tax is charged? Chevron down icon Chevron up icon

Currently, no tax is charged on the purchase of any print book (subject to change based on the laws and regulations). A localized VAT fee is charged only to our European and UK customers on eBooks, Video and subscriptions that they buy. GST is charged to Indian customers for eBooks and video purchases.

What payment methods can I use? Chevron down icon Chevron up icon

You can pay with the following card types:

  1. Visa Debit
  2. Visa Credit
  3. MasterCard
  4. PayPal
What is the delivery time and cost of print books? Chevron down icon Chevron up icon

Shipping Details

USA:

'

Economy: Delivery to most addresses in the US within 10-15 business days

Premium: Trackable Delivery to most addresses in the US within 3-8 business days

UK:

Economy: Delivery to most addresses in the U.K. within 7-9 business days.
Shipments are not trackable

Premium: Trackable delivery to most addresses in the U.K. within 3-4 business days!
Add one extra business day for deliveries to Northern Ireland and Scottish Highlands and islands

EU:

Premium: Trackable delivery to most EU destinations within 4-9 business days.

Australia:

Economy: Can deliver to P. O. Boxes and private residences.
Trackable service with delivery to addresses in Australia only.
Delivery time ranges from 7-9 business days for VIC and 8-10 business days for Interstate metro
Delivery time is up to 15 business days for remote areas of WA, NT & QLD.

Premium: Delivery to addresses in Australia only
Trackable delivery to most P. O. Boxes and private residences in Australia within 4-5 days based on the distance to a destination following dispatch.

India:

Premium: Delivery to most Indian addresses within 5-6 business days

Rest of the World:

Premium: Countries in the American continent: Trackable delivery to most countries within 4-7 business days

Asia:

Premium: Delivery to most Asian addresses within 5-9 business days

Disclaimer:
All orders received before 5 PM U.K time would start printing from the next business day. So the estimated delivery times start from the next day as well. Orders received after 5 PM U.K time (in our internal systems) on a business day or anytime on the weekend will begin printing the second to next business day. For example, an order placed at 11 AM today will begin printing tomorrow, whereas an order placed at 9 PM tonight will begin printing the day after tomorrow.


Unfortunately, due to several restrictions, we are unable to ship to the following countries:

  1. Afghanistan
  2. American Samoa
  3. Belarus
  4. Brunei Darussalam
  5. Central African Republic
  6. The Democratic Republic of Congo
  7. Eritrea
  8. Guinea-bissau
  9. Iran
  10. Lebanon
  11. Libiya Arab Jamahriya
  12. Somalia
  13. Sudan
  14. Russian Federation
  15. Syrian Arab Republic
  16. Ukraine
  17. Venezuela