Angular Workshop E-Book

Abdelfattah Ragab

• Herausgeber: tredition
• Kategorie: Wissenschaft und neue Technologien
• Sprache: Englisch

Seitenzahl: 37

Veröffentlichungsjahr: 2025

Beschreibung

Welcome to the book “Angular Workshop: From beginner to pro, Building Applications for the real world”. In this book I will explain to you from scratch how to create a professional Angular application. The interface looks simple, but the functionality is powerful and real. If you want to familiarise yourself with Angular, I highly recommend this book. In this hands-on book, we will create a simple application with a shopping cart using the latest Angular v19.2 and NgRx SignalStore. By the end of this book, you will have all the tools you need to create a real application. Let us get started.

Leseprobe

Angular Workshop

From Beginner to Pro, Creating Applications for the Real World

Abdelfattah Ragab

Source code

The source code is available on the book's website

https://books.abdelfattah-ragab.com

Introduction

Welcome to the book “Angular Workshop: From beginner to pro, Building Applications for the real world”.

In this book I will explain to you from scratch how to create a professional Angular application. The interface looks simple, but the functionality is powerful and real.

If you want to familiarise yourself with Angular, I highly recommend this book.

In this hands-on book, we will create a simple application with a shopping cart using the latest Angular v19.2 and NgRx SignalStore.

By the end of this book, you will have all the tools you need to create a real application.

Let us get started.

Install Node.js

Visite https://nodejs.org/en/download to download and install the node.js

After installation open the terminal and execute the following command to verify the installed Node.js version

node -v

And this command to verify the installed npm version

npm -v

Install the Angular CLI

To install the Angular CLI, open a terminal window and run the following command:

npm install -g @angular/cli

Install Visual Studio Code

Visual Studio Code is a code editor that we will use to develop our applications.

Go to https://code.visualstudio.com/ to download and install the application.

Create a new Application

Open a terminal window where you want to create the project and execute the following command:

ng new my-app

Run the Application

Run the following command

ng serve --open

Open the Project in VS Code

Open Visual Studio Code and choose “Open Folder…”.

Open the folder of your project.

Terminal in Visual Studio Code

You can open the terminal from within the Visual Studio Code.

You can open many terminals and also set the default:

Explorer

To the left you will find the explorer with a tree of the project folders and files

index.html

In the “src” folder you will find the “index.html” file.

You can set the application title, the app icon, the SEO details and other metadata.

The “public” folder

We put the static images and so on in the public folder. They will be available to all users without restrictions, they are simply public. Things like logo, background image, and so on.

The “styles.css” file

We put global styles in this file. It will be applied to the whole application.

Things like the styles of the html, the body or the declaration of the :root variables.

The “main.ts” file

This file links the index.html file to the Angular application. Most of the time, there is nothing to do with this file.

The “app.config.ts” file

This is where we configure our application. You will need to visit this file everytime you add a new library. Almost all libraries will ask you to add a new configuration line here in this file to be able to use it.

The “app.routes.ts” file

Here we configure the application routes. Routes are simply the paths in our application that we write in the address bar, “/about” for example.

We define what component Angular should load for the “/about” path.

The “package.json” file

The package.json file is important for managing dependencies and project settings. It contains metadata about the project, such as name and version, and lists the npm packages required for the application and development tools.

The “package-lock.json” file

The package-lock.json file is an automatically generated file that accompanies the package.json. Its primary purpose is to lock the versions of all dependencies and their sub-dependencies to ensure consistent installations across different environments. This file captures the entire dependency tree, including minor and patch versions, which helps maintain stability in the application as it evolves.

The “angular.json” file

The angular.json file is primarily used by the Angular CLI. It contains settings that define the structure and behavior of the project, including information about the project's root directory, build configurations, and the various assets and styles to be included. This file allows developers to manage multiple projects within a single workspace and customize build options for different environments, such as development and production. Essentially, angular.json serves as the main source of configuration for the entire Angular application, guiding how the project is built and served

The “tsconfig.json” file