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! discount-offer-chevron-icon
Savings automatically calculated. No voucher code required.
Arrow left icon
Explore Products
Best Sellers
New Releases
Books
Videos
Audiobooks
Learning Hub
Newsletter Hub
Free Learning
Arrow right icon
timer SALE ENDS IN
0 Days
:
00 Hours
:
00 Minutes
:
00 Seconds
Angular Projects
Angular Projects

Angular Projects: Build modern web apps in Angular 16 with 10 different projects and cutting-edge technologies , Third Edition

eBook
€22.99 €25.99
Paperback
€31.99
Subscription
Free Trial
Renews at €18.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
Product feature icon AI Assistant (beta) to help accelerate your learning
OR
Modal Close icon
Payment Processing...
tick Completed

Billing Address

Table of content icon View table of contents Preview book icon Preview Book

Angular Projects

Building an SPA Application with Scully and Angular Router

Angular applications follow the Single-Page Application (SPA) architecture, where different views of the web page can be activated using the URL in the browser. Any changes to that URL can be intercepted by the Angular router and translated to routes that can activate a particular Angular component.

Scully is a popular static website generator that is based on the Jamstack architecture. It can cooperate nicely with the Angular router to prerender the content of an Angular application according to each route.

In this chapter, we are going to combine Angular and Scully to create a personal blog. The following topics are going to be covered:

  • Setting up routing in an Angular application
  • Creating the basic layout of our blog
  • Configuring routing for our application
  • Adding blog capabilities with Scully
  • Displaying blog posts on the home page

Essential background theory and context

In the old days of web development, client-side applications were highly coupled with the underlying server infrastructure. Much machinery was involved when we wanted to visit the page of a website using a URL.

The browser would send the requested URL to the server, and the server should respond with a matching HTML file for that URL. This was a complicated process that would result in delays and varying round-trip times.

Modern web applications eliminate these problems using the SPA architecture. A client needs to request a single HTML file only once from the server. Any subsequent changes to the URL of the browser are handled internally by the client infrastructure. In Angular, the router is responsible for intercepting in-app URL requests and handling them according to a defined route configuration.

Jamstack is a hot emerging technology that allows us to create fast and secure web applications. It can be used for any application type, ranging from an e-commerce website to a Software as a Service (SaaS) web application or even a personal blog. The architecture of Jamstack is based on the following pillars:

  • Performance: Pages are generated and prerendered during production, eliminating the need to wait for content to load.
  • Scaling: Content is static files that can be served from anywhere, even from a Content Delivery Network (CDN) provider that improves the performance of the application.
  • Security: The serverless nature of server-side processes and the fact that content is already static eliminates potential attacks that target server infrastructures.

Scully is the first static website generator for Angular that embraces the Jamstack approach. It essentially generates pages of the Angular application during build time to be immediately available when requested.

Project overview

In this project, we will build a personal blog using the Angular framework and enhance it with Jamstack characteristics using the Scully site generator. Initially, we will scaffold a new Angular application and enable it for routing. We will then create the basic layout of our application by adding some barebones components. As soon as we have a working Angular application, we will add blog support to it using Scully. We will then create some blog posts using Markdown files and display them on the home page of our application. The following diagram depicts an architectural overview of the project:

Εικόνα που περιέχει κείμενο, διάγραμμα, σκίτσο/σχέδιο, γραμμή  Περιγραφή που δημιουργήθηκε αυτόματα

Figure 2.1 – Project architecture

Build time: 1 hour.

Left arrow icon Right arrow icon
Download code icon Download Code

Key benefits

  • Explore Angular's capabilities for cross-platform app development
  • Combine Angular with popular web technologies such as Nx monorepos, server-side rendering, and progressive web apps
  • Build your own libraries and schematics using Angular CDK and Angular CL

Description

Angular Projects isn't like other books on Angular – this is a project-based guide that helps budding Angular developers get hands-on experience while developing cutting-edge applications. In this updated third edition, you’ll master the essential features of the framework by creating ten different real-world web applications. Each application will demonstrate how to integrate Angular with a different library and tool, giving you a 360-degree view of what the Angular ecosystem makes possible. Updated to the newest version of Angular, the book has been revamped to keep up with the latest technologies. You’ll work on a PWA weather application, a mobile photo geotagging application, a component UI library, and other exciting projects. In doing so, you’ll implement popular technologies such as Angular Router, Scully, Electron, Angular service workers, Jamstack, NgRx, and more. By the end of this book, you will have the skills you need to build Angular apps using a variety of different technologies according to your or your client’s needs.

Who is this book for?

This book is for developers with beginner-level Angular experience who want to become proficient in using essential tools and dealing with the various use cases in Angular. Beginner-level knowledge of web application development and basic experience of working with ES6 or TypeScript is essential before you dive in. This book focuses on practical applications of Angular. If you want to deepen your understanding of this framework, we recommend that you also look at Learning Angular from the same author.

