Sign In Start Free Trial
Account

Add to playlist

Create a Playlist

Modal Close icon
You need to login to use this feature.
  • Book Overview & Buying Beginning Server-Side Application Development with Angular
  • Table Of Contents Toc
  • Feedback & Rating feedback
Beginning Server-Side Application Development with Angular

Beginning Server-Side Application Development with Angular

By : Borggreve
close
close
Beginning Server-Side Application Development with Angular

Beginning Server-Side Application Development with Angular

By: Borggreve

Overview of this book

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.
Table of Contents (10 chapters)
close
close

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

Visually different images
CONTINUE READING
83
Tech Concepts
36
Programming languages
73
Tech Tools
Icon Unlimited access to the largest independent learning library in tech of over 8,000 expert-authored tech books and videos.
Icon Innovative learning tools, including AI book assistants, code context explainers, and text-to-speech.
Icon 50+ new titles added per month and exclusive early access to books as they are being written.
Beginning Server-Side Application Development with Angular
notes
bookmark Notes and Bookmarks search Search in title playlist Add to playlist font-size Font size

Change the font size

margin-width Margin width

Change margin width

day-mode Day/Sepia/Night Modes

Change background colour

Close icon Search
Country selected

Close icon Your notes and bookmarks

Confirmation

Modal Close icon
claim successful

Buy this book with your credits?

Modal Close icon
Are you sure you want to buy this book with one of your credits?
Close
YES, BUY

Submit Your Feedback

Modal Close icon
Modal Close icon
Modal Close icon