Search icon CANCEL
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
$19.99 per month
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
$19.99 per month
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 a Packt Subscription?

Free for first 7 days. $19.99 p/m after that. Cancel any time!
Product feature icon Unlimited ad-free access to the largest independent learning library in tech. Access this title and thousands more!
Product feature icon 50+ new titles added per month, including many first-to-market concepts and exclusive early access to books as they are being written.
Product feature icon Innovative learning tools, including AI book assistants, code context explainers, and text-to-speech.
Product feature icon Thousands of reference materials covering every tech concept you need to stay up to date.
Subscribe now
View plans & pricing
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

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 a Packt Subscription?

Free for first 7 days. $19.99 p/m after that. Cancel any time!
Product feature icon Unlimited ad-free access to the largest independent learning library in tech. Access this title and thousands more!
Product feature icon 50+ new titles added per month, including many first-to-market concepts and exclusive early access to books as they are being written.
Product feature icon Innovative learning tools, including AI book assistants, code context explainers, and text-to-speech.
Product feature icon Thousands of reference materials covering every tech concept you need to stay up to date.
Subscribe now
View plans & pricing

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 included in a Packt subscription? Chevron down icon Chevron up icon

A subscription provides you with full access to view all Packt and licnesed content online, this includes exclusive access to Early Access titles. Depending on the tier chosen you can also earn credits and discounts to use for owning content

How can I cancel my subscription? Chevron down icon Chevron up icon

To cancel your subscription with us simply go to the account page - found in the top right of the page or at https://subscription.packtpub.com/my-account/subscription - From here you will see the ‘cancel subscription’ button in the grey box with your subscription information in.

What are credits? Chevron down icon Chevron up icon

Credits can be earned from reading 40 section of any title within the payment cycle - a month starting from the day of subscription payment. You also earn a Credit every month if you subscribe to our annual or 18 month plans. Credits can be used to buy books DRM free, the same way that you would pay for a book. Your credits can be found in the subscription homepage - subscription.packtpub.com - clicking on ‘the my’ library dropdown and selecting ‘credits’.

What happens if an Early Access Course is cancelled? Chevron down icon Chevron up icon

Projects are rarely cancelled, but sometimes it's unavoidable. If an Early Access course is cancelled or excessively delayed, you can exchange your purchase for another course. For further details, please contact us here.

Where can I send feedback about an Early Access title? Chevron down icon Chevron up icon

If you have any feedback about the product you're reading, or Early Access in general, then please fill out a contact form here and we'll make sure the feedback gets to the right team. 

Can I download the code files for Early Access titles? Chevron down icon Chevron up icon

We try to ensure that all books in Early Access have code available to use, download, and fork on GitHub. This helps us be more agile in the development of the book, and helps keep the often changing code base of new versions and new technologies as up to date as possible. Unfortunately, however, there will be rare cases when it is not possible for us to have downloadable code samples available until publication.

When we publish the book, the code files will also be available to download from the Packt website.

How accurate is the publication date? Chevron down icon Chevron up icon

The publication date is as accurate as we can be at any point in the project. Unfortunately, delays can happen. Often those delays are out of our control, such as changes to the technology code base or delays in the tech release. We do our best to give you an accurate estimate of the publication date at any given time, and as more chapters are delivered, the more accurate the delivery date will become.

How will I know when new chapters are ready? Chevron down icon Chevron up icon

We'll let you know every time there has been an update to a course that you've bought in Early Access. You'll get an email to let you know there has been a new chapter, or a change to a previous chapter. The new chapters are automatically added to your account, so you can also check back there any time you're ready and download or read them online.

I am a Packt subscriber, do I get Early Access? Chevron down icon Chevron up icon

Yes, all Early Access content is fully available through your subscription. You will need to have a paid for or active trial subscription in order to access all titles.

How is Early Access delivered? Chevron down icon Chevron up icon

Early Access is currently only available as a PDF or through our online reader. As we make changes or add new chapters, the files in your Packt account will be updated so you can download them again or view them online immediately.

How do I buy Early Access content? Chevron down icon Chevron up icon

Early Access is a way of us getting our content to you quicker, but the method of buying the Early Access course is still the same. Just find the course you want to buy, go through the check-out steps, and you’ll get a confirmation email from us with information and a link to the relevant Early Access courses.

What is Early Access? Chevron down icon Chevron up icon

Keeping up to date with the latest technology is difficult; new versions, new frameworks, new techniques. This feature gives you a head-start to our content, as it's being created. With Early Access you'll receive each chapter as it's written, and get regular updates throughout the product's development, as well as the final course as soon as it's ready.We created Early Access as a means of giving you the information you need, as soon as it's available. As we go through the process of developing a course, 99% of it can be ready but we can't publish until that last 1% falls in to place. Early Access helps to unlock the potential of our content early, to help you start your learning when you need it most. You not only get access to every chapter as it's delivered, edited, and updated, but you'll also get the finalized, DRM-free product to download in any format you want when it's published. As a member of Packt, you'll also be eligible for our exclusive offers, including a free course every day, and discounts on new and popular titles.