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

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:

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.

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:

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...

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...

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.

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.

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.

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...

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.