Browse Library
Sign In Start Free Trial
Close icon Search icon
Account
Browse Library Sign In Start Free Trial

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
Beginning Server-Side Application Development with Angular

Beginning Server-Side Application Development with Angular

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

Beginning Server-Side Application Development with Angular

By: Borggreve
Buy this Book

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
close
Beginning Server-Side Application Development with Angular
Icon
Beginning Server-Side Application Development with Angular
Credits
Icon
Credits
Contributors
Icon
Contributors
Icon
Preface
Icon
Preface
Lock Free Chapter
1
Creating the Base Application
chevron up
Icon
Creating the Base Application
Icon
Lesson Objectives
Icon
Server-Side and Client-Side Rendering
Icon
Installing Angular CLI
Icon
Generating a New Application
Icon
Setting Defaults for Angular CLI
Icon
Configuring Global Styles
Icon
Creating UI Modules and Components
Icon
Summary
2
Creating the Application Module and Components
Icon
Creating the Application Module and Components
Icon
Lesson Objectives
Icon
Types of Components
Icon
Generate and Lazy Load the PostsModule
Icon
Creating the Container Components
Icon
Creating a Service to Retrieve Data
Icon
Creating the Presentational Components
Icon
Creating Resolvers to Retrieve Data Using the Router
Icon
Summary
3
Server-Side Rendering
Icon
Server-Side Rendering
Icon
Lesson Objectives
Icon
Generating the Server App
Icon
Adding Dependencies for the Server App
Icon
Adding Run Scripts to package.json
Icon
Implementing a Web Server
Icon
Adding Dynamic Metadata
Icon
Summary
4
Service Workers
Icon
Service Workers
Icon
Lesson Objectives
Icon
What Is a Service Worker?
Icon
What Is a Progressive Web App?
Icon
Installing Dependencies
Icon
Enabling the Service Worker
Icon
Configuring the Service Worker
Icon
Testing the Service Worker
Icon
Debugging the Service Worker
Icon
Summary
1
Index
Icon
Index

Configuring Global Styles

The default generated Angular application does not have any styling.

Angular does not dictate anything in terms of style, so in your own projects, you can use any other style framework, such as Angular Material, Foundation, Semantic UI, or one of the many others. Alternatively, you can create your own styles from scratch to get a unique look and feel.

For this book, though, we will stick to Bootstrap 4 and Font Awesome as they're widely used and they provide a great style with a minimal amount of added code.

Linking to the Style Sheets in global styles.css

As discussed in the previous section, our application comes with a global style sheet, src/styles.css.

In this style sheet, we will use the @import command to link to Bootstrap and Font Awesome. This will instruct Angular to download the files and apply the style to your application globally.

Adding Bootstrap and Font Awesome

  1. Open the src/styles.css file in your editor.

  2. Add the following two lines at the end of the file:

    @import url('https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-beta.2/css/bootstrap.min.css');
@import url('https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css');

  3. Refresh the app in the browser.

As you can see, the font of the application was updated to a sans-serif font as that's the Bootstrap default:

Showing an Icon on the Page

  1. Open the src/app.component.html file and replace the content with the following:

    <h1 class="text-center mt-5">
  <i class="fa fa-thumbs-up"></i>
</h1>

When the app refreshes in your browser, you should see the thumbs up icon in the center of the page:

Note

For a list of all available icons, you can refer to the Font Awesome Cheatsheet (http://fontawesome.io/cheatsheet/).

For an overview of all available Bootstrap styles, you can refer to the Bootstrap 4 documentation (https://getbootstrap.com/docs/4.0/getting-started/introduction/).

In this section, we have set up Bootstrap and Font Awesome as the style frameworks for our app. This will enable us to have a different font style than what Angular CLI provides. We can now start creating our UI components.

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
End of Section 1
Next Section
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
Order Page Read Now

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