What you will learn

  • Set up Angular applications using Angular CLI and Nx Console
  • Create a personal blog with Jamstack, Scully plugins, and SPA techniques
  • Build an issue management system using typed reactive forms
  • Use PWA techniques to enhance user experience
  • Make SEO-friendly web pages with server-side rendering
  • Create a monorepo application using Nx tools and NgRx for state management
  • Focus on mobile application development using Ionic
  • Develop custom schematics by extending Angular CLI

Product Details

Country selected
Publication date, Length, Edition, Language, ISBN-13
Publication date : Jul 19, 2023
Length: 312 pages
Edition : 3rd
Language : English
ISBN-13 : 9781803243306
Vendor :
Google
Languages :
Tools :

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 feature icon AI Assistant (beta) to help accelerate your learning
OR
Modal Close icon
Payment Processing...
tick Completed

Billing Address

Product Details

Publication date : Jul 19, 2023
Length: 312 pages
Edition : 3rd
Language : English
ISBN-13 : 9781803243306
Vendor :
Google
Languages :
Tools :

Packt Subscriptions

See our plans and pricing
Modal Close icon
€18.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
€189.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
€264.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 105.97
Learning Angular
€41.99
Angular Projects
€31.99
Angular Cookbook
€31.99
Total 105.97 Stars icon

Table of Contents

12 Chapters
Creating Your First Web Application in Angular Chevron down icon Chevron up icon
Building an SPA Application with Scully and Angular Router Chevron down icon Chevron up icon
Building an Issue Tracking System Using Reactive Forms Chevron down icon Chevron up icon
Building a PWA Weather Application Using Angular Service Worker Chevron down icon Chevron up icon
Building a WYSIWYG Editor for the Desktop Using Electron Chevron down icon Chevron up icon
Building a Mobile Photo Geotagging Application Using Capacitor and 3D Maps Chevron down icon Chevron up icon
Building an SSR Application for a GitHub Portfolio Using Angular Chevron down icon Chevron up icon
Building an Enterprise Portal Using Nx Monorepo Tools and NgRx Chevron down icon Chevron up icon
Building a Component UI Library Using Angular CLI and Angular CDK Chevron down icon Chevron up icon
Customizing Angular CLI Commands Using Schematics Chevron down icon Chevron up icon
Other Books You May Enjoy Chevron down icon Chevron up icon
Index Chevron down icon Chevron up icon

Customer reviews

Top Reviews
Rating distribution
Full star icon Full star icon Full star icon Full star icon Half star icon 4.4
(20 Ratings)
5 star 65%
4 star 20%
3 star 5%
2 star 5%
1 star 5%
Filter icon Filter
Top Reviews

Filter reviews by




Faizou Aremou Nov 26, 2023
Full star icon Full star icon Full star icon Full star icon Full star icon 5
Feefo Verified review Feefo
Pranam Bhat Nov 27, 2023
Full star icon Full star icon Full star icon Full star icon Full star icon 5
The media could not be loaded. Recently I brought this book for building Angular projects. I'm an Angular developer who work on Full Stack project's. With the help of this book, I can easily create, build and manage new Angular projects.This book is really helpful for Angular developers to learn and upskill latest Angular changes including Nx Tools, NgRx, Service Workers, Routing and PWA to enhance the user experience.They gave clear cut picture by demonstrating step by step code/commands to integrate Angular with a different libraries and achieve the goal.I would suggest this book for my colleagues and friends who are new to Angular and those who want to improve their skills on Angular.
Amazon Verified review Amazon
Mili Aug 26, 2023
Full star icon Full star icon Full star icon Full star icon Full star icon 5
With more than 10 different projects, step by step process and easy to understand, this book is a MUST if you’re learning Angular 🔥✨ 10/10
Amazon Verified review Amazon
Federico Jul 20, 2023
Full star icon Full star icon Full star icon Full star icon Full star icon 5
I knew the book well before I read it, because I had read the previous edition. Even though I’m quite comfortable with my own coding best practices with angular, I read it to confirm my coding practices and to be able to discuss it with any angular enthusiast.The book contains small and easily digestible chapters. It uses TypeScript. If you're not familiar with TS, you should take a look before reading it (Any TypeScript 101 guide is enough).The book starts with the fundamentals of Angular and then continues with real-life projects to develop and improve your skills. You will learn a broad spectrum of Angular best practices, from using the Angular CLI, Nx to SSR and more.This book is a must for any Angular Developer or Frontend developer looking into Angular.Good job Aristeidis!
Amazon Verified review Amazon
Keith Atherton Aug 15, 2023
Full star icon Full star icon Full star icon Full star icon Full star icon 5
The walkthroughs for getting started and creating your first Angular app were very clear, particularly useful for someone new to using Angular.I particularly liked that each project covers different elements such as using forms, SPA, PWA, etc.The book is very well written with straightforward diagrams where required. I would highly recommend this if you're getting started with Angular.
Amazon Verified review Amazon
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.