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
All Products
Best Sellers
New Releases
Books
Videos
Audiobooks
Learning Hub
Newsletters
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 Bram Borggreve
Arrow right icon
$8.99 $13.99
Book Apr 2018 110 pages 1st Edition
eBook
$8.99 $13.99
Print
$16.99
Subscription
Free Trial
Renews at $19.99p/m
Arrow left icon
Profile Icon Bram Borggreve
Arrow right icon
$8.99 $13.99
Book Apr 2018 110 pages 1st Edition
eBook
$8.99 $13.99
Print
$16.99
Subscription
Free Trial
Renews at $19.99p/m
eBook
$8.99 $13.99
Print
$16.99
Subscription
Free Trial
Renews at $19.99p/m

What do you get with eBook?

Product feature icon Instant access to your Digital eBook purchase
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 1. Creating the Base Application

The Angular application we will build is a list of posts you regularly see in a social app such as Twitter. Each of these posts is posted by a user and we can click through to the user's profile to show all the posts made by the profile.

We will intentionally keep the application simple as the book is meant to focus on the technology rather than the functionality of the app. Although the app is simple, we will develop it using all the best practices of Angular development.

Web applications built with Angular can be optimized for search engines (SEO). Building support for SEO in apps means that search engines can read and understand the pages, and that the pages have dynamic data that is specifically aimed at search engines (meta tags). This increases the visibility of your app, giving higher search rankings and more links, resulting in more revenues for you or your client. Angular provides built-in features that can be leveraged to ensure apps enjoy maximum visibility on the web.

Lesson Objectives


In this lesson, you will:

  • Install Angular CLI

  • Create an Angular application

  • Create the base UI of the application

  • Create the header and footer of our application

Server-Side and Client-Side Rendering


When we talk about server-side rendering of websites, we are generally referring to an application or website that uses a programming language that runs on a server. On this server, the web pages are created (rendered) and the output of that rendering (the HTML) is sent to the browser, where it can be displayed directly.

When we talk about client-side rendering, we are generally referring to an application or website that uses JavaScript running in the browser to display (render) the pages. There is often a single page that is downloaded, with a JavaScript file that builds up the actual page (hence the term single-page application).

Installing Angular CLI


Angular CLI is the officially supported tool for creating and developing Angular applications. It is an open source project that is maintained by the Angular team and is the recommended way to develop Angular applications.

Angular CLI offers the following functionality:

  • Create a new application

  • Run the application in development mode

  • Generate code using the best practices from the Angular team

  • Run unit tests and end-to-end tests

  • Create a production-ready build

One of the main benefits of using Angular CLI is that you don't need to configure any build tools. It's all abstracted away and available through one handy command: ng.

Throughout the book, we will be using the ng command for creating the app, generating the code, running the application in development mode, and creating builds.

Note

