Building Your First Angular Application

Web development has undergone huge growth during the last decade. Frameworks, libraries, and tools have emerged that enable developers to build great web applications. Angular has paved the way by creating a framework focusing on application performance, development ergonomics, and modern web techniques.

Before developing Angular applications, we need to learn some basic but essential things to have a great experience with the Angular framework. One of the primary things we should know is what Angular is and why we should use it for web development. We will also take a tour in this chapter of Angular history to understand how the framework has evolved.

Another important but sometimes challenging introductory topic is setting up our development environment. It must be done at the beginning of a project and getting this right early can reduce friction as our application grows. Therefore, a large part of this chapter is dedicated to the Angular CLI, a tool developed by the Angular team that provides scaffolding and automation tasks in an Angular application, eliminating configuration boilerplate and enabling developers to focus on the coding process. We will use the Angular CLI to create our first application from scratch, get a feel for the anatomy of an Angular application, and take a sneak peek at how Angular works under the hood.

Working on an Angular project without help from development tools, such as an Integrated Development Environment (IDE), can be painful. Our favorite code editor can provide an agile development workflow that includes compilation at runtime, static type checking, introspection, code completion, and visual assistance to debug and build our application. We will highlight some of the most popular tools in the Angular ecosystem in this chapter, such as Angular DevTools and Visual Studio Code (VSCode).

To sum up, here are the main topics that we will explore in this chapter:

• What is Angular?
• Why choose Angular?
• Setting up the Angular CLI workspace
• The structure of an Angular application
• Angular tooling