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:
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:
- Git: A free and open source distributed version control system. You can download it from https://git-scm.com.
- VSCode: A code editor that you can download from https://code.visualstudio.com/Download.
- Angular CLI: The command-line interface for Angular that we introduced in the Essential background theory and context section.
- GitHub material: The related code for this chapter can be found in the
Chapter01
folder at https://github.com/PacktPublishing/Angular-Projects-Second-Edition.
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:
- Initially, it will ask whether we want to enable routing in our Angular application:
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:
- Open VSCode and click on the Extensions menu in the sidebar:
- In the EXTENSIONS pane that appears, type
Nx Console
. - 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:
- What is the basic building block of an Angular application?
- How do we group components of similar functionality?
- Who is responsible for handling business logic tasks in an Angular application?
- Which Angular CLI command can we use to create a new Angular application?
- Which Angular CLI command can we use to serve an Angular application?
- How do we declare an Angular component in HTML?
- How do we declare Angular components in a module?
- What syntax do we use for text binding on HTML templates?
- What is the benefit of using the Nx Console?
- 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:
- Introduction to Basic Concepts: https://angular.io/guide/architecture
- Interpolation: https://angular.io/guide/interpolation
- Nx Console: https://nx.dev/latest/angular/cli/console
- Angular Essentials: https://marketplace.visualstudio.com/items?itemName=johnpapa.angular-essentials
- Angular Evergreen: https://expertlysimple.io/get-evergreen