For more information about Angular CLI, refer to the project page on GitHub (https://github.com/angular/angular-cli)

To install Angular CLI on your machine, perform the following steps:

  1. Open your terminal.

  2. Run the following command:

    npm install –g @angular/cli@latest
  3. Once the installation is finished without any errors, make sure that the ng command works as expected by running the following command:

    ng --version
  4. Verify that the output is similar to the output shown here:

In this section, we have installed Angular CLI. We can start building our application!

Generating a New Application


Now that we have installed and configured Angular CLI, we can start generating our new application.

Running the ng new command will do the following:

  • Create a folder called angular-social

  • Create a new basic application inside this folder

  • Add a routing module (because the --routing flag is passed in)

  • Run npm install inside this folder to install the dependencies

  • Run git init to initialize a new Git repository

Creating a New Application

To create a new application, perform the following steps:

  1. Open your terminal and navigate to the directory where you want to work on your application:

    cd dev
  2. Once inside your workspace directory, invoke the ng command as follows:

    ng new angular-social --routing
  3. The output of this command will be similar to the following:

Let's have a look at the folders that are created after running this command:

  • src: This folder contains the source files for our application

  • src/app/: This folder contains the application files

  • src/assets/: This folder contains the static assets we can use in our application (such as images)

  • src/environments/: This folder contains the definition of the default environments of our application

  • e2e: This folder contains the end-to-end tests for our application

Serving the Application

To serve the application, perform the following steps:

  1. When the installation is finished, we can open our terminal and enter the working directory:

    cd angular-social
  2. Run the ng serve command to start the development server:

    ng serve

    The output of the command will be as follows:

Viewing Your Application

To view your application, perform the following steps:

  1. Open your browser and navigate to http://localhost:4200/.

  2. You should be greeted with a default page that says Welcome to app!:

In this section, we have created a basic application using Angular CLI and viewed the same in the browser.

Setting Defaults for Angular CLI


Angular CLI works great out of the box and the default setup delivers a nice configuration to work with. But in addition to having some sane defaults, it is also very configurable.

In this book, we will take the opportunity to configure our Angular CLI defaults so it behaves a little bit differently.

The things we are going to change all have to do with how we generate (or scaffold) our code.

When scaffolding components, the default Angular CLI settings will create the HTML template and style sheet in a separate file.

In order to keep all component content in one file, we will configure Angular CLI to generate inline templates and styles.

The advantage of keeping all the component content in one file is that you can work on templates, styles, and the actual component code in a single place without having to switch files.

Configuring Global Defaults

In your terminal, run the following commands to globally configure the defaults:

ng set defaults.component.inlineStyle true
ng set defaults.component.inlineTemplate true

When we run the git diff command, we see that these settings are stored in the .angular-cli.json file in our application:

In this section, we have configured Angular CLI to generate inline styles and templates.

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.

Creating UI Modules and Components


One of the great things about working with Angular is that it promotes building your applications in a modular and componentized way.

In Angular, an NgModule (or simply Module) is a way to group your application into logical blocks of functionality.

A Module is a TypeScript class with the @NgModule decorator. In the decorator, we define how Angular compiles and runs the code inside the module.

In this lesson, we are going to build a module that groups together all the components we want to use in our user interface.

We will add a LayoutComponent that consists of our HeaderComponent and FooterComponent, and in-between those, we will define the space where our application code will be displayed using the RouterOutlet component:

Creating the UiModule

In this section, we will generate the UiModule using the ng command and import the UiModule in the AppModule.

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

This command has one required parameter, which is the name. In our application, we will call this module ui:

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

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

    $ ng generate module ui
       create src/app/ui/ui.module.ts (186 bytes)

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

When we take a look at this file, we can see what an empty Angular module looks like:

   import { NgModule } from '@angular/core';
    import { CommonModule } from '@angular/common';

    @NgModule({
      imports: [
        CommonModule
      ],
      declarations: []
    })
    export class UiModule { }

Importing Our UiModule

Now that our UiModule is created, we need to import it from our AppModule. That way, we can use the code inside the UiModule from other code that lives inside the AppModule:

  1. Open the project in your editor.

  2. Open the src/app/app.module.ts file.

  3. Add the import statement on top of the file:

    import { UiModule } from './ui/ui.module'
  4. Add a reference to UiModule in the imports array inside the NgModule decorator:

    @NgModule({
       ...
       imports: [
         // other imports
         UiModule
       ],
      ...
     })

Our UiModule is now created and imported in our AppModule, which makes it ready to use.

Let's go ahead and create our first component inside the UiModule, and make it display in our app!

Displaying the Current Route

When building our app, we will heavily lean on Angular's router to tie all of our modules and components together.

Because we will build all the functionality in modules, we will use our main AppComponent only to display the current route. To make this work, we will need to update the AppComponent template and make sure we define the router-outlet:

  1. Open the project in your editor.

  2. Open the src/app/app.component.html file.

  3. Remove all of the content and add the following HTML:

    <router-outlet></router-outlet>

After refreshing the app in our browser, we should see a blank page. This is because we don't have any routes set up and thus there is no way the Angular app knows what to display. Let's move to the next section to create our basic layout!

Creating the LayoutComponent

In this section, we will use ng generate to create the LayoutComponent inside the UiModule and add the LayoutComponent to the AppRoutingModule so it gets displayed.

The LayoutComponent is the main template of our application. Its function is to glue together the HeaderComponent and the FooterComponent and show the actual application pages in-between those two.

Now we will be using the ng generate command to create our LayoutComponent.

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

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

    ng generate component ui/components/layout

When we look at the output, we see that our component was created in the new src/app/ui/components directory:

The last line of our output shows us that our UiModule was updated.

When we open our UiModule in our editor, we see that it added an import for our LayoutComponent and added it to the declarations array in the NgModule decorator.

The declarations array declares the existence of components in a module so Angular knows that they exist and can be used:

import { NgModule } from '@angular/core';
import { CommonModule } from '@angular/common';

@NgModule({
  imports: [
    CommonModule
  ],
  declarations: []
})
export class UiModule { }

Adding a New Route

As described earlier in this section, we will use our LayoutComponent as the base for the whole application. It will display our header, footer, and an outlet to show our actual application screens.

We will leverage Angular's built-in routing mechanism to do this. We will do this by adding a new route to the routing array, and reference the LayoutComponent in this route's component:

  1. Open the src/app/app-routing.module.ts file.

  2. Add an import to the list of imports on the top of the file:

    import { LayoutComponent } from './ui/components/layout/layout.component'
  3. Inside the empty array that is assigned to the routes property, we add a new object literal.

  4. Add the path property and set its value to an empty string ''.

  5. Add the component property and set its value to the reference LayoutComponent that we just imported. The line of code that we add to our routes array is as follows:

    { path: '', component: LayoutComponent, children: [] },

For reference, the complete file should look like this:

import { NgModule } from '@angular/core';
import { Routes, RouterModule } from '@angular/router';
import { LayoutComponent } from './ui/components/layout/layout.component'

const routes: Routes = [
  { path: '', component: LayoutComponent, children: [] },
];

@NgModule({
  imports: [RouterModule.forRoot(routes)],
  exports: [RouterModule]
})
export class AppRoutingModule { }

When our application refreshes, we should see the text layout works!:

Building Our Layout

Let's get rid of this default text and start building our actual layout:

  1. Open the src/app/ui/layout/layout.component.ts file.

  2. Get rid of the contents of the template property.

  3. Add the following contents to the empty template string:

    app-header placeholder
    <div class="container my-5">
       <router-outlet></router-outlet>
    </div>
    app-footer placeholder

When we save our file, we see that our browser outputs a blank page.

Looking in the Console tab from Chrome Developer Tools, we see that we have an error stating Template parse errors: 'router-outlet' is not a known element:

In order to make Angular aware of how to render the router-outlet, we need to import the RouterModule:

  1. Open the src/app/ui/ui.module.ts file.

  2. Add an import statement to the list of imports on the top of the file:

    import { RouterModule } from '@angular/router';
  3. Add a reference to the RouterModule inside the imports array in the NgModule decorator.

When we now save the file, we should see the placeholders for our header and footer, with some white space in-between and the router error is now gone from our console:

Now that that's done, let's add some content to the placeholders!

Creating the HeaderComponent

In this section, we will use ng generate to create the HeaderComponent inside the UiModule, reference the HeaderComponent from our LayoutComponent so it gets displayed, and implement the navigation bar with a dynamic title and items.

We will be using the ng generate command to create our HeaderComponent:

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

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

    ng g c ui/components/header

When we look at the output, we see that our component was created in the new src/app/ui/header directory and that our UiModule was updated, just as we would expect after having done the same for our LayoutComponent:

Updating the LayoutComponent to Reference Our New HeaderComponent

Now, we will update the LayoutComponent so that it references our new HeaderComponent instead of our app-header placeholder:

  1. Open the src/app/ui/components/layout/layout.component.ts file.

  2. Find the app-header placeholder and replace it with the following tag:

    <app-header></app-header>

When we see our application refresh in our browser, we see that we now have the string header works! instead of the placeholder:

We can now start implementing our actual header so that our pages finally start to look like an app!

Creating the Actual Header

Now we will create the actual header. We will define three class properties, a string property for the application logo and title, and an array of objects that represent the links we want to display in our header.

In the template, we will create a Bootstrap navbar consisting of a nav element with some styles, a link with our logo and title, and the actual navigation links.

Note

More information on how to use the navbar can be found here: https://getbootstrap.com/docs/4.0/components/navbar/

  1. Download the file from https://angular.io/assets/images/logos/angular/angular.svg and store it as src/assets/logo.svg.

  2. Open the src/app/ui/components/header/header.component.ts file.

  3. Inside the component class, we add three new properties:

    public logo = 'assets/logo.svg';
    public title = 'Angular Social';
    public items = [{ label: 'Posts', url: '/posts'}];
  4. Replace the contents of the template property with the following markup:

    <nav class="navbar navbar-expand navbar-dark bg-dark">
       <a class="navbar-brand" routerLink="/">
         <img [src]="logo" width="30" height="30" alt="">
    
       </a>
       <div class="collapse navbar-collapse">
         <ul class="navbar-nav">
           <li class="nav-item" *ngFor="let item of items" routerLinkActive="active">
             <a class="nav-link" [routerLink]="item.url">{{item.label}}</a>
           </li>
         </ul>
       </div>
    </nav>

When we save this file and check in our browser, we finally see the first real part of the application being displayed. Things will move quickly from now on:

Let's apply the knowledge we have gained in this section to build the FooterComponent.

Creating the FooterComponent

In this section, we will use ng generate to create the FooterComponent inside the UiModule, reference the FooterComponent from our LayoutComponent so it gets displayed, and implement the footer and add a small copyright message.

We will be using the ng generate command to create our FooterComponent:

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

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

    $ ng g c ui/components/footer

When we look at the output, we see that our component got created in the new src/app/ui/footer directory and that our UiModule was updated, similar to what happened in the previous sections:

Updating the LayoutComponent to Reference Our New FooterComponent

We will update the LayoutComponent so that it references our new FooterComponent instead of our app-footer placeholder:

  1. Open the src/app/ui/components/layout/layout.component.ts file.

  2. Find the app-footer placeholder and replace it with the following tag:

    <app-footer></app-footer>

Just like with our header, we see after refreshing our application that we now have the string footer works! instead of the placeholder:

The last step is to implement the footer and our base layout is done!

Creating the Actual Footer

Now we will create the actual footer. We will define two class properties, a string property for the name of the developer, and the year.

In the template, we will create another Bootstrap navbar consisting of a nav element with some styles and the copyright message that uses both string properties we defined in our component class:

  1. Open the src/app/ui/components/footer/footer.component.ts file.

  2. Inside the component class, add the following property. Don't forget to update the two placeholders with the right data:

      public developer = 'YOUR_NAME_PLACEHOLDER';
      public year = 'YEAR_PLACEHOLDER';
  3. Get rid of the contents of the template property.

  4. Replace the contents of the template property with the following markup:

    <nav class="navbar fixed-bottom navbar-expand navbar-dark bg-dark">
       <div class="navbar-text m-auto">
          {{developer}} <i class="fa fa-copyright"></i> {{year}}
       </div>
    </nav>

When we save this file and check in our browser, we finally see that the footer is being rendered:

We are done with our layout! In this section, we've built our header and footer components. We've also built our layout component and created a UiModule. Let's get to building our actual application logic.

Summary


In this lesson, we installed Angular CLI and created the Angular application. We set a few default settings and configured our global styles with Bootstrap and Font Awesome. We then created the basic UI and layout of our app. Finally, we implemented a header and a footer in our app.

In the next lesson, we will create the application module and components.

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.

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 Edition
Language : English
ISBN-13 : 9781789342161
Vendor :
Google

What do you get with eBook?

Product feature icon Instant access to your Digital eBook purchase
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

Product Details

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

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 $ 38.98 57.98 19.00 saved
Angular 6 for Enterprise-Ready Web Applications
$29.99 $43.99
Beginning Server-Side Application Development with Angular
$8.99 $13.99
=
Book stack Total $ 38.98 57.98 19.00 saved Stars icon

Table of Contents

10 Chapters
Beginning Server-Side Application Development with Angular Chevron down icon Chevron up icon
Credits Chevron down icon Chevron up icon
Contributors Chevron down icon Chevron up icon
Chevron down icon Chevron up icon
Preface Chevron down icon Chevron up icon
1. Creating the Base Application Chevron down icon Chevron up icon
2. Creating the Application Module and Components Chevron down icon Chevron up icon
3. Server-Side Rendering Chevron down icon Chevron up icon
4. Service Workers Chevron down icon Chevron up icon
Index 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

How do I buy and download an eBook? Chevron down icon Chevron up icon

Where there is an eBook version of a title available, you can buy it from the book details for that title. Add either the standalone eBook or the eBook and print book bundle to your shopping cart. Your eBook will show in your cart as a product on its own. After completing checkout and payment in the normal way, you will receive your receipt on the screen containing a link to a personalised PDF download file. This link will remain active for 30 days. You can download backup copies of the file by logging in to your account at any time.

If you already have Adobe reader installed, then clicking on the link will download and open the PDF file directly. If you don't, then save the PDF file on your machine and download the Reader to view it.

Please Note: Packt eBooks are non-returnable and non-refundable.

Packt eBook and Licensing When you buy an eBook from Packt Publishing, completing your purchase means you accept the terms of our licence agreement. Please read the full text of the agreement. In it we have tried to balance the need for the ebook to be usable for you the reader with our needs to protect the rights of us as Publishers and of our authors. In summary, the agreement says:

  • You may make copies of your eBook for your own use onto any machine
  • You may not pass copies of the eBook on to anyone else
How can I make a purchase on your website? Chevron down icon Chevron up icon

If you want to purchase a video course, eBook or Bundle (Print+eBook) please follow below steps:

  1. Register on our website using your email address and the password.
  2. Search for the title by name or ISBN using the search option.
  3. Select the title you want to purchase.
  4. Choose the format you wish to purchase the title in; if you order the Print Book, you get a free eBook copy of the same title. 
  5. Proceed with the checkout process (payment to be made using Credit Card, Debit Cart, or PayPal)
Where can I access support around an eBook? Chevron down icon Chevron up icon
  • If you experience a problem with using or installing Adobe Reader, the contact Adobe directly.
  • To view the errata for the book, see www.packtpub.com/support and view the pages for the title you have.
  • To view your account details or to download a new copy of the book go to www.packtpub.com/account
  • To contact us directly if a problem is not resolved, use www.packtpub.com/contact-us
What eBook formats do Packt support? Chevron down icon Chevron up icon

Our eBooks are currently available in a variety of formats such as PDF and ePubs. In the future, this may well change with trends and development in technology, but please note that our PDFs are not Adobe eBook Reader format, which has greater restrictions on security.

You will need to use Adobe Reader v9 or later in order to read Packt's PDF eBooks.

What are the benefits of eBooks? Chevron down icon Chevron up icon
  • You can get the information you need immediately
  • You can easily take them with you on a laptop
  • You can download them an unlimited number of times
  • You can print them out
  • They are copy-paste enabled
  • They are searchable
  • There is no password protection
  • They are lower price than print
  • They save resources and space
What is an eBook? Chevron down icon Chevron up icon

Packt eBooks are a complete electronic version of the print edition, available in PDF and ePub formats. Every piece of content down to the page numbering is the same. Because we save the costs of printing and shipping the book to you, we are able to offer eBooks at a lower cost than print editions.

When you have purchased an eBook, simply login to your account and click on the link in Your Download Area. We recommend you saving the file to your hard drive before opening it.

For optimal viewing of our eBooks, we recommend you download and install the free Adobe Reader version 9.