Angular is a framework that has the motto “batteries included” as a development philosophy. This means that practically all the resources you need for your frontend application needs are already available as soon as you create anew project.

In this chapter, you will understand why choose Angular for your web application, what its main characteristics and design are, and why companies, especially the biggest ones, choose Angular as the main framework for developingsingle-page applications.

You will explore the technologies that make up the framework and thus take greater advantage of possible alternatives if you need them for a specific case. You’ll also set up your workspace with the best tools to help you and yourteam’s productivity.

In this chapter, we’re going to cover thefollowing topics:

• Whychoose Angular?
• What technologies are present inthe ecosystem?
• Configuring yourdevelopment environment
• Starting anAngular project
• Using the AngularCommand-Line Interface (CLI) foryour productivity

By the end of this chapter, you will have arguments for using Angular in your project and be more productive in yourdevelopment workspace.

To follow the instructions in this chapter, you’ll needthe following:

• Visual Studio Code (VSCode) (https://code.visualstudio.com/Download)
• Node.js 18 orhigher (https://nodejs.org/en/download/)

The code files for this chapter are availableat.

Thechoice of technology to be used in a given project is critical to its success. You, as a project developer or architect, must help your team in this mission by choosing the best tool forthe job.

The Angular framework is one of the most used tools for building a single-page application, along with React and Vue. When choosing the right tool for the job, you need toanswerwhy.

The following are some arguments forchoosing Angular.

Batteries included

Angular is an opinionated framework, which means that the Angular development team has already made several choices of tools and solutions for every challenge that a web application can have. This way, you and your team don’t have to research which route engine or state management library you should use; it’s all included and configured foryour project.

This feature also simplifies the onboarding of new developers in your team. Following the guidelines proposed by the documentation and using the best practices, Angular projects usually have the same structure and method of development. Knowing Angular you can quickly locate yourself in anyongoing project.

Google support

Angular was created and maintained by the Angular team at Google. Although excellent frameworks such as Vue.js and Svelte are maintained only by their communities, having such a big tech company supporting the framework brings security to the choice of technology, especially forlarge companies.

In addition, Angular is used in more than 300 internal applications and Google products, which means stability and quality because, before each new version of the framework is released, it is validated in allthese applications.

The Angular team has strived since version 13 to increase transparency within the community by releasing a roadmap (https://angular.io/guide/roadmap) detailing all the improvements inprogress and what to expect for the future of the framework, giving you peace of mind that it will be supported for yearsto come.

Community

Technology is only as alive as the community that supports it, and Angular has a huge one. Meetups, podcasts, events, articles, and videos – the Angular community has many resources tohelp developers.

The people who make up this community also have the important contribution of giving feedback, creating and correcting issues in Angular. As it is an open source project, everyone is invited to evaluate and contribute tothe code.

The Angular team also asks the community for help with major framework decisions throughRequests forComment (RFCs).

In addition, the community creates many libraries that expand the possibilities of the framework, such as NgRx (https://ngrx.io/) for advanced state management and Transloco (https://ngneat.github.io/transloco/) to support internationalization,amongothers.

Tooling

One of thedifferentiating factors of Angular compared to its competitors is the focus from the beginning on tooling and developer experience. The Angular CLI tool is a powerful productivity tool that we will explore in this chapter, which is used far beyond the simple creation and setup ofa project.

From a testing point of view, Angular is already equipped and configured with Karma as a test runner and Jasmine as a configuration tool. Angular’s tooling already configures the project build using webpack and already has adev server.

The tool is also extensible, allowingthe community to create routines for configuring and updatingtheir libraries.

With these arguments, you will be able to base your choice of Angular on your project; let’s see now which technologies make up theframework’secosystem.

The Angular team, when creating the solution for the growing complexity of web application development, decided to unite the best tools and libraries in an opinionated package with the maximum number of configurations madeby default.

We then have the following libraries that make up the coreof Angular.

TypeScript

TypeScript is a superset of the JavaScript language thatadds type checking and other features to the language, ensuring a better developerexperience and security forweb development.

It has been present in Angular since its first version and is the cornerstone of the framework that enables several features such as dependency injection, typed forms andAngular’s tooling.

TypeScript is currently the preferred tool for backend development in Node.js and is encouraged by communities of other frameworks such as Reactand Vue.js.

RXJS

RXJS is a library that implements thereactive paradigm (https://www.reactivemanifesto.org/) in theJavaScript language.

Since the first version of Angular, reactivity was a core theme that the framework wanted to achieve and so it uses theRXJS library to helpwith it.

HTTP requests, routes, forms, and other Angular elements use the concepts of observables and their operators to provide Angular developers with the tools to create more fluid and dynamic applications with lessboilerplate code.

RXJS also providesmechanisms for state management in a frontend application without the need to use more complex patterns suchas Redux.

Karma and Jasmine

Quality should be the top priority in any application and this is especially important in frontendapplicationsas for the user, it isthe application.

One of the ways to attest to quality is through testing, and with that in mind, Angular already comes by default with the tool duo ofJasmineandKarma.

Jasmineis a framework for unit-testing JavaScript and TypeScript applications with several functions for assertion andtest assembly.

Karma is thetest runner, that is, the environment where the unit test setup is executed with the help of Jasmine. This environment, configured in its configuration file, runs in browsers, making the test more realistic in comparison to customers’daily lives.

Many people in the community switch these tools for the Jest framework due to performance in the execution of the tests, which is totally fine and even facilitated by the Angular CLI; however, it should be noted that this tool does not run in a browser, which really improves the performance of the test execution but may hide some particularity that only testing in abrowserwould provide.

Webpack

After the development of an application, it is necessary to create the bundle to send it to production, and Webpack is the tool that the Angular team chose forthis task.

Webpack is a very powerful and versatile bundler, and it is thanks to it that the framework manages to make some interesting optimizations such as tree shaking andlazy loadingof bundles.

However, Webpack is complex in its configuration, and with that in mind, theAngular team has already set up and created some abstractions for fine-tuning the tool, such as theangular.json file.

We understand what pieces make up the framework and how they relate to delivering rich and fluid interfaces. We will now set up ourdevelopment environment.

A well-organizedenvironment with the right tools is the first step toward excellence and productivity; now, let’s set this environment up inyour workspace.

After installing Node.js following the instructions in theTechnical requirements section, the following tools and their plugins will help you inyour workflow.

VS Code

VS Code (https://code.visualstudio.com/) is currentlythe default tool for most developers, especially forfrontend projects.

There are other very good ones such as WebStorm (https://www.jetbrains.com/webstorm), but VS Code, with its plugins especially for Angular projects, facilitates great productivityand ergonomics.

To install the plugins listed here, in the code editor, click onExtensions or use the shortcutCtrl +Shift +X (Windows) orCmd +Shift +X (macOS).

The following are the VS Code plugins recommended for developingAngular applications.

Git Extension Pack

Git Extension Pack (https://marketplace.visualstudio.com/items?itemName=donjayamanne.git-extension-pack) isnotspecifically for developing Angular applications but it is useful for any kindof work.

Git is the default tool for version control and VS Code has native support for it. This set of plugins improves this support even further, adding the ability to read comments and changes made in previous commits in the editor, support for multiple projects, and a better view of your repository historyand logs.

Angular Language Service

TheAngular Language Service (https://marketplace.visualstudio.com/items?itemName=Angular.ng-template) extension ismaintained by the Angular team and adds support for most of the framework’s functionality right from thecode editor.

By adding this extension to your editor, it will have thefollowing features:

• Autocomplete in the HTML template file, allowing you to use component methods without having to consult theTypeScript file
• Checking for possible compilation errors in HTML template files andTypeScript files
• Quick navigation between HTML and TypeScript templates, allowing you to consult the definition of methodsand objects

This extension is also available for other IDEs such as WebStormand Eclipse.

Prettier

Prettier (https://marketplace.visualstudio.com/items?itemName=esbenp.prettier-vscode) is a JavaScripttool that solvesthe code formatting problem. It is opinionated on formatting settings although some customizationis possible.

In addition to TypeScript, Prettier formats HTML, CSS, JSON, and JavaScript files, making this extension useful also for backend developmentusing Node.js.

To standardizeformatting across your entire team, you can install Prettier as a package for your project and run it on the project’s CI/CD track, which we’ll see inChapter 12,PackagingEverything – Best Practicesfor Deployment.

ESLint

When creating an application, the use of a linter is highly recommended to ensure good language practices and avoid errors from the beginningof development.

In the past, the default tool for linting TypeScript projectswasTSLint, but the project has beenabsorbed byESLint (https://marketplace.visualstudio.com/items?itemName=dbaeumer.vscode-eslint), which allows you to verify JavaScript andTypeScript projects.

With this extension, verification occurs quickly while you type the code of your project. ESLint can be installed as a package in your Angular project and thus performs this validation on the CI/CD conveyor of your project, whichwe will see inChapter 12,Packaging Everything – Best Practicesfor Deployment.

EditorConfig

TheEditorConfig (https://marketplace.visualstudio.com/items?itemName=EditorConfig.EditorConfig) plugin has the function of creating adefault configuration file for not only VS Code but also any IDE that supportsthis format.

This plugin is useful for standardizing things for your project and your team – for example, the number of spaces that eachTab key represents, or whether your project will usesingle quotes or double quotes torepresent strings.

To use it, just create or have a file named.editorconfig at the root of your project and VS Code will respect the settings described inthe file.

VS Code settings

VS Code, in addition to extensions, has severalnative settings that can help in your day-to-day work. By accessing theFile menu, we can activate the automatic saving flag so you don’t have to worry about pressingCtrl +S all the time (although this habit is already engraved in stone inour brains...).

Another interesting setting isZen mode, where all windows and menus are hidden so you can just focus on your code. To activate it, go toView |Appearance |Zen Mode, or use the keyboard shortcutCtrl +K +Z for Windows/Linux systems andCmd +K +Zfor macOS.

To improve the readability of your code during editing, an interesting setting isBracket coloring, which will give each parenthesis and bracket in your code adifferent color.

To enable this setting, open theconfiguration file using the shortcutCtrl +Shift +P for Windows/Linux orCmd +Shift +P for macOS and typeOpen UserSettings (JSON).

In the file, add thefollowing elements:

{  "editor.bracketPairColorization.enabled": true,  "editor.guides.bracketPairs": true}

VS Code also has theInlay Hints feature, which shows details of parameter types and return methods, as well as other useful information on the line you are reading inthe code.

To configure it in theSettings menu, look forInlay Hints and activate it if it is not already configured. For the development of your Angular application, you can also perform specific configurations byselectingTypeScript.

It is also possible to turn on this functionality by directly configuring thesettings.json filewith thefollowing elements:

{  "typescript.inlayHints.parameterNames.enabled": "all",  "typescript.inlayHints.functionLikeReturnTypes.enabled": true,  "typescript.inlayHints.parameterTypes.enabled": true,  "typescript.inlayHints.propertyDeclarationTypes.enabled": true,  "typescript.inlayHints.variableTypes.enabled": true,  "editor.inlayHints.enabled": "on"}

Fira Code font and ligatures

An important detail thatnot every developer pays attention to is the type of font they use in their code editor. A confusing font can make it difficult to read code and tireyour eyes.

The ideal option is to use monospaced fonts, that is, fonts where the characters occupy the samehorizontal space.

A very popularfont isFira Code (https://github.com/tonsky/FiraCode), which, in addition to being monospaced, has ligatures for programming – that is, joining or changing characters that represent symbols such as==,>=, and=>, as shown in thefollowing figure:

Figure 1.1 – Example of symbols with font ligatures

After installing the font on your operating system, to enable ligatures in the font in VS Code, access theconfiguration file as in the previous section and add thefollowing elements:

{  "editor.fontFamily": "Fira Code",  "editor.fontLigatures": true,}

Standardizing the extensions and settings in the project

In theWhy choose Angular? section, we learned that one of the advantages of choosing this framework for your project is the standardization it provides to development andthe team.

You can also standardize your VS Code settings and record them in your Git repository so that not only you but also our team can have that leapin productivity.

To do this, in your repository, create a folder called.vscode, and inside that folder, create two files. Theextensions.json file will have all the extensions recommended by the project. In this example, we will use the extensions wesaw earlier:

{  "recommendations": [    "dbaeumer.vscode-eslint",    "esbenp.prettier-vscode",    "Angular.ng-template",    "donjayamanne.git-extension-pack",    "editorconfig.editorconfig"  ] }

Let’s also create thesettings.json file, which allows you to add VS Code settings to your workspace. These settings take precedence over user settings and VS Code’sdefault settings.

This file will have thepreviouslysuggested settings:

{  "editor.bracketPairColorization.enabled": true,  "editor.guides.bracketPairs": true  "editor.fontFamily": "Fira Code",  "editor.fontLigatures": true,  "typescript.inlayHints.parameterNames.enabled": "all",  "typescript.inlayHints.functionLikeReturnTypes.enabled": true,  "typescript.inlayHints.parameterTypes.enabled": true,  "typescript.inlayHints.propertyDeclarationTypes.enabled": true,  "typescript.inlayHints.variableTypes.enabled": true,  "editor.inlayHints.enabled": "on"}

By synchronizing these files in your repository, when your team members download the project and open VS Code for the first time, the following messagewill appear:

Figure 1.2 – VS Code prompt for recommended extensions

Once confirmed, all the extensions configured in the file will be installed in the VS Code development environment of your team members, thus automating the task of standardizing the team’swork environment.

Angular DevTools

One tool missing from the Angular framework was a way to drill down into an application in the browser. Browsers such as Chrome and Firefox have greatly improved the developer experience over the years, broadly for all typesof websites.

With that in mind, the Angular team, starting from version 12, created the Angular DevTools extension for Chromeand Firefox.

To install it, you need to go to the extension store of the browser (Chrome or Firefox) and clickonInstall.

With it installed, access to the site built with Angular, and with the build set up for development, theAngular tab will appear in thedeveloper tools:

Figure 1.3 – Angular DevTools Chrome extension example

Thistool allows you to browse the structure of your app, locate the code of the components on the screen, and profile your application to detect possible performance problems.

Now you have a productive development environment for developing Angular applications, we are ready to startour application.

We have our tools installed and configured and now we are going to start our Angular application. First, we are going to install the Angular CLI, which will be responsible for creating and building our application. In your terminal, type thefollowing command:

npm install -g @angular/cli@16

After installing the CLI, use the following command to confirmthe installation:

ng version

The following figure should appear in your terminal (the Angular version maybe newer):

Figure 1.4 – Angular CLI prompt confirming you have correctly installed the tool

If theng command isnot recognized, restart the terminal. Thisng command is the CLI call and will be used in this and other chapters ofthe book.

Let’s start our project using theng new command. The Angular CLI will ask for some definitions ofyour project:

1. The first is the name of the project; for this example,enterangular-start.
2. The second prompt is whether you’d like to configure your project’s routing, for which we’ll inputYes. This request will tell the CLI to create the base files for the route, which is recommended for most applications; an exception could be an Angular library you would liketo create.
3. The next prompt will tell you which CSS format your project will use. Angular by default supports conventional CSS and the SCSS, Sass, and Less tools. For this and other examples in the book, we willuseCSS.
4. Confirming the Angular CLI will create the entire initial structure of the project and will install the dependencies using thenpm i command, leaving everything ready for the start of development, as in thefollowing example.

Figure 1.5 – Prompt of files generated by angular-cli

To verify that the project was successfully installed, in your operating system’s terminal, type thefollowing command:

ng serve

This command will start the development web server and load the example project page, as shown inFigure 1.6:

Figure 1.6 – Example page generated by angular-cli on project creation

Theng new command has other options that can be used for specific needs in your project. They are listed in the official documentation (https://angular.io/cli/new), and here are some that maybe interesting:

• Parameter '—package-manager': With this parameter, it is possible to choose another node package manager suchasyarn (https://yarnpkg.com/).
• Parameter '--skip-install': With this parameter, the CLI does not perform the package installation step, which can be useful for creating automation tools foryour team.
• Parameter '--strict': This parameter is set totrue by default, but it is important to mention it because it configures your project instrict mode, which configuresthe TypeScript and Angular mechanisms to improve type and template validations. Formore details, seeChapter 3,TypeScript Patternsfor Angular.

Project structure

The Angular CLI creates the project in the structure recommended by the Angular team with all files configured by default. To deepen our knowledge of the framework, we need to know the main files, their functions, and available customizationsas follows:

• src: This is the folder where your project will be, including all components, modules,and services.
• assets: Contains the static files you will need in your project, such as images and icons. In the build process, by default, it will export the files from this folder without any changes to theproduction build.
• index.html: This is the initial file of your application. This file will be used in the build process, and it is recommended not to change it unless there is a very specific need. The title information must be changed with an Angular feature and not directly inthis file.
• main.ts: This is the first JavaScript file that will be loaded in your application. You shouldn’t change it unless your project has a very specific need for it tobe changed.
• styles.css: This is the file that can contain the global CSS of your application, that is, the CSS that can be read by all components since Angular by default isolates the CSS of each component. This file is usuallymodified when your project uses a design system such asMaterial (https://material.angular.io/).
• .editorconfig: As described in theVS Code section of this chapter, this file, together with the extension that interprets and configures the IDE, allows standardization in your code conventions, such as the use of double or single quotes and the use of tabs orindentation spaces.
• angular.json: This is the most important configuration file for an Angular application. In it, you can customize the way your project is built, and definebudgets for the size of bundles (more details inChapter 12,Packaging Everything – Best Practices for Deployment), amongother settings.
• package.json andpackage-lock.json: These files refer to the dependencies of thenpm packages of your project and also the place to create thenpm scripts that will be used in the creation of the CI/CD pipes of the Angular application (more details inChapter 12,Packaging Everything – Best Practicesfor Deployment).

As of version 15 of Angular, the CLI hides Karma configuration files and environment variables files (enviroment.ts) by default with the justification of simplifying the project structure. It is still possible to create these files for fine-tuning your application build, test, and environment processes (more details inChapter 8,Improving Backend Integrations: theInterceptor Pattern).

We created our project using theangular-clitool, but this tool can help us even more, as we willlearn next.

We learned how to create aproject with all its options, but the Angular CLI is far from being just a project creation tool. It is a very important tool for the productivity and workflow of an Angular application. All available options are described using thefollowing command:

ng --help

We will detail some of the most interesting options here, and in the next chapters,we will continue to use them, given the practicality ofthis tool.

ng add

This command has the function of adding an Angularlibrary to your project. You might be wondering,Doesn’t npm install do the same thing? and you’d be right. However, when you need to install Angular Material as a library, installing the dependency is just thefirst step.

Many libraries such as Angular Material itself need the configuration of theangular.json file and the creation of some otherlib file, among other tasks. Theng add command allows the library creator to automate these steps and simplifytheir workflow.

To exemplify this in the project that we created, we will use thefollowing command:

ng add @angular/material

Executing the preceding command, the library will make some prompts (in the same format as we saw for theng new command) and in the end, it will configure our project with the library, as shown inFigure 1.7.

Figure 1.7 – Installation of Angular Material using angular-cli

ng update

In the development of our projects, updating the version of something often takes more time than adding a new library. Theng update command makes this task almost trivial, being one of the greatest allies when it comes to updating the Angular version ofour application.

On the Angular update website (https://update.angular.io/), the Angular team details how to update a project in old versions. Larger and more complex projects may have their quirks (which are usually described on the website), but all applications start with the following command (in this case,version 15):

ng update @angular/core@15 @angular/cli@15

The Angular CLI will take care of updating the package and even making possible automation-breaking changes; often, only this is enough to completely updateyour application.

This command, likeng add, is alsoavailable for libraries that have been configured by their authors and can benefit fromthis automation.

ng serve

This command is used by every Angular developer (it’s the first thing you should do after creating a project) and its function is to upload a developmentweb server.

One of the most interesting and productive features of this command is the hot-reload capability; that is, the server restarts every time a project file is updated, allowing you to see its modification in real time inthe interface.

A productivity tip for this command is to use theopen parameteras follows:

ng serve --open

With this parameter, as soon as Angular loads your application, the CLI will open the default browser of your operating system with the application you areworking on.

ng build

Theng build command is intended toprepare your application bundle to be executed by the production web server ofyour choice.

It performs a series of optimizations to guarantee the delivery of the smallest possible bundle ofyour application.

This results in a performance gain since with a smaller bundle, your client downloads faster, which is important, especially in environments withslow internet.

We will discuss this command in more detail inChapter 12,Packaging Everything – Best Practicesfor Deployment.

ng deploy

Theng deploy command allows you to fullydeploy your application to a cloud provider such asMicrosoft Azure.

This command works together with the Angular library of the provider you want to use, so for it to work, you need toinstall it.

We will discuss thiscommand in more detail inChapter 12,Packaging Everything – Best Practicesfor Deployment.

ng generate

Theng generate command has the function to generate almost all types of Angular components that your application can use. This function brings a productivity gain in your workflow as it generates all thenecessary files.

Let’s generate ourabout page in our example project with thefollowing command:

ng generate component about

We can analyze in our project folders that the Angular CLI created the TypeScript, HTML, and CSS files necessary for renderingthe component.

However, it also generated the unit test file for this component and updated the module for its use. All these files already have the minimum boilerplate for the development ofthe component.

In addition to generating practically all standard Angular components, this command can be used by external libraries that want to provide this development experience, as in the following example ofAngular Material:

ng generate @angular/material:navigation home

In almost every chapter of the book, we’ll use this command to generate thecomponents we’re going to study and the best practices and patternsfor them.

In this chapter, we covered the features and philosophy of Angular and how to start a project in the most productive way. We learned which technologies make up its ecosystem and how to configure its desktop with the best VS Code extensions and settings. Finally, we learned how to start a project with the Angular CLI and what other features this powerful tool can provideus with.

Now you’ll be able to argue why to use Angular in your team’s project and you’ll be able to help it set up a productive work environment. You’ll also be able to use the Angular CLI to create and maintainyour project.

In the next chapter, we will learn how to organize the components of anAngular application.