Angular Projects - Second Edition

4 (4 reviews total)
By Aristeidis Bampakos
    What do you get with a Packt Subscription?

  • Instant access to this title and 7,500+ eBooks & Videos
  • Constantly updated with 100+ new titles each month
  • Breadth and depth in over 1,000+ technologies
  1. Free Chapter
    Chapter 2: Building an SPA Application with Scully and Angular Router
About this book

Packed with practical advice and detailed recipes, this updated second edition of Angular Projects will teach you everything you need to know to build efficient and optimized web applications using Angular.

Among the things you’ll learn in this book are the essential features of the framework, which you’ll master by creating ten different real-world web applications. Each application will demonstrate how to integrate Angular with a different library and tool.

As you advance, you’ll familiarize yourself with implementing popular technologies, such as Angular Router, Scully, Electron, Angular service worker, Nx monorepo tools, NgRx, and more while building an issue tracking system. You’ll also work on a PWA weather application, a mobile photo geotagging application, a component UI library, and many other exciting projects.

In the later chapters, you’ll get to grips with customizing Angular CLI commands using schematics.

By the end of this book, you will have the skills you need to be able to build Angular apps using a variety of different technologies according to your or your client’s needs.

Publication date:
July 2021
Publisher
Packt
Pages
344
ISBN
9781800205260

 

Chapter 1: Creating Your First Web Application in Angular

Angular is a popular and modern JavaScript framework that can run on different platforms additional to the web, such as desktop and mobile. Angular applications are written in TypeScript, a superset of JavaScript that provides syntactic sugar such as strong typing and object-oriented techniques.

Angular applications are created and developed using a command-line tool made by the Angular team called the Angular CLI. It automates many development tasks, such as scaffolding, testing, and deploying an Angular application, which would take a lot of time to configure manually.

The popularity of the Angular framework is considerably reflected in its broad support of tooling. The Visual Studio Code (VSCode) editor contains various extensions that enhance the development experience when working with Angular.

In this chapter, we will cover the following topics:

  • Introduction to Angular
  • Introduction to the Angular CLI...
 

Essential background theory and context

The Angular framework is a cross-platform JavaScript framework that can run on a wide range of environments, including the web, servers, mobile, and desktop. It consists of a collection of JavaScript libraries that we can use for building highly performant and scalable web applications. The architecture of an Angular application is based on a hierarchical representation of components. Components are the fundamental building blocks of an Angular application. They represent and control a particular portion of a web page called the view. Some examples of components are as follows:

  • A list of blog posts
  • An issue reporting form
  • A weather display widget

Components of an Angular application can be logically organized as a tree:

Figure 1.1 – Component tree

Figure 1.1 – Component tree

An Angular application typically has one main component, called AppComponent, by convention. Each component in the tree can communicate and...

 

Project overview

In this project, we will use the Angular CLI to create a new Angular application from scratch. Then, we will interact with the core functionality of the Angular framework to make a simple change to our application. Finally, we will learn how to use the Nx Console extension to build and serve our application.

Build time: 15 minutes.

 

Getting started

The following software tools are required to complete this project:

 

Creating our first Angular application

To create a fresh new Angular application, we must execute the ng new command of the Angular CLI, passing the name of the application as an option:

ng new my-angular

The new command is used to create a new Angular application or a new Angular workspace. An Angular workspace is an Angular CLI project that contains one or more Angular applications, where some of them can be Angular libraries. So, when we execute the ng new command, we create an Angular workspace with an Angular application by default.

In the previous command, the name of our Angular application is my-angular. Upon executing the command, the Angular CLI will ask some questions to collect as much information as possible regarding the nature of the application that we want to create. Let's take a look:

  1. Initially, it will ask whether we want to enable routing in our Angular application:

    Figure 1.9 – Angular routing

    Figure 1.9 – Angular routing

    Routing in Angular is all about navigating...

 

Interacting with the Angular framework

When working with Angular, the real fun starts when we get our hands dirty with the framework itself. Understanding how Angular works and writing the application code is what matters, after all.

The application source code resides inside the src\app folder, in the root of our Angular CLI project. It contains all the files needed to build and test our Angular application, including a component and a module. The component is the main component of the Angular application:

app.component.ts

import { Component } from '@angular/core';
@Component({
  selector: 'app-root',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.css']
})
export class AppComponent {
  title = 'my-angular';
}

The following properties characterize an Angular component:

  • selector: A unique name that is used to identify and declare the component inside HTML...
 

Building our application with Nx Console

The Angular CLI is a command-line tool with a variety of commands. Each command can accept a wide range of options and parameters according to the task that we want to accomplish. The process of remembering these commands and their options off by heart is daunting and time-consuming. In such cases, the ecosystem of Angular tooling can come in handy. VSCode Marketplace contains many useful extensions that we can install to help us during Angular development. One of these extensions is the Nx Console, which provides a user interface over the Angular CLI. To install the Nx Console in your environment, follow these steps:

  1. Open VSCode and click on the Extensions menu in the sidebar:
    Figure 1.15 – VSCode Extensions

    Figure 1.15 – VSCode Extensions

  2. In the EXTENSIONS pane that appears, type Nx Console.
  3. Click the Install button on the first item to install the Nx Console extension.

The Nx Console extension is now installed globally in our environment, which...

 

Summary

In this chapter, we learned about the basic principles of the Angular framework and provided a brief overview of the Angular architecture. We saw some popular extensions for VSCode that we can use to enhance our development experience while working with Angular.

Then, we learned how to use the Angular CLI, a powerful tool of the Angular ecosystem, to scaffold and build a new Angular application from scratch. We also made our first interaction with Angular code by modifying the Angular component of a typical Angular CLI application. Finally, we installed the Nx Console extension and learned how to build our application with it.

In the next chapter, we will look at the Angular Router and learn how to use it to create a personal blog using the Scully static website generator.

 

Practice questions

Let's take a look at a few practice questions:

  1. What is the basic building block of an Angular application?
  2. How do we group components of similar functionality?
  3. Who is responsible for handling business logic tasks in an Angular application?
  4. Which Angular CLI command can we use to create a new Angular application?
  5. Which Angular CLI command can we use to serve an Angular application?
  6. How do we declare an Angular component in HTML?
  7. How do we declare Angular components in a module?
  8. What syntax do we use for text binding on HTML templates?
  9. What is the benefit of using the Nx Console?
  10. Which extension do we use to perform static analysis in our Angular code?
 

Further reading

Here are some links to build upon what we learned in the chapter:

About the Author
  • Aristeidis Bampakos

    Aristeidis Bampakos is an experienced frontend web developer and a Google Developer Expert for the Angular framework. Since 2011, he has mainly focused on developing applications with AngularJS and Angular frameworks, Typescript, and Angular Material. He is currently working at Plex-Earth where he specializes in Angular development and also works as an Angular Senior Tech Instructor for CodeHub where he teaches the Angular framework to other developers and individuals.

    Browse publications by this author
Latest Reviews (4 reviews total)
It is an excellent book, with real life content and many great tips.
Achat d'un excellent produit.
I paid but my book was not delivered to me.
Recommended For You
Angular Projects - Second Edition
Unlock this book and the full library FREE for 7 days
Start now